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!
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!
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)
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.
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!
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.
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.
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.