Web image optimization

While working on a recent client's site, I noticed how writers and editors were not optimizing their images at all. There was an example where the image in PNG format was 2376K!! This will result in extremely slow loading time. The reality is that when publishing online there has to be a consideration given to the balance between quality and load time. I will show how to optimize images, and then how to automate the workflow for your staff/contributors and get consistent results.

Image formats

First let's discuss the various image formats that we can use on the web. The primary differentiation is the type of image compression scheme used, either lossy or lossless.


Lossy compression is a method to encode that tosses out some of the data that comprises the image. It minimizes the amount of data used to represent that image. Typically we display images at a much much lower resolution than what comes out of the camera, this allows us to discard some of that information and still end up with something that looks like the original.

Lossless compression on the other hand retains all of the original information found in the source file, it merely compresses it using various algorithms which discussing the differences in algorithms would be a whole different post. But see this wiki page for more info.
When you decompress the lossless file you get the exact copy as the source file. This is largely unnecessary on the web.

JPEG

JPEG is a lossy compression method that can often achieve a 10:1 compression ratio with very little perceptible loss of image quality. It is the defacto standard for much of the web. It however does not display transparency, and when used for small graphics, bullet points, buttons, etc. It may be better to use a different format.

The file name extensions can be the following:.jpg, .jpeg, .jpe
.jif, .jfif, .jfi

GIF

This is a bitmap image format that supports 8bits per pixel which allows 256 colors. Back in 1987 when this was invented that was great, now that we have monitors showing the entire adobeRGB spectrum this doesn't cut it for general graphics use, but for limited uses it is still great. Primarily used for banners, small graphics, bullet points, etc. It favors "favors flat areas of uniform color with well defined edges"  However for this sort of work, I prefer the PNG format as it features better compression which gives us better load times.

The file name extensions can be the following: .gif

PNG

This format was created as a reaction to the patent battle that took place with the GIF format. It is better in every way to GIF, unless you need animation. In that case, use MNG.
It also features transparency. 

The file name extensions can be the following: .png


I use Photoshop to optimize my images, that is understandably not in the budget for everyone. Here is a list of other tools that will to shrink your file sizes and achieve better load times.

 

Saving images with many colors for the web:

*Always make sure you are working with a copy and have an original unmodified file saved elsewhere. 

First let's check the resolution of the image: Image > Image Size...

 
  




















We can see that this image is far too large for sensible display on the web. Lets drop this down to something more reasonable:

Notice that I also reduced the resolution as well as the dimensions. 300 DPI is suitable for print, 72 DPI is fine for web.


Once we have done this we will then Save for the web. Choose File > Save for web and devices. (alt-shift-ctrl-s) Start learning shortcuts!

 At the top of this panel ensure that you click "4-up" This will show you four panels that you can manipulate independently to compare the various compression schemes against each other.

The file sizes and loading times are displayed in each pane. The load times are referenced as if via a 2Mbps connection. This may not be the case for your visitors. I am more concerned with file size to quality ratio. When you look at each panel you can see that there are artifacts introduced into the image. For my purposes I can't see a difference between 73k file(quality 60) and the original at 932k. However the load time difference will be noticeable!
The file size that you shoot for will be entirely dependent on a number of factors. I'll leave the exact size up to you, but now you should have the tools to do it.



In the case of the clients photo which was a PNG format at over 2000k, I reduced the file size to under 90k with just optimizing for web. That means they were wasting 26 times the bandwidth every time the page was loaded, not to mention the CPU cycles and memory load on the server.

The little tiny blue line is the optimized file. The large red line is the original unoptimized file from the client.

 
This may seem like a small example, but extrapolate this out....for a site that gets 40k unique page views a month. (Assuming the file is being cached by all repeat visitors, which it wasn't...but that is the topic of another blog post.) That is 90Gb of data being served out! vs 3Gb
Incredible!