After long time I decided to write We should see how long it will hold me. Well, that could be another idea for writing. Now back to the subject.
As a web developers we all have to optimize as much components of our websites as we can. Images are one of these things. So let’s start with some basics:
1. Don’t use over-sized images
If you have need for 200x100px image on your website and you are using 800x400px because you are lazy that’s not excuse. You need to resize images on needed dimensions. If you are lazy programmer think how can you optimize process of resizing. With smaller images page will load much faster.
2. Downsize DPI
You don’t need a 300 DPI image for web. 72 it’s enough. Here I don’t talk about image quality, because on your monitor they will look the same. The problem is with file size again. Often when the graphic designer prepares something for print people use same images for the web. It is absolutely ok to use them, but save them for the web first!
3. Optimize image itself
When saving image itself you don’t want to loose on quality so you put higher quality settings and that is a legit reason. But you can still keep both – quality and optimal image size. Use Yahoo!’s Smush it tool and you will decrease image size for even about 20% average.
4. Use CSS sprites
Instead of using 30-40 images or so for design/layout of your website use just one. All icons, buttons, shadows and other image elements of the page you can put in one css sprite. It’s worth learning how to do it because you will save precious load of the server by having 1 request instead of dozens. On high traffic websites that can have huge impact.
5. Add expire headers
When you add expire headers to your images with date 30 days in advance visitors will not load all the images on each page request. Images will be saved in browser’s cache. So that are more saved requests for quicker page load! But, be aware: if you make, for example, new sprite and overwrite it over old one (same name) many users will see old one because it’s cached (considering not using ETags). That’s not a problem – make that new file with new filename (consider versioning like: sprite_v20100911_01.png or similar) and all users will have fresh version.
Adding expire headers to your web server is easy. For Apache you need to use mod_expires like this:
<IfModule mod_expires.c> <FilesMatch "\.(js|css|gif|jpg|png)$"> ExpiresActive on ExpiresDefault "access plus 1 month" </FilesMatch> </IfModule>
Well, adding expire headers doesn’t apply to images only, but on all static content. If not using Apache for static content, even better because you need to:
6. [Advanced tip] Use Content Delivery Server
Optimizing images for web is simple. Decrease number of image requests, image size and increase server speed with some tweaks. But why bother? Today disk space and bandwidth are cheap so you probably asking yourself why to optimize images? Well, it’s not matter of disk space – it’s matter of speed, server stability and on the end, greater user experience. Even Google now looks page speed as one of it’s 200+ ranking signals. Did you know that Amazon found that each page load time increase of 100ms will decrease their sales by 1%? Financial factor it’s also not neglected. Why pay for 10 servers when with little of effort you can pay only 5? If you are good developer website optimization need to be your passion. Your goal to be even better.