Video Length: 14:04

Optimise images for your website

It’s really important to optimise images before you upload them to 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

Website owners can get themselves into all sorts of trouble when they download any old image off the internet and upload it to their website.

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.

6 subscribers!

(Updated 20/6/18)

I'm excited about getting to double figures. 

Please click through to my YouTube channel then hit the red subscribe button.

Thank you!

Subscribe to Cath Wood's YouTube Business channel

(I have 2 YouTube channels. This is my Business Channel.)

Boardroom table or coffee table?

Imagine you have a lounge room. There are a couple of couches nicely arranged but you still need a table where you can put a couple of books and your cup of coffee.

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.

Two Rules for Images

I have two rules when it comes to optimising images.

The first is the rule of SSNAP:

Size
Size
Name
Alt Tag
Progressive

The second is the rule of 10%.

How images are measured

The dimensions of an image, ie the length and width, are measured in pixels.

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?

Rule of 10%

The rule of 10% says that an image should be no more than 10% in kilobytes of its width in pixels.

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

No bigger than 100kb, ever

It’s extremely rare that any image on your website should ever be more than 100kb.

SSNAP

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 80.

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.

How can you tell if your image is progressive?

I use a tool called Techslides. I demonstrate Techslides at about 5:38 in the video.

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.

How do you make your images progressive?

I use a simple tool called RIOT, which lets you achieve four of the five SSNAP steps in one easy move.

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.

RIOT - Radical Image Optimization Tool

Other Tools to make your images progressive

You can also use Photoshop to optimise your images.

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.

Isn’t it all a bit much effort?

Optimising images is like any other tech thing. It can be a bit confusing at first but it doesn’t take long to get the hang of it. You’ll soon be taking just a few seconds to optimise your images before uploading them to your website.

Just remember:

SSNAP
The Rule of 10%

Remember to say hi

I love to hear from you. If you found this helpful or have any questions, please leave a comment.

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.