DIY Photography

Your one stop shop for everything photo-video

  • News
  • Inspiration
  • Reviews
  • Tutorials
  • DIY
  • Gear
Search

Submit A Story

How to properly resize and optimise your images for the web

May 6, 2020 by Andy Dane 6 Comments

  • Share
  • Tweet
  • Flipboard
  • WhatsApp

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.

FIND THIS INTERESTING? SHARE IT WITH YOUR FRIENDS!

  • Share
  • Tweet
  • Flipboard
  • WhatsApp

Related posts:

How to Resize Images for Print in Photoshop How to optimise your camera settings for street photography to get the best exposure How to optimise your night time street photography How to properly set up a light stand

Filed Under: Tutorials Tagged With: Andy Dane, lightroom, Web Images

Guest Author: from diyphotography.net

About Guest Author

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.

« Five steps to evaluate your work and learn from your old photos
This gorgeous Olympus OM-1 replica is made entirely from Lego »

Submit A Story

Get our FREE Lighting Book

DIYP lighting book cover

* download requires newsletter signup

Recent Comments

Free Resources

Advanced lighting book

Learn photography

Recent Posts

  • This is why you should stop shooting music videos
  • First look at the Laowa Proteus Flex interchangeable flare optics
  • The Fotodiox RhinoCam Vertex shoots medium format images on L mount cameras
  • San Francisco filmmaker tracks stolen camera gear, police do nothing
  • Nanlite announces powerful AC-powered FC500B and FC300B LED lights

Udi Tirosh: from diyphotography.netUdi Tirosh is an entrepreneur, photography inventor, journalist, educator, and writer based in Israel. With over 25 years of experience in the photo-video industry, Udi has built and sold several photography-related brands. Udi has a double degree in mass media communications and computer science.

Alex Baker: from diyphotography.netAlex Baker is a portrait and lifestyle driven photographer based in Valencia, Spain. She works on a range of projects from commercial to fine art and has had work featured in publications such as The Daily Mail, Conde Nast Traveller and El Mundo, and has exhibited work across Europe

David Williams: from diyphotography.netDave Williams is an accomplished travel photographer, writer, and best-selling author from the UK. He is also a photography educator and published Aurora expert. Dave has traveled extensively in recent years, capturing stunning images from around the world in a modified van. His work has been featured in various publications and he has worked with notable brands such as Skoda, EE, Boeing, Huawei, Microsoft, BMW, Conde Nast, Electronic Arts, Discovery, BBC, The Guardian, ESPN, NBC, and many others.

John Aldred: from diyphotography.netJohn Aldred is a photographer with over 20 years of experience in the portrait and commercial worlds. He is based in Scotland and has been an early adopter - and occasional beta tester - of almost every digital imaging technology in that time. As well as his creative visual work, John uses 3D printing, electronics and programming to create his own photography and filmmaking tools and consults for a number of brands across the industry.

Dunja Djudjic: from diyphotography.netDunja Djudjic is a multi-talented artist based in Novi Sad, Serbia. With 15 years of experience as a photographer, she specializes in capturing the beauty of nature, travel, and fine art. In addition to her photography, Dunja also expresses her creativity through writing, embroidery, and jewelry making.

Copyright © DIYPhotography 2006 - 2023 | About | Contact | Advertise | Write for DIYP | Full Disclosure | Privacy Policy