Top 4 Image Optimization Tips for Your Website

Show:

November 8, 2021 Marketing

When you design your new website or manage an existing one, an unseen management aspect is all too often overlooked. That is image optimization and management. Yes, many new web dev projects consider images in the beginning, but often there is no long-term control over how an image is added and exactly what the rules are when adding them. This can easily mean your images do not follow any kind of conformity, and if there is one thing search engines and ad networks love, it is conformity because they want your images to show up perfectly on a vast array of screen sizes from large monitors to small smartphones.

In this blog, we are going to look at the best image optimisation tips for your website…

1. Always Have a Policy That Requires New Image Uploads to Be Reduced in Size

Now reducing the size of the image on your website is a tricky business because you do not want to lessen the quality of the images too much. There are a couple of tricks you can use.

Image resizer (compression): Using an image resizer is the fastest and most convenient way to reduce the size of your images without harming the quality. An image resizer will automatically change pixel dimensions for you when decreasing the size of an image. It can also keep the image the same size and adjust the pixel dimension to reduce the size of the image.

Using JPG extension: The other way to reduce the size of an image without distorting the image is to save images using the JPG extension. This is as opposed to other image extensions like PNG, which often websites and website builder reject because the file is too big. You can use PNG for the site logo but JPEG is better for blogs.

In conclusion to this section, we suggest saving your images as JPG first to reduce the size. A word of warning, you may lose some transparency, but its not a big deal versus the page speed advantages your website gains. Once you have a JPG file, make sure you have the correct image dimensions by using an ‘image resizer’ to change the image size without losing picture quality.

2. Implement Site Wide Image Dimension Policies

Site-wide image dimension policies are important because (a) they will prevent people from uploading images that are too large in dimension which also means the file size can be reduced and (b) ensures that no one uses odd size images that will not show up correctly on some devices.

A vanilla policy many news and blog sites use is to have a standard size for all images. For example, I know some sites that use 1280×720 for the ‘featured image’ and a ‘800×400’ size for the main image at the top of the page. There are others that use medium size images of 300×300, then large images are 1024×1024 because these dimensions easily adapt to mobile devices.

Here are a few other image dimensions you can consider when optimising images:

Logo (200×100)
Blog (1200×630)
Portrait Featured image (900×1200)
Landscape Featured image (1200 x 900)
Banner Header image (1048 x 250)
Thumbnail image size (150 x 150)
WordPress background image size (1920 x 1080)

3. Use Code that Only Loads Images When You Scroll Down

Some web pages such as eComm websites need multiple images on one page. Now when the site visitor’s web browser loads the web page, it will normally load the entire page’s code, including images. However, it is pointless loading images below the fold. Instead, there is HTML code that allows web developers to delay the images from being loaded until the user scrolls down to the part of the page the image is on.

Quite a few website builders have this technology built in and many WordPress themes. However, not all, so it is worth consulting with your web developer to ensure your website’s pages are delaying the browser from loading images.

4. Use a Change Control Process with Checklist for All the Above

Having bloggers, page designers and web developers all adding images to your website can become messy – especially if you are managing a website with daily news, regular blogs with images and infographics, and adding pictures and infographics to service or information pages.

Imagine 10 news reports, 10 product reviews, and 2 blogs per week being uploaded. Some of these pages will have more than 1 image. If you do the math and say on average, each new page or blog has 2.5 images uploaded with the text, that 22 x 2.5 = 55 new images every week. It may seem like a tiring or frivolous task keeping a database of your images, but it really helps to ensure that when anyone uploads an image, those people responsible for doing so will follow a set process/procedure. You can use an explainer video for the process, so when new website contributors come along, they can watch the video and immediately follow proper processes.

That process should include: