How to optimise images for your website

Optimise images for your website

If you upload photos straight from your phone or camera you’ll make your website slow, which means your customers will click away before it even loads.

Search engines such as Google favour fast websites because they know that slow sites suck to use.

First, a quick reminder about copyright

Make sure you own or have permission to use all the photos on your website.

Google ‘Getty images letter’ to read more on this subject.

You can download and use high quality royalty-free photos from Unsplash.

You need a coffee table.

Thinking in terms of images on websites, what a lot of people do at this point is wrestle in a huge boardroom table. It’s big, it’s heavy, and it makes getting around the loungeroom slow and difficult.

Uploading an image straight from your camera to a website is the equivalent of dragging in a boardroom table when what you really need is a coffee table.

Optimising images is the process of turning the boardroom table into a coffee table.

The first is the rule of SSNAP:

Size
Size
Name
Alt Tag
Progressive

The second is the rule of 10%.

The weight is measured in kilobytes.

You can think of image measurements in exactly the same way as table measurements. Is it small and light or big and heavy?

That is, an image that’s 800 pixels wide should be an absolute maximum of 80kb, but probably less.

Size, Size

The first two parts of SSNAP are size – size in pixels and size in kilobytes.

If you’re uploading an image to use as a featured image on a blog post, it needs to be 795 pixels wide. It should be no more than 79 kb, but probably more like 60 or 70.

Name

Images come off your camera with meaningless names. Don’t upload these straight to your website. Rename the image with something meaningful to help search engines understand what they are.

You need to rename the image BEFORE you upload it to your website.

Alt Tag

The alt tag is the description of your photo.

It helps search engines such as Google know what your image is about. It’s also helpful for visually impaired people.

It should be a clear, concise, accurate description, not a string of 50 keywords.

Input the alt tag in the media library of WordPress.

Progressive

A progressive image loads gradually rather than from the top down.

Progressive images are considered better for users because you can tell what the image is from the start. The clarity improves as the page loads.

It’s a really simple and quick way to check if your images are progressive, which is handy if you’re not really sure if the tool you’re using is working.

I demonstrate RIOT from about 6:30 in the video.

Please be careful when downloading RIOT to your computer. The page contains an ad just under the download button. Sometimes that ad contains a very similar, deceptive download button. Make sure you click on the correct download button.

I’ve been using RIOT for many years and have introduced it to a lot of other people. It’s a great tool.

I always jump straight to RIOT because most of my clients and students don’t have Photoshop. They need a quick and easy tool to do the job efficiently.

If you’re a Mac user without Photoshop you’ll need to do your optimising in a couple of steps.

Use your native Mac image software to reduce the size in pixels. Then upload that image to tinypng and download it again. It will be both smaller and progressive. You’ll need to rename it on your computer.

Just remember:

SSNAP
The Rule of 10%

Please also visit my YouTube channel and like and comment on this video, and subscribe to my channel.

I hope you’re having a great day wherever you are.