Optimising images on a website

About Blog Projects

When including images on your website, it is important that they load quickly so not to delay the page. The following ideas can help this issue if used correctly.

Use thumbnails at load-time.

Displaying thumbnails instead of large images, can not only reduce the load time of your page, but also draw more attention to its text content. This tutorial. shows how to create a very effective thumbnail with only a few lines of JavaScript. Hovering your mouse over the image displays a larger version.

Sprites Vs. Individual Images.

Sprites are a great way to combine your images into one, which dramatically reduces the number of HTTP requests of a page. There are a few things to keep in mind when creating a sprite:

The above bullet points reference this sprite, which I made using this tutorial. Each sphere was made seperately and then combined into this sprite. To produce the example above, I followed these instructions on using a sprite in a list.

Reducing White Space

One of the simplest ways to reduce the size of an image is to crop any unnecessary white space out of it. If you need white space around an image for padding, why not consider using CSS instead. The red line in the image below shows how much white space can be removed if the image was that size.

Smush it is a great tool for compressing your images before they are uploaded to your website. Simply upload them to the site and use the "smushed" image generated.

Caching Images in Stylesheets and Positioning Scripts

According to Yahoo, it is more efficient to place any image references in the stylesheets, which can be cached at load time. Where possible, use a container with a background image style defined, as opposed to having images in the HTML. This will also reduce the page size so there is less to load.

Another thing to try is placing all references to CSS at the top of the page and any Javascript at the bottom. Since HTML is read progressively from top to bottom, the styles will be seen first and any JavaScript can run afterwards, preventing delays.

Defining Image Dimensions

It is good practice to always define the dimentions of your image in the HTML, so that the page know what to expect. According to www.quality-web-solutions.com, this allows the browser to create a prepared box for the image to load in and continue loading the rest of the page.

As with anything, less is usually more and web development is no different. The less images on the page, the quicker it loads, as well as being easier for the viewer to take in. Take care to choose your images and try not to smother the text content, making it hard to follow.

Image Maps

Image Maps are a clever alternative to multiple image links, since they reduce the number of HTTP calls. One image as opposed to many, is always the better option, but as with sprites, they need to be designed effectively. Try to use the whole image when creating a map. If there is any wasted space, this will cost you load time. Large maps could be very labour intensive for the JavaScript as well so try to keep that in mind.

Try clicking the arrows and centre button on the image to the right, to display directional promps.


HTML Map Left Right Up Down Jump

Animated GIFs

This is probably the least effective way of optimising your images but when you want to make an animated banner and all else fails...

The good points to note from using an image like this are that there is now only one HTTP call and no JavaScript to work with, even if it is 800kb...

Greetings, Our daily Scripture email delivery will be unavailable while we upgrade our system. We expect it to continue in the near future. We encourage you to continue to read Scripture every day, it is alive and powerful. Many devotions are available at aDevotion.org/archive as well as adevotion.blogspot.com; additional Bible teachings are available at believers.org.

ABibleverse.org pausing (God bless you!)