Opitmising images are vital for improving the speed of your website. A website that loads fast offers better usability and performs better on search engines. Studies further show that a website’s failure to load within the first 4 to 6 seconds, is one of the main reasons why customers leave the website.

This makes it essential for every business to ensure the company’s website loads fast and is able to meet the expectations of users.

Of all that factors that affect the speed of a website, optimising images is arguably the most important. In this article we take a look at 12 ways to optimise your images for faster loading of your website. Optimising your graphics will speed up your website and make it load faster even on slow or mobile connections.

Here are 12 easy ways to optimise your images to speed up your website.

1. Use Correct Resolution

Make sure the resolution is 72 dpi which is the standard for website images. Higher resolution are great for printing but not for the web. They will only increase file size on a website without improving clarity. You can set the resolution easily in graphic tools like Photoshop however it is not very easy on software like Microsoft’s Paint that is built into Windows. By default images in Paint are set to 106 dpi which will produce  larger file size for your images.

2. Use the Right File Format

Images come in over a dozen file formats but not all formats are web friendly. Common web format include JPG, GIF and PNG. Stick to these formats only. Additionally, when using Web friendly formats, try to use the right format based on your needs e.g. JPEG will work better for photos whilst PNG or GIF many work better for icons.

3. Don’t Scale Down Images

Resize images in graphic programs to the size you wish to use on your web page rathen than using HTML code to resize the image on the page. E.g. if you are displaying an image of 200px by 200px, don’t upload a 500 px image and scale it to smaller size in the HTML editor. Instead resize it to the desired size in aPhotoshop of another graphic program. This will ensure images are of smaller size and the page will load faster.

4. Specify the height and width of images in Code

Many sites do not specify the width and height of images in the image tag. Although the rendered page will automatically display the full size of the image, specifying the height and width in code has advantages. It informs the browser about the size of the image so it does not have to calculate the size, resulting in faster loading time.

This also offers another advantage. When image dimensions are specified in code, the browser allocates a space for the image and loads the text around it while the image is being downloaded in the background. This allows the user to read the content without having to wait for the entire image to load.

5. Excercise Caution With PNG Images

The PNG format was created specifically for the Internet and includes additional support for 24-bit colours and alpha transparency. Although small icons and labels in PNG can have smaller file size, larger images or photographs cna be very large in file size.

An in-depth study by Pingdom on average file size for different image formats (see image above) shows the average PNG size to be quite resonable at 4.4 KB. However, this can be misleading, particularly when used for photos, screenshots or large images.  Another disadvantage with PNG images is that it offers limited optimisation capabilities for reducing file size.  Due to this, PNG images can easily run into 100′s of Kilobytes.

A good example is a simple screenshot of a website in PNG which can be over 3 times larger in file size as compared to JPEG.

6. Use GIF’s for Flat Images

GIF images support a maximum of 256 colours while JPEG can support millions of colours. Due to this GIF images tend to be the smallest in file size. In spite of this, GIF images are excellent for certain types of graphics and should be the preferred choice for flat-colour images such as logos, buttons, and plain colour images like backgrounds or headings. GIF is also the format of choice for animated images.

Take a look at the results of a study by Pingdom below that shows that 89.6% of the GIF images are smaller than 10 KB.

7. Reduce Colours for GIF Images

We have discussed above that GIF images support a maximum of 256 colours. However, not all images require 256 colours. By default all GIF images may be set to 256 colours but most professional graphics software will give you the option to reduce the number of colours. In Photoshop, this is displayed at the right of the ‘Save for Web’ window. Reducing the colours will have a significant impact on file size. A simple logo for example may be equally clear on 36 colours.

8. Adjust Quality/Compression of JPEG Images

JPEG images are best suited for photographs and offer excellent clarity and depth for true-colour images. However, if not optimised correctly, JPG images can be very large in file size.  Take a look at the stufy below that shows that JPG images can contribute to the highest percent of the total image size of a web page.

Fortunately, there is an easy way to reduce the size of JPG images. JPEG images use compression/quality scale which can be adjusted to reduce file size. By default, this may be set to 100% which can result in larger file size. Most graphics software offer quality slider for JPG images that you can use to adjusted quality/compression, reducing the file size significantly without having a noticeable impact on clarity.  In Photoshop, the quality slider is displayed at the right of the ‘Save for Web’ window.

9. Use CSS Instead of ‘Text Only’ Images

At times you may need to create custom graphics to produce the desired effect with text.  This is common for headers, tag lines, text banners, etc. But on most such occasions, you can create the same effect with CSS formatting.

As far as possible try to avoid the use of images for creating text effects and use CSS instead. This will reduce the file size and make your site load faster. Images are much larger in file size than regular text. Text graphics also defy SEO best practices.

10. Use Save for Web Feature

Graphic tools like Photoshop have a built-in ‘Save for Web’ feature that automatically optimises images for use on websites. This is a very handy feature that does most of the leg work for you and ensures images are fast to load.

In Photoshop, the save for web option is available under the file menu. Instead of choosing the standard save, choose save for web instead.

11. Avoid Cumbersome Flash Graphics

There are times when you need to rely on a custom graphic to display certain stylized text, but the more you can leverage CSS for displaying specific fonts, the faster your pages will load. Text graphics are also less valuable for SEO than actual text on the page.

12. Avoid Unnecessary Graphics

Images are important for a web page. They improve the quality of content and make it more appealing for readers. However, images tend to have large file sizes and reduce the speed of the website. It is thus important to only use images that support the topic and are relevant to the page. Including unnecessary images will not only slow down your page but also contradics good web design principles. improve the look and feel of the page, but can be detrimental to usability and increase the loading time of the page.

What About You?

How fast your website loads has a major influence on your search engine ranking and the overall usability of your website. Optimising images plays a significant role in speeding up your website or blog.

What methods do you use to improve the speed of your website? Do you use any of the methods above to optimise your images? We would like to hear from you. Please share your response by leaving a comment below.