How properly compressed images can speed up your website
It is one of the most frustrating things about online shopping and all of us have probably experienced it – yes, I’m talking about the painfully slow loading of images on certain websites.
The average web page almost doubled in size between 2010 and 2013 and has continued to increase since then (it now stands at 2.5MB). This is predominantly down to the increased use of images and/or video.
Online shops are a classic example. With numerous products, every additional image increases the overall size of the web page. To combat this issue there are a number of services available which allow the image to be compressed without harming the image quality, whilst new formats such as FLIF and WebP have been created with the intention of reducing the negative impact that images have on a website’s speed/performance.
Did you know that search engines such as Google actually rank a well-optimised website above a similar site with poorly-optimised images? If you are based in the UK’s capital and are looking for help with your own website then why not take a look at the website of a professional web development company in London such as https://www.redsnapper.net, to see how they can assist you?
Thumbnail images can often be very slow to load and the reason is usually due to the size. Simply downsizing the original image by two-thirds before uploading will reduce the file size of the original image from 5MB to just 30KB. This will massively reduce loading speed.
The majority of images/graphics fall into one of three types of image or graphic used on websites – logos/icons, photographs, and infographics/diagrams.
Logos/icons – these should ideally be in the format of true SVGs (these scales automatically for all devices). Failing this, transparent 8-bit PNG or GIFs should be used. Do not save single color files as a compressed JPG file.
Photos – use JPG for photographs. If you’re using image manipulation software such as Photoshop, ensure you’re saving as JPG and be aware that you can reduce the quality to 40-50% without a noticeable reduction in quality.
Diagrams/infographics – as with logos/icons PNGs or GIFs are the best options. If your infographic has lots of detail, still stick to these formats but add a ‘zoom’ icon/function.