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
Typically, when we size and optimize our images for our site we have certain standards we go by. For blog post images or most design images, we go by this standard for each theme we use.
The dimensions below are what we use for ProPhoto themes.
Horizontals: 2000px by 1333px at 72DPI
Verticals: 1000px by 1500px at 72DPI – or – 667 x 1000px at 72DPI
For Showit you can upload a little larger images by their recommendations.
Horizontals: 2500px by 1667px at 72DPI
Verticals: 1500px by 1000px at 72DPI
In Photoshop we typically save at quality level 6-8, and in Lightroom anywhere from 60-70% depending on how the image looks.
Why the odd sizes? Because they’re standard ratio sizes. Horizontals are almost a full 3:2 and verticals are 2:3. No matter how you crop your images, we always recommend cropping with a standard print ratio for a few reasons.
- When you upload images to galleries, depending on the sizes, if they’re all different, then the gallery may load strangely or worse, try to upscale or downscale your image to fit the height and width. Being consistent with sizes will help prevent that from happening.
- Being consistent with your sizes makes your site look more professional by being thorough and unified.
- A 27″ iMac browser screen size is 2560px wide. So if you’re uploading images larger than that you’re basically just slowing your site down. At 2000px your images look good at that size but still optimized. The other point here is that typically only creatives are going to have such large-sized screens. Your average client won’t have such large displays or high-end computers. It’s important to keep in mind you should optimize your site according to your market.
4. The goal for optimizing your images is to improve site load times. Images should typically be around 2-400Kb, or less if possible.
What about DPI? I save mine at 300!
Well, that’s totally fine! 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. The difference is that if someone were to grab an image from your website, a 300 DPI image can be printed at pretty large sizes vs a 72DPI image. So we recommend saving at 72.
Did you know if you remove all the metadata (EXIF data) from your photo you actually save a ton 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 apps
For years we’ve been using JPEGmini Pro. A standalone app you can drag and drop your saved images into to reduce file sizes. If you pulled a full res image without saving as a smaller image first, then the file sizes would remain pretty significant.
We’ve found using TinyPNG’s website was having better results than JPEGmini. A few months ago, we went ahead and purchased the Photoshop plugin and have been using that ever since. It does a much better job of keeping the quality while reducing the overall size. Occasionally we would still drop the images into JPEGmini if they were overly broad, but that’s rare. If you decide to go this route, make sure to look at the help section on how to do bulk exporting.
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 options saving without sacrificing quality. It can also auto-size images from your entire library. It does a good job, but you’ll definitely find some images that are optimized too much. Fortunately, it lets you upload single images without any optimization if you wish, so it was easy just to replace the handful that didn’t look so great.
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 to these extremes?
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. For Photographers that metric is a little different because typically photography sites keep visitors longer than the average site does, but reducing your site’s load time should help.
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.