Some of my pages involve foreground tiles with words on them written with Photoshop. And although they look ok on my computer, when I check the site online, the letters have fuzzy squiggles around them. I checked further, and discovered that files that are 20K in my computer, are only 5k on the server. I'm wondering what's going on, and is there a fix for it?
Help!
incrediBILL
2:13 am on Jun 20, 2014 (gmt 0)
What format is the image?
Speculating without any info, it sounds like you're using JPG or some compressed format that's being optimized when you published.
If that's the case, the optimization is cranked up too high is all. Turn down the compression settings to something using higher quality, larger file sizes and less compression and the fuzzies should go away.
not2easy
3:58 am on Jun 20, 2014 (gmt 0)
Is this on WordPress? Some of the default image handling options in WP can do that and if you're using an image plugin, check for settings.
lucy24
6:23 am on Jun 20, 2014 (gmt 0)
Turn down the compression settings
Better yet, don't use jpg for text images. It simply isn't a suitable format for material that's meant to have sharp edges (also applies to vector graphics). Unless you really want your banner headlines to have that artistically blurry, vaseline-on-the-lens look...
Embedded fonts are another option. I think all browsers, and the more recent releases of MSIE, support ttf embedding. But again not viable if the size of the font file(s) would be bigger than many pages' worth of images.
Adam5000
11:43 am on Jun 20, 2014 (gmt 0)
Very perceptive IB. The format is JPG, and at the end, I'm using a compressor. I reduced the compression to a minimum, and uploaded a test image, but the image size on the server remained the same.
Lu, changing the image format is an option. What do you recommend?
not2easy
3:38 pm on Jun 20, 2014 (gmt 0)
Use png, but optimize by reducing color depth, flatten and index the colors and compress to the max. Filesize is tiny at compression:9 and it looks good and loads fast. For simple images like text you get best results. Photos and detailed images with subtle shading often are better served as jpg. I recently took a folder of old background images into the 21st century this way and it was not unusual to convert aa 18kb gif to 600 bytes.
There are links to tools and information at the Google Speed [developers.google.com...] article.
lucy24
8:21 pm on Jun 20, 2014 (gmt 0)
optimize by reducing color depth
Seriously. I've got one site where all headlines and display text* are 16-color (4 bit) png. And most of those only use two colors, equivalent to {color} and {background-color} in css. When I use images for text, I duplicate the alt and title, and make both of them identical to the pictured text. Be sure to format your <hx> tags so if the user does see that alt, it comes out the same size as the image.
18k gif?! I can't even begin to imagine :)
* At the time I made the site, I didn't know that Papyrus was the second-most-stereotypical font in the world. But in context it looks pretty.
not2easy
9:05 pm on Jun 20, 2014 (gmt 0)
18k gif?! I can't even begin to imagine :)
OK, it was a handmade patterned image made in a Polaroid program on Windows98 and just kept moving along with the domain. Never gave it another thought until I could see the importance placed on image optimization due to the increase in mobile. Of course it makes sense, but it never seemed a priority.
Adam5000
1:25 am on Jun 21, 2014 (gmt 0)
Not2, Lu, these ideas sound good. I'll try them out and let you know how it goes.
The Page Speed score gave me 57 out of 100, so it sounds like there's some work left there. But a lot of it was the size of the font too small which is not a big deal to change.
Is 18K big for a GIF?
tangor
1:27 am on Jun 21, 2014 (gmt 0)
What are you using to compress your JPGs?
while is is true that text images in jpg are generally not suggested, I've used them for years with no problems as the reduced number of colors (pallet of web safe colors), size of the text (nothing smaller than 20pt), and the high (er) quality 70% compression gives good results. If you use sub-sampling in the compression process you can reduce filesize dramatically while maintaining a very high quality.
If absolute sharp edged text is desired then gif or png is a better choice.
More info, and more image options can be found here: [hongkiat.com...]
Adam5000
12:00 am on Jun 22, 2014 (gmt 0)
The png files are working much better than the jifs IB, not2, Lu, and tangor. I almost forgot about cell phones.
