Image Size and Format Importance

How many of you upload a simple JPG (JPEG) image to a website, publish it and don’t think of the size of that file?  Probably most actually.

We have come across this before.  When you use sizes like Ebay or Facebook, you might not think of their size, unless the platforms throws a warning about it.

With your own website, it’s much more important – by why?  And to what effect does that have on your SEO?

Firstly let’s look at why images sizing is important

You have a photo that’s maybe 3500px wide, and around 4MB.  Maybe it’s a landscape photo of one with a lot of detail.
The image is going to be used on a page, and see at maybe half the width of the page – to most users, that’s around 950px or so.  So your website needs to load up the full whack 3,500px image, but then also smaller versions if it is designed to show smaller ones to smaller screens.  You might see this in the code, where you get ‘versions’ for different sizes created by WordPress.  But the original is still being used.

If you had a space on the wall in a room, and it was only 45cm wide, you wouldn’t be able to put a picture in there that’s 1m wide.  Think of it like.  You are ‘forcing’ a huge, maybe 3-4x the size it will ever been seen.  If it were an image of around 950px, it would likely be about 300kb or so – not 4MB.

Big SEO difference.  And Search Crawlers see this, that you have images that are originally 950-1050px, and displayed at 950px.  That’s good.
But go the other way, and it’s seen as bad; frankly “lazy”, even if you never meant for it to be that way (and most don’t).

We ran a scan for someone’s website a while back, and they had images around 5000px wide, being loaded at around 450px.  Staggering difference.  When it is optimised, it makes a big difference in so many ways.  From the way your page is perceived, to the speed at which it loads, and the power your device has to use to load that HUGE image, that will only been see at less than 1/5 it’s size.  Just think about that for a while.

It’s easy to show the difference in an article on here, but the only way you could see the difference is if you clicked the image to view the full size, and then zoomed.  Take it from us with the golden rule:  never upload an image to the size, that’s bigger than it will be seen.  #itsawaste

But what about the Image Format?

What image format should I use for websites?

The optimal format that Google loves, is WebP.  It’s very similar to PNG, in that it can be transparent, since JPG isn’t.
If you look at the image on our homepage at the top, the one with the ‘hands’ (if still there when you read this), that is a WebP image.  If it were JPG, it’s around 300kb.  But that image is 65KB WebP.  And full width to the screen.

We know there is a difference when the image is designed to show a room for example, where you want it absolutely crystal clear sharp – but it’s a balance.  Do you want it to load fast, be seen in a format Google likes, and optimised?  Or do you want it to be uber sharp, even if that makes it a big big image, that Google isn’t liking?

Or do you want that page to rank better?

Some website tools will automatically make images WebP on the fly, even if you uploaded JPGs.  But we tend to try and convert them first, as then the server also benefits from smaller file sizes for better website design.  A converted on-the-fly WebP might be 250kb.  But converted by hand, could be 45KB.  But here’s the thing, you’d think converting it from JPG would be better – no, that’s wrong.

We use a tool and for some reason, converting from a large PNG does a better job with quality and size, than from JPG.  Again – our homepage image was a PNG.

So next time you are uploading photos to a website, consider it’s size.  On a Mac, with the image select, use Ctrl + i, to view the file size.  If it’s quite a bit bigger than it will ever been size, reduce the size.  If it is a PNG photo, get it converted to WebP (contact us to find out more).

If your website has issues and you are unsure if you are using the correct formats, get in touch with us, or fill out our Website Audit form.  We can check these things for you, and perhaps show you examples of the differences.

Either way, think of the importants of image size and format on your website.  It does make a big difference.