Optimising images on a websiteAbout 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.
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:
- Only combine images on the same page, to reduce the wasted, unused areas of the sprite.
- Keep sprites to only a few images. Three or four is usually sufficient.
- Keep white space to a minimum, to keep the sprite size down.
- Save your sprite in a compression friendly format (png, jpg)
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.
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.
Try clicking the arrows and centre button on the image to the right, to display directional promps.
This is probably the least effective way of optimising your images but when you want to make an animated banner and all else fails...