Prepare images for upload

If you want to your site load quickly and have your images look their best, you’ll want to get in the habit of sizing and optimizing your images before you upload them to your site. Optimizing your images isn’t required when you have ProPhoto’s image downsizing feature turned on, but using optimized images can reduce the time it takes you to upload photos and reduces the space taken up on your web server.

Here are our recommendations for image sizing and optimization.

DPI notice

1) Image Dimensions

If you want a quick and dirty size recommendation that will work great in most ProPhoto setups, use a width of around 2500px. Compress the image as much as you can and you’ll likely be very happy. We’ve seen that you can consistently get under 400kb with good compression. Use your favorite image software to downsize images on your computer before uploading into your site. Research online about batch processing images in large groups for the image software you use.

Image width details

Because ProPhoto is a responsive theme, the available content width for image varies by browser size. Unlike a fixed-width site there isn’t a specific image size that is “best.”

To understand the image dimensions you will want to use you need to understand how WordPress and ProPhoto make sure that the best image version is served to the browser no matter the size of the browser window. When you upload and insert an image into a post or page WordPress and ProPhoto create a “set” of images (using the HTML srcset image attribute) from which to choose. Each web browser automatically determines which image fits best and downloads the best size. Up to five different image versions are created from the original uploaded image at these widths: 480px, 768px, 992px, 1200px, 1600px.

For example, if a 2500px image is uploaded, ProPhoto will have six versions of the image to choose from, the five downsized versions and the original. If your page is loaded and the image appears in a 1000px wide area (based on ProPhoto settings and window/display type), the 1200px wide image will be downloaded by the browser and adjusted to fit it into the 1000px wide space. If the page is opened full screen on a large monitor with room for a 1700px wide image, the full size 2500px image will be downloaded instead.

Since most desktop monitors are able to display a browser window larger the 1600px width, this means your original uploaded image will be used on large screens. This is why it is still important to optimize your photos before uploading – your upload time will be shorter for you, but all your visitors who use a larger screen will notice a much faster load time, too!

NOTE: WordPress plugins are available which can process your original image automatically when you upload them. (with or without resizing the original) You may want to investigate plugins for WordPress like Smush and others if you’d like WordPress to optimize all your existing uploaded images or images you upload in the future.

Carousel gallery sizing

The ProPhoto “carousel” gallery style has a fixed height so that images fit within a height constraint as visitors scroll through your gallery. A wider browser window simply makes it possible to see more images to the left and right of the current image. See our Carousel galleries example page to preview this. ProPhoto gallery styles allow you to change the carousel height for each screen width (desktop, laptop, tablet, and phone) and the fixed height nature makes it easy to control gallery image size.

Let’s say that the largest height setting in a particular carousel gallery style is 600px. When uploading images for this gallery the height of the images should be doubled to 1200px tall. Doubling the size allows high-density screens – which Apple devices call “Retina” screens – to use the extra pixels for the best image clarity. The width of images in carousel galleries isn’t important because this special gallery style is based on height.

What about high-density (and Apple Retina™) displays?

High pixel density displays like Apple’s Retina™ device screens can show more pixels-per-inch then standard displays. ProPhoto will automatically use the best size for these high density displays. When uploading images for high-density screen compatibility we suggest sensible limits. It is possible to upload images at 5120px wide to take complete advantage of a 27″ Apple iMac with 5K Retina™ but this size is excessive in most cases.

Remember:

Website visitors typically don’t display their web browser at full width on large desktop displays
The content area where images appear in a blog post is usually smaller than the window, with padding on left/right sides
1:1 pixel-per-pixel sizing isn’t needed for images to look excellent on high density displays
Smaller image resolution equals smaller file size, and faster loading time

As a general rule, try uploading photos at 3000px maximum width and view your site. Do the images look great? Avoid uploading full resolution images when a lower resolution is more than adequate.

2) Image File Size Optimization

File size is critical when dealing with images posted on the web. We’re not referring to the image pixel dimensions as discussed in tip #1 above, but the file storage an image requires. More data on a web page means longer loading time, and slower websites may lose the interest of your visitors.

Uploading and inserting full size images over 10MB in size right from your camera to your site are going to take much longer to upload and download than an optimized version. On a photography site with lots of images file size is a critical concern.

So, when editing your images be sure to get the file size as small as you can without losing too much of the quality. In our “Image Editing Software Tips” tutorial we provide further guidance on how to do this in Photoshop. Aim to keep your files below 500kb as a general rule, and if some images look splotchy when compressed this much, increasing the file size to achieve better appearance is okay.

3) Color Profile

The color profile of your images will affect how your actual image is rendered by a web browser. The sRGB IEC61966-2.1 color profile is in the RGB color space and is the standard for images on the web. Exporting your images with this color profile should allow them to display with the same coloration as when viewed in your photo editor. If your images are saved with a different color profile, such as “CMYK” or “Adobe RGB” or “ProPhoto RGB” (no relation) they may have an unexpected color shift.

The easiest way to ensure your images have the correct color profile is to use “Save for Web and Devices” (or whatever equivalent your editor has) when exporting your images on your computer.

4) Image downsizing module

ProPhoto allows you to choose between two image processing software tools on your web server: “GD” and “ImageMagick.” This option is in ProPhoto Settings > Site Settings area. Most servers offer both libraries. If possible choose ImageMagick for crisper, more color accurate downsized versions.