How to properly resize and optimise your images for the web

May 6, 2020

Andy Dane

We love it when our readers get in touch with us to share their stories. This article was contributed to DIYP by a member of our community. If you would like to contribute an article, please contact us here.

How to properly resize and optimise your images for the web

May 6, 2020

Andy Dane

We love it when our readers get in touch with us to share their stories. This article was contributed to DIYP by a member of our community. If you would like to contribute an article, please contact us here.

Join the Discussion

Share on:

There’s a lot of confusion (and a couple of myths) about the correct way to resize images for web before uploading them to your website. We want that balance of the image looking fantastic, and the site still loading really quickly. This quick guide should get you the best results!

Export Settings

File size depends on three things:

  1. The number of pixels in the image
  2. The colours and structures in the image
  3. The compression applied to the image

That’s it, so what are the optimum settings for your website? Read on.

Pixel Dimensions

It starts with exporting your images correctly in the first place. Too few pixels and you limit the usability of the image, you’re not going to be able to use it full width, too many and they’re going to be wasted because your client’s screen generally won’t display that many pixels.

From my testing, the optimum pixel width to get the balance of pin-sharp images when used full-width, and file size, is 2000px wide. Any more than this and you’re just adding file size for no-reason.

Quality / Compression

Next is the amount of compression, or quality – I know some guides suggest putting in a maximum file size – but I don’t like that. The file size of an image depends on the content, the number of colours, the complexity of any structures in the image, and the pixel dimensions. By forcing the image to go to a specific file size you’re just adding more compression than you possibly need and therefore reducing the quality too much.

So I stick with a specific percentage of quality from Lightroom – 75%

Resolution

Ah, Pixels Per Inch! Possibly the most commonly misunderstood setting on your export screen.

Your resolution setting does *absolutely nothing* to the file when you’re working in pixels. It’s a meta tag that sets the default print size (if you were to just hit print, and not send any size instructions to the printer).

Put whatever you want here (Adobe should just grey it out when you’re working in pixels). It literally won’t change a thing – test yourself if you want.

Export an image 2000px wide, 75% quality and 72ppi, and do it again 2000px wide, 75% quality and 300ppi – the file size will be identical.

PPI simply has no meaning in a digital file, if you set it to 72ppi you’re just saying “This 2000px wide image should be printed 27.78″ wide”.

The image below shows my Lightroom export settings for web.

Further Optimisation

The optimisation doesn’t stop there, I highly recommend using Shortpixel, if you’re not on WordPress you’ll have to upload the files to their website to optimise, but if you are on WordPress there’s a plugin that will link to their API.

No it’s not free, but it gives impressive results and if you use the “Glossy” setting, there’s no visible loss of quality but there is a decent drop in file size. Depending on how often you upload images, you could either buy a one off plan, or a subscription. The “short” subscription is only $4.99 a month and includes 5000 images per month, which is enough for most of us.

Editor’s note: Also check out JPEGmini for another tool to optimise the size of your image files for the web.

So there you go, a few simple steps to resize your images for web properly and give you a great balance between quality and filesize!

About the Author

Andy Dane is a Norwich based wedding photographer with a love of travel photography and candid street/family photography. You can see more of Andy’s work on his website and follow him on Instagram, Facebook, and Twitter. This article was also published here and shared with permission.

Filed Under:

Tagged With:

Find this interesting? Share it with your friends!

DIPY Icon

We love it when our readers get in touch with us to share their stories. This article was contributed to DIYP by a member of our community. If you would like to contribute an article, please contact us here.

Join the Discussion

DIYP Comment Policy
Be nice, be on-topic, no personal information or flames.

Leave a Reply

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

6 responses to “How to properly resize and optimise your images for the web”

  1. Calara Ionut Avatar
    Calara Ionut

    This is a great article, with useful technical details. Regarding the pixel dimensions, I think 2000px is good value, but I generally use the biggest container I have on the site where I would be putting content. If we take this website as an example, the biggest image size should not be more than 746×2 (x2 to account for retina)

    1. Andy Smith-Dane Avatar
      Andy Smith-Dane

      Yeah I should do that really with the container, but I often move images around and I find by stickint to 2000px I can use the images anywhere I like.

      I don’t tend to worry too much about retina displays as most of my clients don’t have one :)

      1. Calara Ionut Avatar
        Calara Ionut

        That’s a good point, I generally do that for customers I build websites for, and they don’t move images around.

  2. Hasibur Joy Avatar
    Hasibur Joy

    Hi Andy, I will suggest in this case, the mass image compressor software is very effective for compressing images. I have benefited a lot from using that software while creating my website. I think it would be nice if you could mention this on your blog. Thank You.

  3. Mark Schoenfelt Avatar
    Mark Schoenfelt

    So I have a slide show that is at the top of several of my website’s pages. Do I optimize the size for the square shape that displays in the slide or do I leave it at as is since if you click on the slide it displays the whole picture? My website is here so you can see what I’m talking about… http://www.markschoenfelt.com/ i really need to get my file sizes down since the speed tanked my google local search results.

    1. Andy Smith-Dane Avatar
      Andy Smith-Dane

      The biggest speed issue you have is WIX sadly, WIX isn’t highly optimised and if you look on GTMetrix you’ll see that there’s 161 external requests. (they call every image from their external parastorage domain).

      Sadly the best solution would be to move platform, your pages aren’t huge so there’s not much that optimising them would do