Another installment in our series on using YSlow to improve site speed. Image optimization is easy but often forgotten, but Yslow’s image tips can help you fix your slow web site.
YSlow Image Tips
- Optimize Images
- Optimize CSS Sprites
- Do Not Scale Images in HTML
- Make favicon.ico small and Cacheable
Optimize Images
In today’s web, you should not have to tell people to optimize images, but I often find this step is forgotten. Just a few kilobytes added to a busy image could translate into gigabytes of data transfer per month.
If your files are needlessly large, then your server has to spend more time delivering those files to the user. This increases server loads and raises concurrent connections.
Yahoo provides a very good tool called SmushIt. In fact, it is built into Yslow. I often run it on sites as a first step for performance optimization. If you’ve not double checked your images, now may be a good time to do so. This is a quick and easy way to speed up your web site.
Beware of content management systems that allow you to resize images. I’ve seen many of these systems take a well optimized image and upon resizing the image bloat the image. So if you are uploading images through your CMS and then resizing them, you may want to check if the final output is optimized. I know with our own CMS it tends to inflate images file size by as much as 30%.
Optimize CSS Sprites
If you have many small, reusable images on your site, then you should consider using CSS sprites. CSS sprites combine many small images into one larger one. You may be thinking that larger image files are bad but there are exceptions.
By combing many images into a sprite, you reduce the number of HTTP requests required to load a web page. For very small images, the network overhead required to fetch the image takes longer than downloading the content itself.
Reducing the number of HTTP requests required for a page can help the page load faster and place a lighter load on your server. Typically, it will be faster for your web server to serve one request for a 10KB file than to serve ten requests for 1KB files. By using sprites, you can reduce the number of requests/sec required by your web server.
Don’t Scale Images in HTML
This is pretty straightforward. Do not use HTML to scale your images. This mainly applies to making images smaller by setting the width and height attributes in your code. If you need a smaller image, just make the image smaller and reduce the file size.
Yahoo does not comment on this, but it is ok to scale up certain images in HTML. For example, a background image that repeats could be scaled in HTML. This would allow you to use a smaller file size.
From the server side, making files smaller means they get served faster. By serving files faster, you free up resources to serve more files, thus improving sever loads and site speed.
Make favicon.ico Small and Cacheable
The favicon.ico is an image that shows up in the bookmark tool bar. Even if you do not have one, most browsers will request it. By making this file as small as possible and setting a long expiration date, you can reduce the repeated requests for this file.
You can set expires headers for a few months or even a year in the future.
Server Impact
In general all of these tips fix slow loading sites by reducing the total size of the resources required to load a page. When you start adding images, 3rd party includes, and other items to your sites, you may not realize how large your web pages become. Keeping images optimized reduces this added overhead.
Yslow Series
- Fix Slow Loading Websites – Yslow Image Tips
- Faster Loading Websites – Yslow’s JavaScript Tips
- Speed up Your Site – Yslow Server Tips
- Content
- Cookie
- CSS
Your Tips
What image optimization tips or tools do you use to boost your sites speed?