Unless you’re loading videos – chances are that images will be the largest (and therefore slowest to load) content on your page. If you’re using either jpeg’s or png’s it’s important to make sure they’re compressed as much as possible, but without loosing visible quality. There is a certain degree of compromise here of course! Photoshop users will already be familiar with the ‘Save for Web’ functionality, which offers an excellent way to preview the saved image so that you can balance any loss of quality with the file size. Most other image editing software (including photoshop elements and paint shop pro) will have similar features.
Choose the correct image file type
As well as compressing images, choosing the appropriate file type is also a must. As a general rule of thumb I would recommend the following:
- GIF: Logo’s and simple graphics with few colors and no gradients.
- PNG: Logo’s and more complexed graphics with more tone. Also the best for transparency.
- JPG: Use only for photos.
Reduce HTTP requests
Use Css Sprites
A CSS sprite is a great way of reducing http requests. If you have say 30-40 images used as backgrounds etc – using a sprite will instantly cut 30-40 http requests down to one.
Using CSS Sprites is becoming easier and easier aided by some great online tools. It’s now possible to upload all of your image files to a web app, and get back your sprite with a css snippet of your image coordinates on the sprite. My favorite tool is Project Fondue’s CSS Sprite Generator.
Use Apache’s GZIP Module
One for the server administrators now! If you’re using an apache web server, you should definately get mod_deflate installed. This will automatically serve up your files in a zipped format, which the users browser un-zips before rendering. This greatly reduces the load on your bandwidth and will really help speed up your site. If you’re using a shared hosting provider and don’t have administrative access to the server, I would highly recommend finding out if mod_deflate is enabled, and if not, find out why not!
Only load essential scripts in the <head> section
Use CSS 3 instead of images
With modern, standards compliant browsers such as Chrome and Firefox becoming more and more popular, and Microsoft’s Internet Explorer finally starting to loose its dominance – using CSS 3 is becoming more realistic. As long as it degrades nicely, this can be a good way of reducing the need for images. Subtle curves, gradients and shadows can easliy be added using CSS 3 instead of images and degrade sufficiently in older browsers so as not to cause major design issues!
Use a waterfall test
Once you’ve completed all of my above tips, it’s of course great to see if your hard work has been rewarded with a faster load-time. Always remember to test before you start so you have a bench mark to test against…
Waterfall tests provide you with a graphical representation of how long your page takes to load, which files are being loaded and how long they take and at which point the page begins to render. They will also show you an un-cached version and a cached version. The best test out there, and one I use all the time is www.webpagetest.org.
This blog post was written by James Davies, in-house developer at The Jewellery Boutique, specialists in handmade contemporary jewellery.