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 notice1) 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
Carousel gallery sizing
What about high-density (and Apple Retina™) displays?
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.