What is best size and quality for uploaded photos?
That is a question we get asked a lot, and the answer depends on a few factors and compromises. You want your website photos looking great, but you don't want slow-loading images. With increasing internet speeds and displays reaching 5K resolution, there is room for higher quality images in photo gallery websites when optimized properly [see sample gallery]. In this post, I will recommend image size and quality settings based on the following assumptions:
- Images optimized for full screen display on click [popup], without blocking page load.
- The vast majority of your website visitors are on fast internet connections.
- Your website's main purpose is to showcase photography, and your visitors are aware of this.
The importance of optimization
Although you are targeting high-quality images, it's still important to optimize images for the web. Large file size may affect slow internet connections, while excessive dimensions may affect performance, since all those pixels need to render on screen. Optimal quality and resize dimensions will produce high-quality images at reasonable file sizes.
For those who don't want to read all the details, you can preview my recommendations below.
65 - 75% / compression
2048 - 2880 px / long side
The most important aspect of optimization, is to compress your images sufficiently. Reducing the "quality" setting slightly, will reduce file size significantly. Large images will compress especially well, and since they mostly scale down to fit on screen, it becomes difficult to detect any visual loss of quality. At 65 - 75% quality, you will strike a great balance between file size and visual quality.
The "sweet spot" for optimal file size may lie somewhere around quality level 70%.
Quality vs Compression
When saving images with the "quality" setting, you are essentially setting the level of compression. High "quality" results in low compression and a large file size, while lower "quality" results in high compression and a smaller file size. A lower "quality" does not mean your image will be low quality.
exampleQuality 95% vs 70%
Below you will find two images at 2560 px. The left image is compressed at 95% quality, resulting in a 414 kb file size, while the right image is compressed at 70% quality, resulting in a 151 kb file size. That's a massive 3x difference in file size. Can you easily see any difference?
As you can see, it's important to apply proper compression when saving images for the web. When reducing the "quality" setting slightly, you can instead increase image resize dimensions. If you are paranoid about lowering the "quality" setting, you can still output reasonable file size at quality levels up to 85%, but from there on, file size increases exponentially.
For those who don't already have their own workflow for saving images for the web, check these free apps. Even if you already use another app, I recommend uploading a few already-compressed images to kraken.io in "lossless" mode, just to see if your image files can be further optimized.
- ImageOptim Mac
My personal favorite. Powerful compression capabilities and simple to use more
Set quality level or disable "lossy" minification.
Add your images and go!
- Kraken.io Web
Powerful web app with simple interface which allows you to upload and compress images.
- Image Resizer Windows
A simple but effective application for windows that can resize and compress images.
Resize Dimensions2560 px
You can easily upload larger image sizes, as long as you apply sufficient compression. The advantage is that large images will look great on high-resolution screens, and signs of compression will be obscured when images scale down to fit most screens.
What image size should we target?
We should probably target image resize dimensions that match modern high-resolution screens. This could range from 1920 x 1280 desktop monitors to 15" Macbook retina screens at 2880 x 1800. Even modern mobile devices like iPhone 11 have 2436 x 1125 screen resolutions. With this in mind, it makes sense to target generous resize dimensions somewhere between 2048 and 2880 px.
exampleOptimal 2560 vs 4096 px
Two images compressed at 70% quality, with left image resized to 2560 px (377 kb) and right image resized to 4096 px (866 kb). Although a tiny amount of visitors on 4K+ screens may benefit from the 4096 px image, this minority does not justify the 230% increase in file size. Images at 2560 px will satisfy 99% (or more) of all screen sizes, and will still look great on 4K+ screens.
Should I always resize "long side" of the image?
When resizing based on "long side", your vertical images will often be taller than required, even for high-res wide screens. However, with vertical mobile- and tablet screens inching towards 3000 px, it seems pointless to assume high-res screens are always horizontal. For consistent and future-proof image sizes, it's best to resize your images based on the "long side" of the image.
How about retina and HiDPI screens?
Regardless of the physical size, many modern screens have a high "pixel density". For example, Macbook 13" retina has a screen resolution of 2560 x 1600, but will display "like" 1280 x 800. Since the density of pixels is double however, it will support image dimensions that match the screens actual pixel resolution.
What about photo zoom levels?
It's unrealistic to aim for meaningful zoom levels for images optimized for the web. You should target image dimensions that allow images to display at full screen size, for most screen resolutions. Additional zoom levels would require unnecessarily large images with excessive file sizes, which is not beneficial for most visitors.
How will large images affect small screens?
Images should get served at sizes that satisfy the screen resolution with some margin. It's pointless to load a 2560 px image into a screen that is only capable of 1280 px. X3 already serves downsized images when appropriate.
File size200 - 700 kb
File size becomes arbitrary, because compression amount depends on the level of detail, contrast and color in each photo. Some files will simply be larger than others, and it's pointless trying to target the same file size for all photos. You should however be able to target file sizes around 300 kb for average photos, spiking as high as 800 kb or as low as 100kb.
exampleLow detail vs high detail
Two images 2560 px with quality 70%. Because of the repetitive background and low average level of detail, the image on the left compresses extremely well at 89 kb. The image on the right however, outputs a much larger 535 kb because of the high level of detail and color.
Should I adjust quality to achieve a certain file size?
In some cases, you may want to reduce quality slightly for high-detail photos, to achieve acceptable file size. In most cases however, this is not necessary. Just because some photos are rich in detail, would you want these photos to display at lower visual quality?
In conclusion, it seems optimal to increase image dimensions as long as you apply sufficient compression. Images resized to 2560 px at 70% quality, will satisfy modern high-resolution screens, while outputting acceptable file sizes averaging 300 kb.
65 - 75% / compression
2048 - 2880 px / long side
Should I remove image meta data when compressing?
Tests show that there is almost no difference when removing IPTC and EXIF meta data from large images. At the most 1 kb. Besides, you may need this info on the website? Keep it.
What about the webp image format?
Some of you may have heard of the webp image format from Google, and are wondering how this performs vs JPG. Tests show that the webp format has minimal benefit when it comes to photographic images. Besides, webp is not yet supported in many browsers. The main advantage of the webp format, is how it outperforms GIF and PNG for graphic style images.
Is DPI and PPI relevant?
Both DPI and PPI are irrelevant for images displaying on screens, which will always use the physical pixel dimensions of each image. You should perhaps set 72 dpi/ppi for images exported for the web, but it does not make any difference. Read more at photographylife.com/dpi-vs-ppi.
Can the X3 uploader resize and compress images?
The X3 uploader is capable of resizing and compressing images on upload. This is practical and offers acceptable resize and compression capabilities. Since it runs from the browser however, it is not quite as powerful as the compression apps mentioned earlier in this post. If you require custom control, you should resize and compress your images before uploading.
Will slow-loading images affect SEO?
Page speed is a factor used by Google to rank pages, and since a page may contain images, slow-loading images will contribute to the effect. However, when your large photos only load and appear on click, they will have no affect on the page load speed. If you are embedding large images directly into the page, it is increasingly critical that these images are optimized appropriately.
I have uploaded a variety of images resized to 2560 px (long side) and compressed at 70% quality. I think you will find that most of the images strike a good balance between file size and visual quality, also on high resolution screens. You may also notice that any signs of compression are obscured when images scale down in browser?