5 Tips for Image Optimisation for your Website in 2021 📷⚡️

Loading speed is crucial for high-performing websites.

There’s more to SEO than just good content. It’s a combination of factors that also involve your website’s architecture and features such as image optimisation. Google PageSpeed Insights provides numerous suggestions on how to optimise your website’s performance, and the most recurring one is related to image optimisation.

With 53% of web traffic browsing on mobile devices, it is important to consider that large, full-resolution images are not required as the screen size will likely be smaller than 1024 pixels on its longer axis. Large images take considerably longer to load specially on mobile devices, which may result on loss of a potential client. Serving different image sizes for different screen sizes is another way of improving performance.

How to Optimise the Images on Your Website in 2021

This article suggests 5 ways to optimise images for your website; this should help improve your loading speeds and SEO performance.

1. Image Format

Choosing the most suitable format for images can help reduce the file size and improve loading speeds. The 2 most common image formats used on the web are JPEG and PNG. Here are the differences:

JPEG is a standardised lossy compression mechanism for digital images. Digital cameras compress raw photographs as JPEG images to make the files smaller in size. It is the most common file format for photo storage.

PNG is a popular bitmap image format on the Internet. This format was created as an alternative of Graphics Interchange Format (GIF).The main advantage of the PNG is the ability to feature transparent backgrounds. A lossless data compression method is used in PNG images for containing high quality graphics.

As a rule of thumb, we should aim at using JPEG instead of PNG for content images due to their overall smaller size, and using PNG for design images (such as your brand or logo).

With the evolution of browsers and the internet, new compression methods have further improved the file size reduction for images without impacting their quality: Google’s WebP format is widely compatible and significantly improves the performance of images.

Our chiro website templates feature an automatic WebP conversion tool that changes your images from either JPEG or PNG format into WebP; all you need to do is upload a new image and the website engine will do the job for you, like magic! ✨

2. Image Sizing

As previously mentioned, properly sizing images can impact the performance of the website. Keeping the images’ longest axis to a maximum of 2000px (either height or width according to the orientation) and a pixel depth of 72DPI is absolutely more than sufficient for high quality images on the web. You can use tools like Adobe Photoshop or even Apple’s Preview to change image size and resolution.

It is important to also consider the container size for the image in relation to its sizing. A 2000px-wide image is perfect for a full-width banner, but is oversized for a small information box. Hence, save different versions of your images in different sizes: 800px, 600px… Choosing the most suitable version to each container will also reduce the load times for your website.

3. File naming & alt text

With more and more people searching through images, it is also important to name the files using the SEO keyword strategy: a file named “springfield-chiropractic-neck-pain-0347.jpg” is more likely to appear on image search results than “IMG_0347.jpg”; plus, it helps you organise your files more clearly.

In line with item 2 in this list, add the size variable to the file name so you know which one is which (eg.: springfield-chiropractic-neck-pain-800w-0347.jpg).

In addition, include relevant alt text to your image. Alt text is descriptive content for visually-impaired users but can also help improve your image’s off-screen performance. Use the keywords and descriptive text to further optimise the images for your website.

4. Save for Web

Saving an image for the web can result on significant file size reduction. Saving for web strips down the file to its bare minimum, removing metadata (like camera settings, location, etc…) and keeping just the important stuff.

There are automated tools which can do this for you, the most popular being TinyJPG. We’ve had up to 86% file size reduction using this tool and it’s free to use, so definitely check it out!

5. Lazyload images

We can further increase website loading performance by having images load on demand. This means images are only loaded when the user scrolls down to them (or just before them), keeping the data transfer idle until needed. This is something that can only be done by manipulating the website’s source code or installing a plugin.

Luckily, all of our chiropractic website templates feature native lazyloading images to keep up with the modern web!

Stuck for Time? We Do It For You 👍

Do you want to have your website’s images optimised but don’t want to spend the time doing it? Count on our team to do it for you! Contact us and we will get started on it straight away!