Fix Slow Loading Websites – Yslow Image Tips

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.

Fix Slow Loading Websites

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

Your Tips

What image optimization tips or tools do you use to boost your sites speed?

The following two tabs change content below.
Jeff is the CEO and founder of rackAID. He has been working in hosting industry since the days of Rackshack's famed customer appreciation parties back in the early 2000's. Jeff is an avid cyclist, wine enthusiast, and admitted Kraftwerk listener (please don't hold that against him). You may spot him at any number of hosting, startup and small business conferences

3 Comments

  • Unter March 18, 2011 at 5:35 am

    http://siteloadtest.com is even better

  • gocreations January 14, 2012 at 4:41 am

    what about width and height of images….??must be in code or note??
    i mean we have the image in right size and we need also width and height or not??

  • Jeffrey Huckaby May 21, 2012 at 3:29 am

    You should specify image dimensions in your markup so that browsers can more easily layout out your page. Think of it as providing clues about what space is needed for when the image loads.

Post a Comment

Your email is kept private. Required fields are marked *

Suggest a topic or improvement?

  • This field is for validation purposes and should be left unchanged.
×