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.

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.

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.

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?

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.

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.

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.

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?

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...]

The png files are working much better than the jifs IB, not2, Lu, and tangor. I almost forgot about cell phones.