The images on Scaler sites are viewable at many different sizes. The end-user’s screen size and the size of the browser on the screen will determine how large your images appear to that particular user - it will scale to maximize the available browser size. Therefore, there is no one specific image size like there was before. The key is to understand the range of sizes that are most common and plan for your images to look as good as possible in that range.
As a baseline, we looked at the range of screen sizes found on the most commonly used Apple products - from the 13” MacBook Pro (1280 x 800 pixels), up to the 27” iMac and LED Display (2560 x 1440 pixels) - quite a large range.
We also looked at the screen resolution statistics in our servers’ log files. We see a lot of usage in that full range, but the really sweet spot (in common product terms) is from the 13” MacBook Pro resolution (1280 x 800 pixels) to the common 24” LCD/LED monitor resolution (1920 x 1200 pixels). That range accounts for almost 70% of the screens looking at our sites. Maximizing for that range right now is a really good idea.
But dimensions in pixels is only part of the equation. File size in kilobytes is still very important in determining the perceived performance of your site. While many people have super fast cable and DSL internet connections these days, you still don’t want your files to take too long to download.
As it was before with fixed image sizes:
You are always playing an image quality vs. site performance balancing game.
It’s a simple concept: Large files look better, but large files take longer to download. You need to find the right balance for you and your images. Ultimately, there is some compromising to be done on most images, losing a bit of quality, or being okay with an image taking an extra few seconds to download.
UPDATE: Final Image Sizing Guidelines for Scaler
We have decided to give you a recommended target image size range instead of one fixed size.
(Please note! Images should never exceed 2880 x 2880 px in size on your Scaler site.)
To err on the side of higher quality at the cost of speed, size your images to the following:
Image dimensions: 1800 x 1200 pixels
File size target: 300 - 600 kb
To err on the side of speed, possibly at the cost of a little perceived quality, size your images to the following:
Image dimensions: 1500 x 1000 pixels
File size target: 250 - 400 kb
And feel free to use any size in between or outside the recommended bounds if you know you will get the results you want.
Vertical (portrait) images - stand-alone, and diptych members - should be based on the height dimension: 1200 or 1000 pixels from above. A 2:3 ratio vertical would then be 800 x 1200 or 667 x 1000 pixels, respectively.
If you know for a fact that most of your important customers will be viewing your images nearly full-screen on 27” or 30” screens, then you might want to plan for 1800x1200 pixel sized images, but those files will be quite a bit larger, probably in the 350 - 600kb range, and therefore your site will appear to load a bit more slowly.
Being that most of our customers are professional photographers, it’s likely that many will have 27” or 30” screens themselves. It will be very tempting for you all to want to see your own images look tack-sharp at full-screen on your big 30” screen. But remember that your customers probably don’t have screens that large. What they will care more about is how long they have to wait to see your images. Therefore we highly recommend that you (just slightly) prioritize file size over image quality, and aim for the screen sizes they have, not necessarily the one you have.
A Note About Aspect Ratio
You may have already noticed that the aspect ratio of the guideline is 3:2. It turns our that on all of our new Scaler sites, the image area aspect ratio is going to be 3:2 to match the most common 35mm digital DSLR image aspect ratio. Now you can fill the image area edge-to-edge without cropping most images.
Custom design website customers who shoot different aspect ratios, such as 645 (4:3), 6x6 (1:1), 6x7 (7:6) or 4x5/8x10 (5:4), can request that our designers design to that ratio instead, but the vast majority of customers will be very happy with the 3:2 ratio (36x24mm).
A Note for Advanced Users
For those customers that have a good handle on image sizing in their preferred software, and who really want to maximize their site’s performance and their image quality, here is a new concept that Scaler introduces: every image can be sized differently. They don’t all have to 1800x1200 or 1500x1000 pixels.
Just like some images lend better to lower JPG quality settings than do others (lots of uniformly blue sky vs. a detailed city skyline, for example), some images are better at scaling up and down than others because of the nature of the image content and composition. By minimizing the file size of the images that can be minimized, you buy yourself the latitude to allow the file size to creep upwards on those files for which you want a little extra detail quality without decreasing the net performance of your website.