The average web user will only wait up to 8 seconds for a page to display. With the optimum webpage size being less than 100k, if you're in an industry where images are your business, optimizing those images for your website can be cruel.

Optimizing web graphics correctly understands finding the right balance between image quality and image size. As each image should certainly be no more than 30k in size, following these three steps will optimize your images and make your page load faster.

Resize the Image.

Using a photo or image editing software package, you can re-size or crop your image or photograph to the correct dimensions that it will need to be for the website space. This is a better method than resizing the image within your html WYSIWYG editor, as despite the change in appearance, the image file size will remain unchanged.

Decrease the number of colors.

Reducing the amount of colors used in an image file will also reduce the file size. Again, within your image editing software, you can reduce the amount of colors that an image is using, ensuring that little detail or quality is lost. For example if you have a black and red logo saved as a .gif file, there should be no significant loss of quality to limit the colors from 256 colors to 4-8 colors which will not significantly reduce the file size. If your image uses gradients and you are finding that you are getting color blocks across the gradient areas, simply add some dithering to your optimized file. Dithering will increase the file size so you may have to get the balance between colors and dithering right for optimum size. You should always still find the image size significantly reduced the use of dithering.

State the height and width of your image

Whenever you use an image on your website, you should always try to include both the image height and width attributes in your html. This will allow the browser to quickly identify the size of the image, and move on to the rest of the page without having to wait for the image to load, so increasing your load speed.

Choosing the correct file format

An important way to reduce image sizes is to use the appropriate file type suitable for an image. There are two common file types used for websites graphics, Gif and JPEG.

GIFs

Most of your web images should really be saved as a gif file. A general rule of which file type to use, would be that most images except photographs should be a .gif file. This includes, simple line drawings, shapes, small icons, anything that is not too complex.

GIF files are loss-less compressed image files, which means that the image files can be compressed with no loss of data. However, gif files are limited to 256 colors or less, which is why they are generally not suitable for images. Gif files will also allow you to use transparent backgrounds, so that you can display your images on colored or pattern backgrounds.

JPEGs

Jpegs should only ever be used for photographs or more complex images that use a large amount of gradients. Image sizes are larger than gif files, however, image size can be compressed by reducing the image quality. You will need to experiment to find the right balance between quality and size. You should try to bring down the image quality as much as is possible before losing too much definition of the image. This will generally be about 50% reduction, although further reductions may be possible if necessary.

Utilizing the browser cache

A final way to reduce the speed loading times on your website is to where possible, use the same images through the site.

A browser's Cache is an area on the local hard drive that stores recently used images. When a browser views a page with image files, the browser will download the file and display that file within your browser. If you move to another page with the same image, the browser is able to identify the image and display it directly from the cache, without having to re-download the image once again. Which means that if you can use common images through your website, the loading times will be faster as the images will be ready and available for quick display.

Using this guide to optimize your images for your website, can significantly reduce your html document size, which will increase your page load speed. Beware, it can become addictive, and you can optimize too much. Do not sacrifice quality too much for the sake of speed. Nobody wants to view ugly websites with grainy, pixilated images.

Leave a Reply

Your email address will not be published. Required fields are marked *