ansaurus

Question

What to do with a big image that's slowing website loading down significantly

Answer 1

+7 A:

Things to try:

Repeating backgrounds: If part of it can be broken off into a repeating image, you can reduce file size a lot that way (divide the image into the parts that don't repeat, such as a logo, and the parts that do, and then use CSS to repeat it as a background).
Caching: You should look into whether the image is properly being cached or not. There's no reason it should reload on every page request. If the HTTP headers correctly allow caching, then the browser will not request it again until the image is cleared from its cache.

See http://www.mnot.net/cache_docs/ for some info about cache control with HTTP headers.

Use the Web Developer toolbar for Firefox to check the headers for the image (hit the image URL, then click Information > View Response Headers)
File quality or type: Also, you may be able to use Photoshop to resave the image in either a different format or lower quality. GIF and JPG images can have greatly different file sizes for the same image depending on the content of the image (GIF is very good for graphics with limited and/or repeating colors, especially when large portions of the same color run in consecutive horizontal pixels). If the image is photo-like, JPG can be very good because high compression can be disguised in very detailed images.

Renesis 2010-02-21 18:47:37

PNG will usually result in better results than GIF, especially with tools like pngcrush. Give http://developer.yahoo.com/yslow/smushit/ a try on your images! Use jpeg for optimum file size where a high number of colours are present

David Caunt 2010-02-21 19:00:44

Answer 2

A:

The two things you want to do are:

Convert it to PNG (10-30% smaller than GIF on average); and
Cache it effectively.

The way to cache it is to version it and use a far future Expires header. For versioning I generally just use the mtime (last modified time) of the file as a query string:

body { background-image: url(/images/background.png?1232343455); }

See Speed Tips: Add Future Expires Headers for adding the Expires header. You can do it with a script or with Web server configuration. The reason you need the version is that you can change it to force a reload of the file otherwise you need to rename it whenever you want to change it.

This way the background will only get downloaded once. Splitting the file into several will actually worsen the situation as browsers tend to limit the number of concurrent downloads and you'll be downloading more data overall (more HTTP headers plus image file overhead).

cletus 2010-02-22 00:32:58

Answer 3

A:

Putting the image on a CDN may also help (along with the other things mentioned), because people may load images from the CDN faster than your server.

chris 2010-02-22 00:41:12

Answer 4

A:

Crunching (removing unnecessary metadata and finding a more efficient compression algorithm) the image with a decent image compressor is a good start. Reducing the number of colors, changing the format (GIF or PNG24 to PNG8) when possible.

This may be totally obvious, but... defer it until the page is fully loaded (if the contrast of colors in the background image are not needed to make the foreground text readable).

An easy way to do this is to make the css selector for the background image dependant upon a class in the body like:

...
    <style type="text/css">
    /*<![CDATA[*/
        body.page-loaded{background:url(/path/to/image.jpg)}
    /*]]>*/
    </style>
</head>

<body class="page-loaded" onload="document.body.className+=' page-loaded';"> 
...

Of course, the "onload" attribute in the body tag should be migrated out (to a SCRIPT tag at the bottom of the page or in an external JavaScript file). Also this code doesn't require any JS library to run; it should probably make use of an event observer.

David 2010-03-27 06:04:38

ansaurus

tags:

views:

answers:

What to do with a big image that's slowing website loading down significantly

related questions