One of the great things about the ProPhoto platform is that image optimization is built directly into our hosting platform. So whenever you upload an image, a compressed version of the image is automatically created and used, which helps with site speed and saves on server space. However, the compression savings is still dependent on the size of the original image uploaded. Therefore, you'll want to get in the habit of sizing and optimizing your images before you upload them to your site.
For example, if you upload a 3mb image to your site, after compression it may end up around 700kb. But, if you optimize the image yourself and upload at 500kb, after compression it may end up around 150kb. As you can see, over lots of uploaded images, the savings are massive if you optimize beforehand.
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 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 200-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 creates 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.
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. 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 2500px 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. 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.
Comments
0 comments
Article is closed for comments.