image optimisation

Image size optimisation guide

How to optimise image size for SEO

If you’re wondering how to optimise your image size for SEO benefit this blog post will give you everything you need to know.

There’s more to uploading images to your website than simply finding an image on the internet and uploading it. First, you need to ensure that any image you upload is properly licensed. This means you’ve either purchased it from a library like Shutterstock, own the images yourself, or it requires some kind of attribution. Always double-check the licensing requirements to avoid any legal issues.

I’ve encountered cases where people have taken images from the internet for their websites without proper licensing.

For example, someone with a landscape blog might need a picture of a garden. They might search Google, find a suitable image, copy it, and upload it to their site. However, a few months later, they received an infringement notice from a stock photo library site. This happens because the photo is actually licensed to the photo library, and using it without proper rights is illegal. Always ensure you have the rights to use any image you upload to your site.

So, the main point here is to ensure that you’re only using images you own or have bought from a licensed stock library.

Now, what should you do when you upload them to your site?

Why size matters

I’ve seen many websites where people upload raw high-resolution images directly from Shutterstock, often around four megabytes. This is one of the worst things you can do. Large images significantly slow down your website, especially for users with slower internet connections.

For a small landscape-sized image, aim for a file size of roughly 100 kilobytes or less. Uploading a four-megabyte image will severely impact your website’s load time and performance. Always optimise your images before uploading them to ensure a smooth and fast user experience.

How do we do this?

First though, what is image optimisation?

Image optimisation is the process of adjusting and compressing images to reduce their file size without sacrificing quality. This includes selecting the right file format, resizing dimensions, and utilising compression techniques. The goal is to enhance website performance by ensuring faster load times and improved user experience.

How do I optimise an image without losing quality?

Optimising an image without losing quality involves a few key steps. We recommend the following techniques to ensure your images are web-friendly while retaining their visual appeal.

  • Choose the right format. Use JPEG for photographs and PNG for graphics with transparent backgrounds. JPEGS are a smaller file size compared to PNG files, so it helps to use this format for all photos.
  • Resize images. Ensure the dimensions fit your website’s layout to avoid unnecessary scaling. I use Canva and often set my images to a size of 1200 pixels x 800 pixels for landscape images. You can also use tools like Adobe Photoshop, GIMP, or online resizers to adjust the dimensions appropriately. Avoid uploading images larger than necessary.
  • Compress images. Use tools like Compress PNG or Squoosh to reduce file size without noticeable loss of quality.
  • Use responsive images. Implement the srcset attribute in your HTML to load different image sizes based on the user’s device. This can be technical and may be best to ask a web developer for help here.
  • Leverage lazy loading. Load images only when they appear in the viewport, reducing initial page load time. There are WordPress image plugins that provide for lazy loading, and your theme may also offer this functionality.

What are the best image sizes to use?

Choosing the right image size (and therefore file size) for your website is important for maintaining a balance between quality and performance. We recommend the following standard image sizes for different types of web content:

Hero images and banners

  • Dimensions: 1920 x 1080 pixels
  • File size: Aim for under 200 KB

Full-width images

  • Dimensions: 1600 x 900 pixels
  • File size: Aim for under 150 KB

Blog post and feature images

  • Dimensions: 1200 x 800 pixels
  • File size: Aim for under 100 KB

Thumbnails

  • Dimensions: 150 x 150 pixels
  • File size: Aim for under 20 KB

Product images

  • Dimensions: 800 x 800 pixels
  • File size: Aim for under 50 KB

Social media sharing images

  • Dimensions: 1200 x 630 pixels (Facebook and LinkedIn)
  • Dimensions: 1024 x 512 pixels (Twitter)
  • File size: Aim for under 100 KB

Logo images

  • Dimensions: 250 x 100 pixels
  • File size: Aim for under 50 KB

Gallery images

  • Dimensions: 600 x 400 pixels
  • File size: Aim for under 50 KB

Icons

  • Dimensions: 64 x 64 pixels
  • File size: Aim for under 10 KB

By using these standard sizes, you can ensure that your images are appropriately scaled for your website layout, providing a good balance between visual quality and load speed.

Sometimes, using an online tool like Canva may produce a JPEG that loses resolution the smaller file size you go, so in that case you may be able to double the dimensions to maximise resolution (a good balance between quality and size) or switch to a more professional design program like Adobe.

What are the benefits of optimising images?

Optimising images provides several benefits.

  • Faster page load times. Smaller image files load quicker, improving overall site speed.
  • Better user experience. Visitors are more likely to stay on your site if it loads quickly and smoothly.
  • Improved SEO rankings. Search engines favour faster websites, potentially boosting your ranking.
  • Reduced bandwidth usage. Smaller files consume less data, which is beneficial for both you and your users, especially on mobile devices.

Image optimisation examples

Take a look at this page and the image of the spine, about half way down https://www.aurumhealthcare.com.au/chiropractor-castle-hill

chiropractic image size

  • The image is in JPEG format (lower file size yet maintaining resolution)
  • Image size is 500 x 600 pixels, which is great for a website
  • File size comes in at a modest 61 KB – perfect for a fast load time
  • The image was created in Canva with this specific image size in mind
  • Additionally the image file name and SEO alt tag is the pages keyword ‘chiropractor-castle-hill’ which helps search engines better understand what the page is about.

Take a look at this Hero image on this page https://www.suprima.com.au/fully-baked-wholesale-bakery/

Suprima hero image size

  • The hero image is a larger JPEG of image size 1500 x 625 to fit the full width design feature
  • The file size was compressed down to 94 KB using Squoosh while maintained resolution and quality
  • The original source photo (from the client) was a super large 4 MB so obviously we didn;t want to use the original directly, so we created a new canva dimension, uploaded the original to Canva, added it to the new image size, downloaded as JPEFG, compressed on Squoosh and then finally uploaded to the client’s WordPress website.

Take a look at the collection of chiropractic images on the SEO landing page https://marrickvillechiropracticcare.com.au/chiropractor-enmore/

chiropractic image gallery

  • The images are all JPEGs
  • They have relatively small image sizes e.g. 644 × 402 pixels and 768 × 770 pixels to suit the page design and layout
  • File size is compressed using the free online image compressor Squoosh and they come in at 60-80 KB each – perfect.
    Canva was also used to create these dimensions.

Optimising images is a straightforward yet powerful way to enhance your website’s SEO.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *