9 Quick Ways To Optimise Website Images
You have probably been told time and time again that a website is the face of your business. Therefore, you put your maximum effort into everything you show to your visitors – the copy, the images, the videos, etc.
But there is more to the equation.
Just having pretty visuals on your website is not enough. Are they optimised and do they offer the best user experience?
User experience. The dreaded word.
It’s also the magic word.
Hubspot quotes Portent (2019), “The first five seconds of page load time have the highest impact on conversion rates.”
Providing a great user experience can reduce your bounce rate and eventually lead to higher traffic and more conversions – and for that, you need to optimise your website images.
Optimising your images leads to better page speed, improves your SEO score, helps you create faster backups, and takes up less storage space on a browser. Since you are paying for bandwidth, less storage reduces your cost.
So, let’s cut to the chase. Here is how you can optimise your images.
Choose the best file format
Many website owners previously loved the idea of using a video at the top of their site – yet website speed died because of this.
It’s best to use a visually attractive image, above the fold, to ensure that your website loads quickly, and visitors don’t get tired of waiting and bounce away.
But there are several file formats for images, so which one is the best to use?
Image file formats that use lossy compression offer you a trade-off between size and quality. If you want a smaller size, you have to bear with lower quality.
Some image file formats offer lossless compression which means there is no trade-off between size and quality when compressed.
It’s also important to check the compatibility of image file formats with modern browsers, as not all browsers support all formats.
PNGs offer lossless compression but are a larger size overall. JPEGs offer lossy compression but will always be smaller in size than PNGs.
You can also use next-gen formats such as JPEG-XR.
However, the best option is to use a .webp file, which is a format created by Google. WebP allows the resizing and compression of images without losing quality. It’s compatible with most browsers. You can easily convert PNGs and JPEGs to WebPs by downloading utilities from the official WebP website.
To detect avenues of image optimization, you can use the “serve images in next-gen formats” section of the Page Speed Insights Report. It will highlight images on your website that can be converted to more efficient file formats.
Resize your images
This is a rather simple and straightforward tip.
You can resize your images to make them the smallest possible size, without compromising on image quality, before you add them to your website.
Resizing is different from compressing, as when you resize, you reduce the resolution of an image.
You can use BeFunky which lets you resize according to percentage scale, and according to width, and height. You can also use the image resizer by Adobe Express or Promo.com for free.
If you want to D-I-Y, manually resize through the image editor on your laptop/PC, or from the back-end of your hosting platform when uploading the image.
Most hosting platforms automatically suggest smaller image sizes if the image you are uploading is too large and resize it for you.
However, resizing without compressing may not be effective.
Compress images properly
Imagine the squished face of a bulldog.
Yes, that’s what your images will look like if you do not compress them properly.
Compression means reducing the image size in bytes, without changing the resolution, and this is also necessary to improve website performance.
Your Google PageSpeed report will offer suggestions for images that you can compress to improve website speed.
However, it won’t tell you how these images will look once they are compressed. You can test and try different images with your favourite compression tools. We suggest you use Squoosh.app, a tool that can help you compare images before/after compression.
To get crisp compressed images, it’s recommended to use next-gen formats such as JPEG-XR and WebP. They are designed to allow for easy and optimal compression, so you don’t lose out on image quality.
Make your images responsive
To provide a great user experience, your website needs to be responsive to all devices – especially smartphones, as 66.5% of the world’s population has one, and over 50% use their phones for the web, according to Leftronic.com.
In order to make your images mobile-responsive, the best option is to set the appropriate CSS properties.
For example, using the object-fit property in CSS, you can specify how an image or video should resize to fit the screen better. Simply using object-fit: cover; in the image tag can make an image maintain its aspect ratio, as it shrinks or expands to fit the screen.
Avoid Cumulative Layout Shift
We have all visited a website that didn’t do what we expected it to do. Buttons did not lead to the correct page, text moved around, and so much more!
If the images on your website move or shift into different places when your website is loading, it’s extremely frustrating for the visitor.
This significantly detracts from the user experience because the website does not perform according to the user’s expectations.
This movement of images and text on a loading website is called cumulative layout shift (CLS) and you need to minimise it (or get rid of it completely). Google allocates a CLS score to your website and the ideal score is below 0.1.
How do you achieve that?
- You need to specify the height and width of your images in the HTML markup, so the browser can process this information when rendering the image.
- If you are not aware of the exact size, it is a good idea to allocate enough space on the page to fit whatever you estimate to be the largest image size.
- If you have dynamic content that could be problematic when the page is rendered, place it below the fold so it doesn’t impact the user experience.
- All ad partners should be asked to specify the size of their ad so that your browser doesn’t have to do all the mental gymnastics to figure out how big or small everything is.
- Avoid adding flashy web fonts after the page is rendered.
Following the above tips ensures that your images stay where they need to!
Work with Progressive JPEGs
Many things get better over time and that is exactly what progressive JPEGs represent. With progressive JPEGs, image quality is lower when the page begins to load, but improves once it’s fully loaded.
This makes the user experience much better and smoother. Your website page loads faster, without compromising on image quality and this is best for visitors that don’t have the fastest internet connections.
There are various free tools that can help you create progressive JPEGs. We recommend using Coding’s JPEG Converter Tool or Optimizilla.
Clean up with caching
If you could have an extra pocket in your memory to store important information that would always be retrievable, you would probably use it, regardless of how expensive it is.
That would be like having a photographic memory and just imagine what you can achieve with that.
That’s what caching does for your website. It is supplementary memory where important elements of your website are stored for quick retrieval.
Caching is considered the most effective way to optimise images, so it should be on your checklist.
Image cache services make cached tiles. These tiles are then used to gather website information quickly to allow website pages to open faster when being revisited. It is memory space that is stored on a computer for a period of time.
You can adjust the image cache lifespan of your site by setting up an HTTP response header. Longer lifespans are recommended if you do not change your images often.
You can check whether this lifespan has been set correctly through the “Serve static assets through an efficient caching policy” section on the Google PageSpeed Insights report. The section also shows which images require caching improvements.
Alternatively, you can use the Network tab in Developers tools on Google Chrome to check these HTTP headers. If you are using another browser, web settings on your host platform can also offer you an option to set the cache lifespan.
This brings us to the discussion of using a CDN.
Use a CDN
When we first saw an ATM, we really were astonished. No matter how far you are from your actual bank, you can retrieve money by inserting your ATM card. Content Delivery Networks (CDNs) also allow viewers to access content faster, no matter how far they are from the server it is on – no need for the information to travel the span of the Pacific.
A CDN is like a caching service, except the information is distributed on servers worldwide, rather than being on a computer for a short period of time.
You can use a CDN to allow images to load from the server closest to the viewer.
The closer the server is to the viewer’s physical location, the faster the images will load.
CDNs also select and load the best file format for each browser in order to optimise your user experience overall.
Add an image sitemap
Everybody needs a bit of direction and so does Google – or any browser. Add an image sitemap to your source code so that it is easier for Google to detect and index these images. This can improve your website’s image SEO.
Alternatively, you can also submit a sitemap to Google Search Console. Your images should also have tags that explain what the image is. This is specifically important for ecommerce sites that have many images.
You can view Google’s sitemap guidelines.
Conclusion
Following all of these tips will make sure your images do not affect your website performance or user experience! You do not have to implement all of them but ideally use a combination of two to three of these tips for optimal website performance.
Enjoy higher website satisfaction, less bounce, and more conversions!
