MaxCDN Blog

How To: Optimizing Your Web Images

June 9, 2011

As the Internet is continuing to get pretty with all kinds and gradients and images, it is increasing the size of images used in many websites dramatically. Even though there are many technologies like CSS3’s gradient capabilities to help you use fewer images, you won’t see any significant differences until you start optimizing your images.

Even though there aren’t too many ways to optimize your images, there are many techniques used in Photoshop to optimize your images. For this test, we’ll be spending the majority of our time in Photoshop.


File Format Differences


Let’s face it, there are so many ways to save your images in Photoshop. But if you’ve been using the “Save As” feature in Photoshop to save your web images, you should know you’re already saving a very unoptimized file.

As most people are already aware of the PNG, JPEG, and GIF file formats, let’s point out the differences. Keep in mind that the JPEG format will typically always have a lower file size, but the quality of the file is sporadic depending on the file.

JPEG wins hands down in terms of file size for a normal photo. At 30% quality, JPEG seems to have the highest lead (in terms of image compression/file size), but in order to exaggerate one downfall of the JPEG format, images are very distorted. The JPEG file format has some quality issues at a lower quality percentage. If we create the same image at 60%, quality is increased by a ton, but the issues are still visible. Even the JPEG format at 100% is not the highest file size and looks crystal clear.

After the JPEG format, you can see one of the leading file formats on the web, PNG-8 (which means it’ll pick from a maximum of 256 colors), coming right after. Because it is much larger than the JPEG format, it also has one downfall, there are many visible “dots” on the image.

The GIF format is very much like PNG, but is less optimized when using very large images like the one we’re testing. It suffers from the same issues that PNG does.

Our last two images, the PNG-24 files, are much like the JPEG format at 100% quality, but with supporting transparency. Keep in mind that the JPEG format does not support transparency, and because of this, JPEG images are not used as the main theme files of many websites.


So what… what should we use?

In actuality, there’s no easy rule to decide which format every image should be saved as. Every image format has its issues but with those issues, we can narrow them down on which type of files should be used for what. Most of this is truly up to you and what you think is best. We can’t tell you which one is the best, but what we can do is guide you in the right direction in picking the best file format.

But please keep in mind, the one with the lowest file size isn’t always the best image format.

  • If you want the highest quality, use a JPEG at around 80% quality or a PNG-24. These will be fairly large file sizes, but there are some cases where a PNG-24 image (even with transparency) has a lower file size than a JPEG at 100% quality. You simply need to compare the two formats.
  • JPEGs are best used with pictures taken by a camera, as they contain many colors that the JPEG format excels at compressing.
  • If you are using minimum colors, compare the GIF and PNG-8 image formats. They are very similar, but it seems that GIF is great with small images and PNG-8 is great with lots of colors at a small size. Again, you need to experiment and compare.
  • If you need any kind of transparency, PNG-24 has the best compatibility. The edges of the image are very smooth, unlike GIF and PNG-8, but most of the time, the file size will be raised by quite a bit; use sparingly.

When in doubt, rate every image format on the basis of file size and quality. After that, you should have the best image format for the image you are working on.


Seriously, this is a lot of work! Any easier method?

If you’re using WordPress for your website, there is a handy plug-in called WP that will do all of this hard work for you.

Essentially, it’ll take all of the unneeded data in JPG files that your camera stores, optimizing the compression of a JPEG file, converting some GIFs to PNGs to save some space, and remove some unneeded colors from GIFs or PNGs.

No matter what way you use to optimize your files, it is needed. You want your website to load quickly, users want to see a fast website, and search engines will rank your website higher as your site is loading faster.

Images slow a website down more than anything else and there are many ways to make sure your website will load faster, but image optimization is key to a fast loading website.


Anything Else?

Please keep in mind that because images are fairly large, the download time is very much tied to how fast your server can handle requests and the time taken to transmit a file to the requested user. As you have many things loading on a typical website, like JavaScript, HTML, images, and more, all of these HTTP requests will slow down the server at some point.

One excellent way to stop this from happening is by hosting your main files, like your images and JavaScript files, somewhere else. This is one example of how our CDN services can speed up your website, the other reason being that we have a high class network and state of the art servers with Enterprise SSD drives that will serve your files in the fastest way possible to your users.

If you are willing to combine all your images together, typically your theme images used for your website, you can create a CSS spritemap and the user can download your images used on your website with only one HTTP request! CSS spritemaps are fairly simple, and there are even tools that can help you with the process; they’re something every web-designer should look into.

If you have never optimized any of your images, it may be a good time to take a look at what is slowing down your website.

  • Kishore Mylavarapu

    Using tools like DynamicDrive’s Online Image optimizer can also help in reducing image sizes.

  • Peter van Westen

    I would advise to forget about GIF altogether. PNG-8 is just as good, if not better, in just about all cases. There is no real point in trying to try to decide between these two every time. Just go with PNG-8 and save the time for more important things.

    JPG: for photografic images of more than 100×100 pixels (60-70% is usually more than enough quality)
    PNG-8: for small or low color images (like logos and such) and for simple transparency
    PNG-24: for images that need smooth transparency

    GIF: for if you really need an animated GIF :)

  • Taylor

    @Peter: PNG-8 is for sure better than GIF, but I personally love to use GIF when using 1px X 1px images for the sole purpose of using it as a repeated transparent texture in CSS. Sure you can make something transparent using CSS, but older browsers won’t support it. GIF gives you a ridiculously small filesize when doing things like that…

    I agree 100% with your uses of JPG, PNG-8, and PNG-24. I tend to use PNG-24 too much… even for photographic images… :P

    @Kishore: Good link! Too bad they only allow images up to 300KB in size.

  • Pingback: Keep Your Joomla! Site Lightning Fast! « MaxCDN Blog()

  • Pingback: Ten Tips On Saving Bandwidth « MaxCDN Blog()

  • ambreen11

    That’s a very handy article. It just goes to show that there is a lot to know about optimizing images for the web.