We get this question a lot! “What size images do I need to upload to my website?” We wanted to clear up some confusion and explain exactly what we do for websites. Optimizing your images for your new website has never been so easy!

We’ve been trying a lot of methods over the years to get the best optimization without sacrificing quality. Fortunately, there are a few options you can try out there!

Standard Image Sizes

The dimensions below are what we use for website image optimization.

Horizontals: 2500px on the long side at 72 DPI.
Verticals: 1000 to 1500px on the long side at 72 DPI.

In Photoshop we typically save at quality level 6-8, and in Lightroom anywhere from 60-70% depending on how the image looks.

Your goal for image file sizes should be 400KB or less, and the less you can go the faster your website will load!

Use standard crop ratios for website images

There are many advantages of using standard crop ratios.

In photography, ratios are measured in inches: 4×6, 5×7, and 8×10. We usually always crop to a 4×6.

In web design, you may use ratios like 1:1 (Square) 3:2 (Rectangle), or 16:9 (Wide)

1. Some galleries don’t handle lots of images with different crop ratios well. You may see unintentional cropping, galleries that size to extremes for each image to compensate, or bad mobile gallery experiences.
   
2. Being consistent with your sizes makes your site look more professional by being thorough and unified. Always try to use the same ratio.
   
3. A standard 2K pixel ratio in a 27″ browser screen at full size is 2560px wide (16:9). Only 4k TVs and monitors support anything higher, and the average user isn’t viewing your desktop site on a 27″ monitor screen or a tv. So it’s not worth it to upload images larger than 2500px wide.

What about DPI (Dots Per Inch)?

72 DPI is standard for web images, and 300 DPI Is standard for printing. The actual file size of the image won’t change no matter which option you choose and the quality difference on a screen can’t be seen.

The difference is that if someone were to steal or snag an image from your website, a 300 DPI image can be printed at full sizes at good quality vs a 72DPI image that won’t have enough resolution to be printed large. So we recommend saving at 72 for web images.

Meta Data

Did you know if you remove all the metadata (EXIF data) from your photo you actually save on the file size? You’re probably saying, no way on this one because the metadata keeps your copyright information embedded in the photo! In Adobe Lightroom when exporting images you can actually choose to only embed the copyright information and strip all the remaining info. This actually reduces the file size by a good chunk depending on how much data your camera is adding to your images!

Image optimization using web apps

TinyPNG’s website has been shown to give better results than others we’ve tried over the years. We purchased the photoshop plugin add-on, though they do say that it’s even better optimization using the website than the Photoshop extension because it uses a different algorithm. Typically you can save more by using this option without losing any more quality. I recommend buying the Pro plan service.

Image optimization in WordPress

We’ve tried a few of the image optimization plugins with varying results. So far from our testing, we prefer Shortpixel. Which offers a larger array of option savings without sacrificing quality. It can also auto-size images from your entire library or just ones you select.

Before using ShortPixel, usually, we would optimize with one of the options above, and Shortpixel would do it again when we upload through the site. Doing both of these methods gave us the best results when speed testing our sites.

Why optimize so much?

We use a combination of everything we listed here to get the best sizes, so why the overkill? Because it’s been proven that even just a single second (yes a second) can mean the difference in 2-10% or higher sales on your website.

Sources on speed metrics: CloudFlare, HubSpot

There you have it, we’ve just shared our exact process for optimizing images for websites. Results vary depending on the image and website, but absolutely doing any of these methods should help you in some way if you’ve been adding full-resolution images to your website.