CYBER MONDAY IS HERE! ENJOY 40% OFF UNTIL MIDNIGHT TONIGHT

Optimizing images for your WordPress or Showit site

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!

optimizing images for you new website

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 on the long side at 72 DPI.
Verticals: 1000 to 1500px on the long side at 72 DPI.

For Showit you can upload a little larger images by their recommendations.

Horizontals: 2500px on the long side at 72 DPI.
Verticals: 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 less is definitely better for web images!

Crop Ratios in web design

Here are the main reasons you should be cropping at standard crop ratios for web images.

  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 or bad mobile gallery experiences.
  2. Being consistent with your sizes makes your site look more professional by being thorough and unified.
  3. A 27″ 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.

What about DPI (Dots Per Inch)? 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.

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 apps

JPEG Mini Image Optimizer.

JPEGmini Pro is a great option to use for a one-time price. A standalone app you can drag and drop your saved images into to reduce file sizes. We’ve used this option for years and found that it works really well for our needs.

TinyPNG Image Optimizer.

TinyPNG’s website has been shown to give better results than JPEGmini. We purchased the photoshop plugin add-on for this service, though they do say that it’s even better optimization with just using the website because it uses a different method of optimization. Typically you can save more by using this option without losing any more quality.

Image optimization in WordPress

Short Pixel Image Optimizer for WordPress.

NOTE – 1.1.2022 ProPhoto now includes a PRO Image optimization plugin included with their new subscriptions that do it for you. So you don’t have to do any of the above app or WordPress image optimizations after you resize your images.

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.

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.

Comment

Your email is never published or shared. Required fields are marked *

Subscribe

Subscribe to our newsletter and get discounts, freebies, and more.