Why (Image) Size Matters.

Why Image Size Matters
Like us on Facebook

Why Image Size Matters

Recently I was hanging out in one of my favorite Facebook groups (The Badass Solopreneur Society) and there was someone in there having trouble finding information on what image sizes they needed for their site.

Here’s the question in full (see summary below if you’re too lazy to read it):

Image File Size Question

Summary: The main question was if there’s a 1600px wide slot, do I have to use a 1600px wide image to fill it, or are there other options and how/why would they be used? Also, can the same image be used in an 800px wide slot and any other various dimensions?

But, what the poster didn’t realize, was that what matters much much more is the actual file size of the images used.

Most people know that when it comes to images, a higher resolution equates to a better looking image, and therefore a better looking website.

However, the physical file size is not determined by the resolution of the image, and it has the biggest effect on how long your page takes to load.

Below you’ll find basically the answer I gave to the poster, but I’ve fleshed it out a little bit to apply to a wider group of people.

Does Image Size Matter?

For the purpose of my response, the original poster was using WordPress, but a lot of these tips will pertain to any platform you use. In the end, no matter where you upload an image, it will retain the same file size.

In this section, when I refer to “Image Size” I’m strictly talking about the image’s dimensions – i.e. how tall and wide it is.

When you upload a picture, WordPress (and most other platforms) will save it in various sizes anyway and depending on your setup you can normally pick which size to use in specific places.

Therefore, it doesn’t matter what dimensions your images are, they will still be displayed wherever you put them.

You can use a 5000px wide photo in a 1000px wide slot without any problems.

You could also put an image that’s 500px wide in that same slot – but it may get stretched and become pixelated. (Depending on your CSS, which we won’t get into)

Essentially, as long as it looks good to you, it doesn’t matter what dimensions you choose to use for your images.

Why Does Image File Size Matter?

What you should really be focusing on when adding images to your site is file size – I.e. MB/KB.

Each time someone visits your page they technically have to download whatever is on the page, including your images.

The bigger your image file sizes are, the longer they’ll take to download and therefore the longer the entire page takes to load – which is a big deal.

So how do you choose what size images to put on your site?

The simple answer? Just use the highest resolution images you can, while finding a happy medium with actual image file size.

The longer answer?

Here’s how I do it;

  1. Find an image I want to use and download it in a reasonable resolution (normally 2000px X 1000px minimum).
  2. Use a free tool like PicResize (or a premium tool of your choice) to scale your image down to either an appropriate file size, or ideal resolution for it’s position on your site.
  3. Upload the image and see how it looks.
  4. If the image looks bad, try going for a higher resolution/file size.
  5. If it looks good, but the file size could still be smaller, keep resizing and experimenting.

This seems like a lot of work. But I promise you that after a few times doing it, and the rewards you reap, you’ll be doing this every time.

Remember – the smaller the image file size the better, but don’t sacrifice quality of the image to achieve it. 

But Wait, There’s More!

Carefully resizing your images is more than half the battle.

But, if you’re an optimization nerd like me, and you want everything to run smoother than butter – there’s always more that can be done.

Here are some extra tips to help you get the most out of the images on your page;

Pay Attention To The File Extension

A file extension is the (dot)whatever at the end of your image’s file name. I.e. if you image’s file name is yoursweetimage.png – the “.png” is the file extension.

You probably already know that you can save your images in 2 main file types – .JPG (or JPEG) or .PNG with the added possibility of a transparent background.

But, did you know that saving in either format can cause a file size difference for your images?

Typically, saving your images in a JPEG format will produce a lower file size for the image – but the drawback is you can’t have a transparent background.

So, figure out what the use of your image is, and choose your file extensions accordingly.

Compress Your Images

If you use WordPress, you can install a plugin such as EWWW Image Optimizer (the best free optimizer I’ve found) to compress your images and make the file sizes smaller.

Compressing images inside of WordPress is an efficient solution, but just be careful. With some of these plugins there’s no going back once you’ve optimized them, and if you accidentally reformat your entire media library… Well let’s just say, I hope you keep regular backups.

Other than that, these plugins are very easy to use, and a suitable solution if you don’t screw around with them too much.

If you’re having trouble with your images getting cropped incorrectly by WordPress, you can use a plugin called Force Regenerate Thumbnails.

The plugin makes it so that your images fit properly into their containers by resizing them based on your theme/media settings.

Cache Your Files

A caching plugin such as WP Fastest Cache can also help speed up page load times in general.

The function of caching is to tell your visitor’s browser to keep the image it just downloaded while loading your page as a saved copy on your PC, so that you don’t have to download it again.

Manually adding cache rules is one solution, but a plugin like the aforementioned will work just fine with any WordPress site.

Use A CDN

CloudFlare CDN

CDN stands for “Content Delivery Network”.

What a CDN does is it stores files from your server on multiple other servers across the globe.

Your website then instructs your visitor’s browser to download the files from whichever server is closest/most currently underused instead of your own server.

This may seem like a scary prospect, but CDNs are actually very safe, and can make a world of difference when it comes to your page load speed.

If you use a very basic hosting package, a CDN can also reduce the load on your server by using less of your own bandwidth (which can also make it cheaper in some cases).

My favorite CDN is provided by CloudFlare – but SiteLock offers a viable alternative.

I also use CloudFlare to speed up my site in many other ways, so I’d definitely recommend that you check them out.

The Jetpack plugin for WordPress also provides a viable photo-only CDN named “Photon”. Simply install Jetpack, and enable Photon in the settings to get started.

Further Speed Optimization

Even with all these tips, there’s so much more that can be done.

Try using a page grader, such as the one provided by Pingdom, to grade your page speed and find out if anything is slowing you down.

Pingdom Page Speed Test

From there, you can take the relevant steps needed to fix your site-specific issues.

If you want a full rundown on how I improve my page speed other than optimzing images – here’s a full guide.

Is there anything I missed? What do you do to optimize your images? Let me know in the comments!

Tom Watts
Follow me

Tom Watts

Blogger from England, living in Canada. I blog about blogging, SEO, Social Media, Web Design etc. Monday lover, coffee consumer. The glass is always half full. Read my full story here: Read More
Tom Watts
Follow me

Latest posts by Tom Watts (see all)

10 Comments

  1. Lynda Kenny says:

    Thanks for sharing this Tom. Getting the images right on your site are so important for its appearance. I am not as technical as you but I did get help to make sure the images on my own site were right.

    • Tom Watts says:

      That’s the thing, Lynda, is you don’t have to get technical at all! When it comes to images you just have the tick two boxes;
      1. Does it look good?
      2. Is the file small enough that it’s not going to ruin my page load time?

      As long as you can get those two right, you’re set 🙂

      Thanks for commenting as always,

      Tom

  2. Thanks for sharing this one Tom, Image sizes always get me going to google since the image is an important factor for websites, awesome post today!

  3. Thanks Tom…I use WPSmush to resize my JPEGS. Larger file image sizes can slow down your site speed. Thanks for sharing!

  4. Magic post Tom! I like using Jetpack too. Noted some nuggets from this post. Thanks Tom.

  5. Hi Tom,

    I landed up in your blog via a guest post you have submitted in Janice Wald’s blog. You can expect a regular readership me now-I have joined your newsletter too. I find your contents something related to what I am interested in.

    And when it comes to file size, I didn’t realize I have missed so many aspects. I also didn’t know the differences b/w .jpg and jpeg. Thanks. I will use your recommendations in my next post.

  6. Hey Tom,

    This is my first visit to your site. You really sound like you know your stuff!

    I’m already using some of these suggestions (Cloudflare, WPSmush instead of EWWW, small file sizes, etc) and still repeatedly “fail” the GTMetrix test for optimizing images. I have a photo intensive travel blog but typically upload jpg images no larger than 200 kb. I use the Twenty Fourteen WP theme, which unfortunately has an odd and rather small max viewable featured image size of 1038 x 576. The issue according to GTMetrix is that my images are resized in HTML or CSS and it recommends that I “serve scaled images.” Do you have tips or ideas how to best do that? I’ve read so many articles about it and can’t seem to fix it. I’m not sure what I’m missing here!

    Thanks, and I’ll be sure to check back for more helpful tips!

    • Tom Watts says:

      Hey Carrie,

      Awesome! Thanks for stopping by 🙂

      Yes, two big tips;

      1. Ditch WPSmush and replace it with EWWW – I found WPsmush to be pretty useless, and although EWWW seems complicated, the standard settings are sufficient for most people.

      2. Download a plugin called “Force Regenerate Thumbnails”. What it does is copies and resizes all of your images to fit in the appropriate places on your site. This will mean that you don’t need the HTML/CSS to do so. Under Settings>Media you can set your image sizes, and then go to Tools>Force Regenerate Thumbnails and run that to resize them – that should solve your problem!

      Thanks for commenting, and I hope to see you back here soon 🙂

      Tom

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend