Apr 02, 2013

Techniques & Best Practices for Image Optimization on the Web.

When we develop a site at iBec we make sure to optimize a site’s images to help our websites load as quickly as possible. Over the last few years I have been interested in going even further with image optimization, beyond what Photoshop will let you do. I have found a few tools and techniques to vastly reduce even the optimized files that usually end up on a final website.

Why do we need to optimize? 
Optimizing images reduces file sizes, therefore decreasing the overall page size - which enables the site load faster. A site that loads fast is key, if you have many images on your page and they are not optimized the page may take an excessive amount of time to load, which may cost you visitors.

Optimizing images is a great idea, particularly because of mobile browsers and cellular network speeds where the bandwidth is often less than optimal (I will have much more to say on mobile image optimization in a future post) . With that in mind...

What is the goal of optimizing our images? 
When we optimize we are looking for the highest quality image with the lowest file size possible.

Best Practices for Optimizing your Images:

When should I use a particular image format?

  • .jpg/.jpeg - Use JPEG's for Photos - Almost Always: JPG is a lossy format which means that you can adjust the quality of the image to decrease the filesize.
  • .gif /.png (8 Bit) - GIF & PNG-8 are great for images with solid blocks of color and very few colors, transparency is available to both but you will need to define a matte color (typically your background color). You can also animate GIF's - which is badass.
  • .png (24-bit) - PNG-24 is great for all the things GIF & PNG-8 is good for but provide a full alpha channel for transparency so no matte color is required. Full Transparency comes at the expense of file size - PNG-24 is also great for photographs that require a transparent background.

Image Optimization Tools

This post covers my workflow, I will do my best to explain the general concepts, though your preferred tools may change. Below are the tools that I use.

  • Adobe Photoshop (this post will cover optimization based on exporting from Photoshop).
  • ImageAlpha - Mac - Changes PNG-24 to PNG-8 with full alpha channel.
  • ImageOptim - Mac - The last step in the process - works with all image formats.
  • For Windows users you could try: RIOT which is similar to ImageAlpha and ImageOptim

Optimizing .JPG's

Optimizing JPG's is easy.

  1. Size your image in Photoshop to the dimensions you require. Click on "File -> Save for Web" and a new window should appear - Looks like this: 
  2. In the upper right corner, you will want to make sure your image preset is set to JPEG - it doesnt matter if its High or Low - as long as it's JPEG.
  3. In the quality box, make sure you start at 100. You can reduce the quality clicking on the dropdown and adjusting the slider. If you would like to compare, click the 2-up tab above the image, this will show the original image and the optimized image next to it for comparison. Adjust the quality of the image until you start to notice the image visibly degrading.
  4. Now incrementally adjust until the image looks like the original with very few artifacts.
  5. Save the image once you are happy with it.
  6. Done.

Optimizing .GIF/PNG-8

Optimizing GIF's/PNG's is pretty easy too.
When you choose a GIF/PNG-8 for export you need to make sure that you have a simple image, GIF/PNG-8 has a limited color palette of 256 colors, and while both technically support transparency - it is also limited in that the transparency is all or nothing. so a drop shadow will have a white edge (which you can change.) and always have a background color - if you need full alpha transparency use PNG-24.
The best type of image for GIF/PNG-8 is an image that has little detail in it. a logo, or navigation element - things of this nature. Using GIF/PNG-8 as intended results in extremely small file size.

  1. Size your image in Photoshop to the dimensions you require.
  2. Click on "File -> Save for Web"
  3. In the upper right corner, you will want to make sure your image preset is set to GIF or PNG-8
  4. In the colors section, adjust the number of colors your image needs, if it is a simple 2 color logo, 8-16 colors will probably account for the 2 colors of the logo and all shades of gray.
  5. Save the image once you are happy with it.
  6. Done.

Optimizing PNG-24

  1. In Photoshop at the bottom of the layers palette, click on the "Adjustments" button, it looks like a half moon.
  2. then choose the "Posterize" option
  3. Posterization is a process that makes similar pixels the same color, the lower the # of levels the smaller the file size. Just like adjusting the quality of the JPG, levels will dramatically adjust the quality of your PNG. Keep in mind the original image (you can toggle the filter on/off in the layers palette) when adjusting the levels, it tends to "Average" the color values and can change large sections of color entirely. Posterizing may or may not be necessary depending on the image. It will almost always reduce the file size considerably if used properly.

Optimizing for Real:

Now that we are done with Photoshop we can use ImageAlpha and ImageOptim to decrease the file sizes even further.

Lets start with PNG-24 since the process for that is the most intensive. We will use ImageAlpha to essentially turn a PNG-24 into a PNG-8 with the full alpha channel.

  1. Open up Image Alpha and then open your image in ImageAlpha.
  2. You will see a section that specifies “Colors” with a slider, adjust the slider (reduce the colors) so the image still retains maximum quality. below the slider, it will tell you the original file size and the optimized file size. 
  3. Once you have your image where you want it go to: File-> Save As  - choose your location, also make sure that the box is checked off.
  4. Done!
  5.