Optimise Your Images For Web

Why should I optimise my images?

Google is picky about what they like, but we can agree with them on this one: site loading speeds. A fast loading website is prioritised in Google searches and your visitors will appreciate the experience too.

One key way to achieve this is optimising your photos.

What the heck does that mean?

Make your photos smaller! But not too small. You don’t want them blurry or pixelated.

This sounds complicated, I’m just going to upload straight from my high-def camera.

Nooooooo. Here’s a quick, free and easy way. I promise.

Watch this video to see what I do before I upload images to my clients websites. Detailed zinstructions are below if you need more of an explanation.

How to optimise images for web

in 10 easy steps

Open Birme.net in your web browserWe’re going to reduce the amount of pixels (those are the little coloured squares that make up a photo) in your images. A photo straight off your camera might be four thousand pixels wide. We don’t need that many for web. Don’t worry, you won’t notice the reduction on your screen.
Note: You cannot add pixels to a photo. If it’s only 200 pixels wide, making it 1,000 pixels with this (or any) tool will not improve the quality, visually.

Add your photosClick the browse button and find where they’re saved, or simply drag your images straight from finder/windows explorer onto the site.

Set the size of your images

What size?

This depends what the images will be used for. If I’m not sure yet, I tend to size everything to 1920×1080 pixels. Why? Because even if that image is full width on a large screen, it’s going to look good. If you have a lot of images and they don’t need to be full screen you might choose something smaller. For example, if you have a lot of images for a gallery you could save them all at 1200×700 pixels and save a bit of load time. If 90% of your site visitors are on mobile, even smaller images for faster load time could be more important.

Adjust the cropYou’ll notice all the images now have an overlay showing where they will be cropped. You might want to adjust where this sits. Birme auto focuses where it thinks the image should be cropped, but it’s worth checking each pic to see that it’s right. You don’t have to crop your images, but this will build consistency on your site. For example, in a gallery, it’s quite annoying for the eye to register a different dimension image each time you click through. A consistent size feels nicer.

Don’t add a watermark or borderThat stuff is a bit tacky, with a few exceptions. If you’re a photographer you may need to protect your images with a watermark, this is an easy way to add it. Borders are a stylistic choice. If you want your site to look like it was built in the 90’s, have at it!

Adjust image Format and QualityThe recommended 80% for jpegs and 50% for webp files is just fine. If you know your website platform accepts webp, select webp. This is a newer filetype specifically designed for web. Google likes it (they created it) and it allows more compression with less quality loss. Some web builders don’t yet accept this format though.

Rename your files

Why?

This is a really cool feature to boost your SEO. Basically use your best keywords to name all of your pictures. For example, if you’re a scuba company in the Whitsundays, you could use the name scuba-dive-whitsunday-islands-xx. The Xs represent the numbers that will be added after each image to create a unique filename.

But they should have unique names according to what they are, right?

Ideally yes. If you’d like to name them all individually, have at it! If not, this is better than IMG_321.

Download your filesChoose if you want to download them individually or all in a zipped folder. If only one file downloads, check if there’s a small error window from your browser asking if it can download multiple files.

Open TinyPNG.com in your web browserNow that we’ve reduced the amount of pixels, we’re going to compress them a bit! Drag your (recently resized and renamed) pics into the window or click Drop your WebP, PNG or JPEG files here! to browse to them in your computer.Note: Don’t use the originals, make sure you use the ones we just downloaded from Birme.Panda will compress the files and give you a percentage on how much he reduced them.
Fun!

10.

Download your files, againOnce again, you can click each one to download individually or do them all as a zipped file.

That’s it!

Your files are ready to go and won’t clog up your site with copious pixels!

But Kate, my photos are already on my site and it’s a lot of effort!

Head over to Google PageSpeed Insights and enter your web address. Scroll down to Opportunities and see if image size is mentioned. If Google is rating it as a big problem, it might be worth doing! If not, just do thisas you add more photos. As your site grows your load speeds won’t.

Cyaround Australia Tours

Here’s a website I recently redesigned. I used this method to optimise their new photos and images. This is a website that uses a lot of imagery to showcase their incredible experience in the Northern Territory. But it’s important that load speed doesn’t affect their visitor experience. Check out the
case study here and if you’re planning a trip to the NT, book in with Storm and Jack for a one-of-a-kind experience!

The scuba photos I used for this tutorial are by Sebastian Pena Lambarri on Unsplash. Unsplash is an excellent resource for high quality, free stock images. You should credit your photographers though, like I just did!

Photo by KOBU Agency on Unsplash