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, but problems can arise if you don’t. Here are our recommendations for image sizing and optimization.
1) Image Dimensions
If you want a quick and dirty size recommendation that will work great in most ProPhoto setups, use a width 2000px. 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. Some get far below that. Because of this we recommend this width in our “Recommended Image Size” box when creating new posts and pages. Use your favorite image software to downsize images on your computer before uploading into ProPhoto. Read about batch processing images in large groups to save time – just search online for tips, based on the software you use.
Image width details
Carousel gallery sizing
What about Retina displays?
2) Image File Size Optimization
File size is critical when dealing with images posted on the web. This is not an image’s actual pixel dimensions, as discussed in tip #1 above, but the actual storage an image file requires. More data on a web page means longer loading time, and this can even affect your search ranking. While you can upload and insert full size images right from your camera to your site, those 10MB files are going to take much longer to load on your site than an optimized version of that same image that is, say, 300kB. And on a photography site with lots of images, you can see how this file size issue becomes critical.
So, when editing your images, you’ll want to try get that file size as small as you can, without losing too much of the quality of your original image. In our “Image Editing Software Tips” tutorial, we give some further guidance on how to do this in Photoshop. While there isn’t a hard-and-fast rule for image file size, we recommend trying to keep your images in the 300-500kb range, or less. If some of your images end up over this, it’s not the end of the world. Just try and keep as many of your images as trim and tight as possible.
3) Color Profile
The color profile of your images will affect how your actual image is rendered by a web browser. Generally, web browsers work in the “sRGB” color profile, which is in the RGB color space. So if you save your image with this color profile, they should 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 won’t render as true. This color degradation is exacerbated by the downsizing process used for serving responsive images. The easiest way to ensure they have the correct color profile is to use “Save for Web and Devices” (or whatever equivalent your editor has) when saving your images in your editor.
4) Image downsizing module
ProPhoto allows you to choose between two server image libraries for the creation of downsized images, “GD” and “ImageMagick.” This option is in “ProPhoto > Settings > Site Settings > Misc”. Most servers offer both libraries. If possible choose ImageMagick. It will result in crisper, more color accurate downsized versions.