ProPhoto is an amazing software for the WordPress platform optimized for Photographers and creatives that want their website images to stand out in high quality. Our ProPhoto clients often ask us, “what size should my website images be?”
This post outlines what image sizes to use in the ProPhoto platform to ensures your images display at high quality while optimizing your site for speed and performance.
It’s true, ProPhoto can handle large images sizes and will deliver the best file size based on the screen display. Read more about how ProPhoto handles image sizes.
So does it really matter what images size you use?
The short answer is YES, if you care about the longevity of your website you should care very much about what image sizes you are uploading.
Myths about images sizes online
First, let’s review some common myths we often hear about image sizes.
Uploading images at higher DPI increases my image quality online
FALSE: DPI settings do not effect the way an image is displayed on a digital screen. Rather, online image quality is controlled by pixels (length and width) of the image.
I need to upload my images as large as possible for retina screens
FALSE: Bigger is not always better. Retina screens display more PPI (pixels per inch) but even retina screens have limits. Images only needs to be 2x the image size of a normal screen. For example, an image at 800 pixels should be a maximum 1600 pixels for a retina screen.
I need to optimize and size my images so they load quickly
TRUE: The ProPhoto platform will optimize how images are displayed given the screen size (this is an awesome feature) but if you want your website to load quickly and efficiently in the long term, you must correctly size your images before uploading. Read more about ProPhoto’s sizing features and capabilities.
The files size of my image doesn’t matter
FALSE: Large file sizes mean slow server response and slow load times. Image file size should be less than 400kb. Use image compression tools to reduce file size prior to upload. Your goal is to find a balance between image pixel size and image file size.
The golden rule: upload images at 2000 pixels on the longest edge
The quick answer is you should aim to upload all your images at 2000 pixels on the longest edge.
This image size will work for most web uses and screen sizes, including retina displays. Any images uploaded larger than this has minimal added benefit to the viewing experience and can significantly slow down your website.
How we calculate our image size
Our recommended images size is based on real data and mathematical weighted average calculations. To find the “golden rule” image size we take the most commonly used screen sizes (worldwide) and average all the screen sizes with a weighted value to adjust for the screen’s overall popularity of uses.
The result of calculating a weighted average of all screen sizes and their associated popularity of use is 1999.92906354. Rounding this number up leads to the “golden rule” recommendation of 2000 pixels at the longest edge. Remember this recommendation accommodates for retina screen sizes already.
Source: StatCounter Global Stats – Screen Resolution Market Share
Exceptions to the “golden rule”
Like any standard there are always exceptions to the rule. Outlined below are common circumstances when it is okay to upload images larger than 2000 pixels on the longest edge.
Portfolio or gallery images
Most often, gallery images are viewed by visitors at enlarged sizes that span the entire screen size. To ensure that the visitor experiences these images at the best quality, upload your gallery images between 2000-3000 pixels on the longest edge.
Keep in mind your goal is still to keep file size below 400kb. Use compression tools to keep your file size within the 2000-3000 pixel range AND under a file size of 400kb.
Banner or header images
Similar to gallery images, banner images span from edge to edge and are displayed at larger sizes. For this reason it is okay to increase the image size up to 3000 pixels on the longest edge.
Keep in mind, Google prefers when the images above the fold of your page loads quickly so if your image take too long to load Google may rate your page slower than you would like. Consider using compression to reduce the image file size (below 400kb) for a quicker page load time.
What about ProPhoto’s retina option?
When using the ProPhoto graphic module, images are displayed at 100% width. If you want to improve how the image is displayed on a retina screen you can select the constrain to 1/2 width option.
When selecting the constrain to 1/2 width option, ProPhoto reduces the image by half (50%) so that the image appearance is optimized for a retina screen display.
The constrain to 1/2 width option is the equivalent of uploading your image at 2000 pixels when the screen size is only 1000 pixels wide. You are simply uploading a larger image than needed and ProPhoto is optimizing the image size so that is looks good on normal screens and retina devices.
Example of ProPhoto’s “constraint to 1/2 width“option
In this example we have 4 logo images we want to display. The image size of the logos are not large. The actual size of The Knot logo image is only 148 × 76.
This is an example of the logo WITHOUT the retina option checked. The images are not at their highest possible quality but are displaying at a preferred size.
.png)
Below is an example of what happens when we check the retina option. You can see the image quality is increased but the image size is extremely small because ProPhoto reduced the displayed image size to 74×38 (50% of the original image size).
.png)
When not to use the ProPhoto “constraint to 1/2 width” option
Best practice is to always upload images 2x the actual size you want. Using the example from above, if we wanted the image to display at 148×76 then we should upload an image that is 296×152 and check the “constrain to 1/2 width” option. This practice will lead to the highest display quality.
However, there are circumstance when using the “constraint to 1/2 width” option is not viable. The above example is such reason; it’s not always possible to source an image 2x the size of your goal display size.
If you can’t get a larger image to upload to your website then do not check the ProPhoto retina option “constraint to 1/2 width.”
For those that skipped to the end (no shame, we do it too)
If you need a quick and easy standard for uploading your images to your ProPhoto website then aim for 2000 pixels on the longest edge.
Our recommendation is based on weighted average calculations using real screen sizes and usage data.
There are two common exceptions to this standard: portfolio images and banner image. In both exceptions it’s okay to upload images up to 3000 pixels on the longest edge IF the image file size remains less than 400kb.
If retina quality is very important to you, considering using ProPhoto’s retina options for graphic modules to further optimize how your images are displayed on your website.
Does this all really matter?
Yes, if you want your site to load quickly and maintain long-term server optimization than you must properly size your images before uploading to your ProPhoto website.
.jpg)
