{"id":671,"date":"2023-03-03T07:08:15","date_gmt":"2023-03-03T07:08:15","guid":{"rendered":"https:\/\/dev.eudomia.com.au\/rovecreative\/?p=671"},"modified":"2026-08-21T23:11:36","modified_gmt":"2026-08-21T23:11:36","slug":"optimise-your-images-for-web","status":"publish","type":"post","link":"https:\/\/dev.eudomia.com.au\/rovecreative\/optimise-your-images-for-web\/","title":{"rendered":"Optimise Your Images For Web"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t\t

Why should I optimise my images?<\/h2>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

One key way to achieve this is optimising your photos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t

What the heck does that mean?<\/h2>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Make your photos smaller! But not too small. You don\u2019t want them blurry or pixelated.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t

This sounds complicated, I\u2019m just going to upload straight from my high-def camera.<\/h4>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Nooooooo. Here\u2019s a quick, free and easy way. I promise.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t

How to optimise images for web<\/h2>\n\t\t\t\t\t

in 10 easy steps<\/h4>\n\t\t
\n \t\t
\n\t\t\t\t\t\t\t\t\t

1.<\/strong><\/p>

Open Birme.net in your web browser<\/strong>We\u2019re 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\u2019t need that many for web. Don\u2019t worry, you won\u2019t notice the reduction on your screen.
\nNote: You cannot add pixels to a photo. If it\u2019s only 200 pixels wide, making it 1,000 pixels with this (or any) tool will not improve the quality, visually.<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

2.<\/strong><\/p>

Add your photos<\/strong>Click the browse button and find where they\u2019re saved, or simply drag your images straight from finder\/windows explorer onto the site.<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

3.<\/strong><\/p>

\n

Set the size of your images<\/strong><\/p>\n

What size?<\/h4>\n

This depends what the images will be used for. If I\u2019m not sure yet, I tend to size everything to 1920\u00d71080 pixels. Why? Because even if that image is full width on a large screen, it\u2019s going to look good. If you have a lot of images and they don\u2019t 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\u00d7700 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.<\/p>\n<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

4.<\/strong><\/p>

Adjust the crop<\/strong>You\u2019ll 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\u2019s worth checking each pic to see that it\u2019s right. You don\u2019t have to crop your images, but this will build consistency on your site. For example, in a gallery, it\u2019s quite annoying for the eye to register a different dimension image each time you click through. A consistent size feels nicer.<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

5.<\/strong><\/p>

Don\u2019t add a watermark or border<\/strong>That stuff is a bit tacky, with a few exceptions. If you\u2019re 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\u2019s, have at it!<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

6.<\/strong><\/p>

Adjust image Format and Quality<\/strong>The 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\u2019t yet accept this format though.<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

7.<\/strong><\/p>

\n

Rename your files<\/strong><\/p>\n

Why?<\/h4>\n

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\u2019re 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.<\/p>\n

But they should have unique names according to what they are, right?<\/p>\n

Ideally yes. If you\u2019d like to name them all individually, have at it! If not, this is better than IMG_321.<\/p>\n<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

8.<\/strong><\/p>

Download your files<\/strong>Choose if you want to download them individually or all in a zipped folder. If only one file downloads, check if there\u2019s a small error window from your browser asking if it can download multiple files.<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

9.<\/strong><\/p>

Open TinyPNG.com in your web browser<\/strong>Now that we\u2019ve reduced the amount of pixels, we\u2019re 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\u2019t 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.
\nFun!<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

10.<\/strong><\/p>

\n

Download your files, again<\/strong>Once again, you can click each one to download individually or do them all as a zipped file.<\/p>\n

That\u2019s it!<\/h4>\n

Your files are ready to go and won\u2019t clog up your site with copious pixels!<\/p>\n

But Kate, my photos are already on my site and it\u2019s a lot of effort!<\/h4>\n

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\u2019t.<\/p>\n<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t\t

Cyaround Australia Tours<\/h2>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Here\u2019s 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\u2019s important that load speed doesn\u2019t affect their visitor experience. Check out the
\ncase study here and if you\u2019re planning a trip to the NT, book in with Storm and Jack for a one-of-a-kind experience!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t\t\t