image optimisation

What format do you need that image in? Image optimisation for your website

I have to get this off my chest. Personally, I blame Canva. Every bloody image I get for website projects these days is a PNG file. Is that all Canva can output? PNG files are not appropriate for photography. They are just not. Their file size is just huge. The only time a PNG file is the best format for your website is when you need to support transparency. And for product images, images in blog posts, photos anywhere … you do not need to support transparency.

So, to answer some quick questions …

I have product images for our store, what format should I supply them in?
I’d like them as a JPG please.

I have staff photos to give you, what format should I supply them in?
I’d like them as a JPG please.

I have some cool night time stock photography of London / New York / Paris that I’d like to use. What format should I supply them in?
I’d like them as a JPG please.

David, you’re sounding a little tense. Do you always want JPGs?
I am a little tense, actually. Thanks for noticing. No, I don’t always want JPGs. Let me give you some examples of when a JPG is not the best format.

Your logo. We’ll be wanting to use that logo in a few different places, I’m sure – and in a few different sizes, possibly different colours. We’ll need it in a vector format. If you have an SVG file, that would be amazing. It’s a format that scales without any loss of quality.

Failing that, an EPS or original AI file would also work. No idea what I’m talking about? That’s okay … chat to the designer who designed your logo, they’ll understand. Or put me in touch with them, that’s fine.

Sometimes, if you’re looking at having other peoples logos / imagery on the site and you want that to be shown in black and white, or it’s a logo with just a couple of colours in it, a simple GIF would work wonderfully. Typically, they output at the smallest file size.

That’s great David. Can you tell me why you get so uptight about this?
Because I started building websites before we all had amazing broadband. When file size really *really* mattered a lot. A big image file could take an age to download – and gosh darn it, I was paying for that transfer. But it’s still relevant today …

… because plenty of people will access the web on less than optimal mobile devices with slow connections, and why force them to download megabytes of images if a simple bit of optimising upfront will save them the hassle?

And Google cares. Even if you don’t. The ‘weight’ of your web page – and its subsequent performance – will weigh heavily in Google’s search ranking of your site. If you have a lot of images that are not optimised properly, Google will punish you (well, they’ll punish your site), and nobody wants that.

Plus – the bigger your images, the more storage they’ll take up on your server, the more bandwidth they’ll require, and the more resources your hosting company will burn through. Don’t do it for me, do it for the environment.

Yikes. Okay, so what are your top image optimisation tips?
Glad you asked. Always optimise your images offline first. There are good plugins available for WordPress that will optimise the images you already have (Smush and Ewww Image Optimisation to name but two), but – in my experience – you’ll always get better results offline.

So, first, resize the image to a point where it is as close as possible to the size at which it will be displayed. If you’re unsure, then a decent rule of thumb is: Ask your designer / developer to give you guidance for your individual case … if they won’t / can’t, then …

  • header / slider images, max of 1500px wide
  • product zoom images, max of 1200px wide
  • product images, max of 800px wide
  • product thumbnails, max of 400px wide
  • all other images … if they’re going to be full width, I’d stick to about 1200 – 1500. If they’re going to be used in the body content of a page, go with 800px

Then, when you go to export it, make sure you’re exporting it as a JPG. Your image editing software should have ‘quality %’ as an option. Anywhere between 80 & 85% will be just fine for you. Trust me.

That sounds good, David. Do you have image editing software you recommend?
As luck would have it, I do. If you’re on Windows and don’t want to pay anything, you can use Irfanview which is just fine. I first used it 20 years ago. Yup.

If you have a few pennies to spend, then the excellent options provided in the Affinity series (Designer & Photo) are well worth the £50 they’ll cost you. They have both Mac and Windows versions. I have both (fancy!) and use Designer for almost everything – the image optimisation is more basic than on Photo, but for simple website image optimisation it’s plenty. Photo is more of a Photoshop alternative.

And of course, on a mac, the free Preview will do a decent job of exporting JPGs. But I do suggest investing a few quid if it’s something you do reasonably often – especially if you are managing a website as part of your role.

Finally, if you want to get totally obsessed about the whole thing, you can remove all of the image metadata that automatically gets saved with your photography. It doesn’t normally take up a whole lot of file space, but if you’ve got an e-commerce site with X hundred photos on it, well, it all adds up. I use ImageOptim on my mac, and I believe that Irfanview can also do the same. So, there’s no excuse.

Right. That’s that off my chest. Enjoy the rest of your day!