GZIP Compression and Image Compression

Hey there,

What types of files can be GZipped?

I know JavaScript, CSS Files, and even dynamic coldfusion .cfm files can be GZipped. What about flash .swf files and image files .jpeg .png etc?

The test results on webpagetest.org says my images are not compressed. Does this have to do with GZip compression?

I know you can save an image at some % of the original quality to reduce the file size. How do you know what % to use? Is there a recommended percentage to reduce image quality by?

Thanks for any clarification.

Travis Walters

No, the image compression check (particularly for jpegs) is re-compressing the images at a standard quality level (and stripping out the meta data). You don’t want to gzip them, it will only make them bigger.

The target quality we used is based on Photoshop (so if you’re using something else it will be on a different scale). The photoshop standard we use is “save for web quality level 50” which means to use a jpeg quality of 50 in the “save for web” mode.

That’s just the standard we measure against though. What you really need to do is see how low you can go without sacrificing the image quality. The tools (like photoshop) that let you preview the output image as you play with the quality setting really help make it easy to do.

hi, on a similar note the results are showing my .png file to load longer then the jpg files. Should I be converting all the png’s to jpg’s ? my other question is I am on a shared web hosting plan and I want to know if going to a grid hosting will improve my load time. What parameter in the result should I look to see for a conclusive difference when I make the change.

In general you should use .png files for page “graphics” (logos, icons, buttons, things with text) and jpegs for things that are more like photos (people, etc). There shouldn’t be anything special about the type of file that would make one take longer than the other if they are both the same size (bytes).

For shared vs. grid hosting, the main thing to look at would be your first byte time. If you are looking to speed up the delivery of images and other static content you will be better off using a CDN than switching hosting providers (I use MaxCDN - http://www.maxcdn.com/ and am happy with them and REALLY happy with the pricing).

Thanks! From what I see the .png files tend to have more, 2 or 3 times the byte size then their jpeg counter parts and yes, these are picture images with some text and i don’t see any noticeable difference going from .png to jpeg. My first byte comes in at 1.18sec , and their on the page load time is 13.64s on 1.5 DSL . Yes, my site has a lot of static images and If my assumption is correct a CDN would fasten the load time, correct?

A CDN will help mostly if users from multiple locations use your site (i.e. it’s not just a community-focused site). The CDN will have really fast first byte times for all of the static content assuming your caching headers allow the CDN to cache the content.

If you see no difference in the images (and don’t need transparency), by all means switch them to jpegs. Play with the quality level to go as low as you can and still produce a satisfactory image (watch out for blockiness in the letters in particular).

If you have a link to your test results that you don’t mind sharing you might get some other useful feedback from the community as well.



You should try image optimization available in Google PageSpeed tool. It gives images in png but very optimized. Also try to use images with flat colors and avoid gradients etc. this will reduce help reducing the size of images.