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.
Boardroom table or coffee table?
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
The first is the rule of SSNAP:
The second is the rule of 10%.
How images are measured
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%
That is, an image that’s 800 pixels wide should be an absolute maximum of 80kb, but probably less.
No bigger than 100kb, ever
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.
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.
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.
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?
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 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.
Other Tools to make your images progressive
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?
The Rule of 10%
Remember to say hi
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.