• magnifying glass icon
    • left wave svg right wave svg
      3 Mins

      Why you should resize images for your web pages

      Why you should resize images for your web pages Featured Image
      Published on Mar 20, 2012 by Jon Payne

      When you put an image on a website, it has two sizes.

      One is the visible size on screen (it's height and width in pixels) and the other is the size of the memory (file size) it takes up on the hard drive of the computer that hosts your website.

      Aesthetically, you need to get the visible size right as too big and it might break your website - here's a great example of an image totally overloading our website from Natasha's post on how to resize images:

      oversized image of a Lemur.

      And too small and it's, well, too small:

      Picture of a lemur sitting on a log

      We’re looking at file size in this article, as it has a huge impact on the amount of time it takes to download to your potential customer’s device – desktop, laptop, tablet, smartphone, whatever.

      So what?

      Unnecessarily large images take excessively long times to download and therefore provide poor user experience (UX). Typically a poor UX means that when people find your site, they are less likely to buy your products / use your services.

      But doesn’t everyone have broadband?

      Well sure, most of us do – but broadband speeds rarely match up to what the supplier says in the adverts, so that’s a bit of a red herring. Perhaps more importantly, Google tests your site for speed. One reason it does this is because it’s looking to see if your website is going to be a drain on its resources… Google may be huge, but it’s looking at all the content of the web, so it needs sites that will deliver information efficiently and quickly. Another reason for the speed test is that Google wants to rank sites with relevant content and good UX more highly, if your images are too large, then your site will likely not rank as high as it could.

      Doesn't my content management system / blog resize my images automatically?

      It might claim to, but it is probably doing a pretty bad job. Here’s a picture that I uploaded with the WordPress picture uploader:

      Somerset Murmuration - Uncompressed










      And here’s the same one after I’d reduced it’s size in Picassa

      Somerset Murmuration - Re-sized










      The lower picture looks the same, but to Google it's 275 times smaller and therefore a far more efficient use of resources to download. The crucial difference to file size was changing the visible size of the image and reducing the quality from the sort of high quality needed to print a photo (which can be 2400 dots per inch) to the quality needed to render nicely on a screen (which is somewhere between 72 - 150 dots per inch).

      The 1920’s advertising cliché “A picture is worth a thousand words” might be hackneyed but it holds true for your online and offline marketing still. Follow Natasha’s easy instructions on re-sizing images here - your picture can speak 1,000 words but stay less than 100KB.

      Happy visitors, happy Google, happy bottom line.

      Thanks to http://www.flickr.com/photos/rocketjohn/ for the wonderful pictures of Starlings doing their murmuration thing, just up the road from our Shepton Mallet office.

      Jon Payne

      Founder and Technical Director of Noisy Little Monkey, Jon blogs about SEO and digital marketing strategy.

      Related Articles

      Black woman on the phone
      Topic: HubSpot, Sales Tips (4 Minute Read)

      Why sales teams need to change when the economy gets tight

      Person in a blue t shirt holding LOTS OF MONEY
      Topic: HubSpot (4 Minute Read)

      How to unpack the value trapped in your HubSpot

      Subscribe to our blog

      Get monthly digital marketing tips sent straight to your inbox want to know what you expect before you subscribe? You can preview the monthly newsletter right here.