How to optimise your website images: Updated for 2024

Image SEO: A step-by-step guide on how to optimise your images before you add them to your website. An easy SEO win!

Stunning visuals are a must-have, not a maybe. The right pictures can grab attention, make visitors happy, and ultimately boost your sales. But hold on a second! Just throwing any old image on your website won’t do the trick. Big, bulky pictures can slow things down, frustrate visitors, and even hurt your search ranking.

This guide is your secret weapon for image optimization.

Step 1: Picking the Perfect Picture Frame (Choosing the Right File Format)

Imagine a beautiful painting – it needs the right frame to truly sparkle. The same goes for your website’s images! You need the perfect file format for them to perform at their best. Here’s a rundown of the most common ones and when to use them:

• JPEG (Joint Photographic Experts Group): Your go-to for photos with lots of colours. JPEGs strike a balance between quality and file size, making them ideal for product shots, hero banners, and other visually rich content. But there’s a catch – each time you save a JPEG, the quality might decrease a little.
• PNG (Portable Network Graphics): The king of crisp images! PNGs are perfect for graphics with sharp lines, text, and logos. The quality stays amazing even after multiple saves, making them fantastic for screenshots, infographics, and icons. However, PNGs tend to be bigger than JPEGs.
• GIF (Graphics Interchange Format): Remember those funny cat animations from way back? GIFs are animated images that can add a touch of fun and interactivity to your website. They’re great for short, simple animations or showing off product features in action. But be careful – large or complicated GIFs can slow things down a lot.
• WebP (Web Picture Format): The new kid on the block! WebP is a Google-made format that shrinks images way more than JPEGs while keeping similar quality. This means smaller files and faster loading times. While most browsers can handle WebP now, it’s not everywhere yet. Consider offering both WebP and a backup format (like JPEG) to be safe.

Choosing the Right Image Format for your website: A Quick Guide

• Photos: Use JPEG for most photos, but keep an eye on file size.
• Graphics, Logos, and Icons: Go for PNG for sharp lines and clear text.
• Simple Animations: GIFs can add a fun touch, but use them sparingly.
• Prioritize Speed: Explore WebP for superior compression, but ensure compatibility.

Step 2: Fitting the Frame Perfectly (Resize Your Images)

Imagine a giant painting in a tiny room – it wouldn’t look right, would it? The same goes for website images! Large images can take over your website’s design and slow things down. Here’s why resizing is important:

• Faster Loading Times: Smaller file sizes mean your website loads faster, keeping visitors happy and improving your SEO ranking.
• Improved Layout: Images that fit your website’s design create a balanced and visually pleasing experience for visitors.

What size should my website images be?

Resize your image to the correct size for YOUR website type and position.

• WordPress:
• Hero image max size: 1920 x 1200px (pixels)
• Images within the body of your website, square 800 x 800 px or rectangle 1200 x 800px.
• Images in your e-commerce shop – usually – 800x800px

Need image sizes for SHOPIFY? Click here: https://www.shopify.com/uk/blog/image-sizes

For SQUARESPACE: click here: https://support.squarespace.com/hc/en-us/articles/206566727-Adding-and-resizing-images

How to resize the images:

• Open Canva.com (or Photoshop if you are happier using that), or on a MAC you can resize your images: by double-clicking on the image to open it, TOOLS and then Adjusting the SIZE.
• Maintain Aspect Ratio: This fancy term refers to the proportional relationship between an image’s width and height. Resizing should maintain this ratio to avoid making your image look squished or stretched.
• Top Tip: Some website builder plugins automatically resize uploaded images. Try ShortPixel (https://shortpixel.com/otp/af/YTDARUM1236597) if you are using WordPress

Step 3: Lightening the Load (Compress Your Images)

Even after resizing, images can still be a bit bulky. That’s where compression comes in. Compression techniques reduce the amount of data needed to store an image without sacrificing quality. Here is a simple method::

Ensure your image is in jpeg format. Remember, only logos and favicons are pngs on websites!

This is currently my favourite way to do this for free: https://compressimage.io./

Drag the image(s) in from your desktop, press Download Zip once complete, and drag the download onto your desktop.

Even if you have only optimised 1 image, it will initially appear within what is called a .zip folder.

Double left-click on this .zip folder, which opens the folder and you will have the usual blue folder showing, probably named Untitled Design

. Open this folder – double left-click, and there’s your image!

Step 4 Correctly name your image

Let’s pretend this is your image and you have named it image1234.jpg

GOOGLE WILL NOT BE HAPPY! It means nothing to Google

This glass sculpture is by artist Deborah Timperely. Debbie has named this piece Sunlight Through Harbour Wall.

Your images must be named with keywords.

So I would not call this Sunlight-Through-Harbour-Wall-Deborah-Timperley.jpg (note the – between each word and the .jpg at the end).

Rather, to improve SEO, I would put Glass-Sculpture-Deborah-Timperley.jpg which is now full of keywords people search for.

It’s unlikely, unless you are looking for the Mona Lisa, that viewers will be searching for the name of the artwork itself.

STEP 4) Alt Text

What is alt text?

Alt text (alternative text) describes an image on a page. Alt text helps visually impaired people understand what the image shows, helps search engine bots understand image contents, and appears on a page when the image fails to load.

It is crucial to make your website accessible to all, and this is one of the vital steps to do so.

However, the alt text should not be deliberately stuffed with keywords.

With the image above, the alt text could be A glass sculpture in the form of a wall in blues and greens by Deborah Timperely.

However, for the image below,  Alt text of (and I am making this up) ‘Villa from Villa Holidays in Spain. Spain’s best-kept secret. Book with Villa Holidays’.

IS NOT CORRECT AND IS DELIBERATE KEYWORD STUFFING

It should read, ‘Infinity swimming pool with a view across the countryside’ (but without quotation marks. Also note that there is no hyphen between words in alt text).

You are now ready to upload your image to your website.