I have been constantly revising the resolution of the images I post online. Is 1080px too large and subject your pictures to increased risks of illegal appropriation and misuse? Is 480px too small to make an impression on your audience? Is there an optimal size for all use cases?
To begin, we have to talk about the issue of browser scaling. If a picture does not fit into the content column of your blog, the internet browser is going to scale it down. Browser scaling automatically makes your pictures ugly.
This is the number one thing to avoid. Check the maximum width of your website’s content column and make sure the resolution of you pictures fit into it. Some professional photo sharing sites such as Flickr actually generate copies of pictures you upload at multiple resolutions, then display the appropriate versions on different pages to optimize bandwidth and make your pictures look good. Not every website does this, especially not your own blog or website. 😉 So it pays to be aware of this yourself.
Having highlighted this point, it is trivial to conclude that unless your website uses a single column design, most pictures need to be less than or equal to 800px on its longest side, leaving sufficient space for at least one sidebar. Most desktop displays have a 1024px or 1080px horizontal resolution, and many websites are optimized to display between the 800px-1024px horizontal resolution. Sure we have a lot of displays which are more generous in resolution, but users will still be cranking up the browser’s display size because the words become too small to read. What about mobile displays? We don’t really worry as the mobile devices’ screens are so small that your pictures will still look good even though the mobile browser scales down your images. Plenty of things look good on a tiny screen. It is when they get big that all the imperfections and artifacts become noticeable.
Then there is the fact that pictures in portrait orientation can easily get cut off by the screen’s limited height – we have much less vertical resolution than horizontal resolution. Some sites get around this by using different resolutions for portrait and landscape oriented pictures. If you think “forget about that additional work”, then 700px on the longest side is a good choice. Whether in portrait or landscape orientation, 700px gives your pictures great visual impact while fitting into a content column and staying within the top and bottom borders of a desktop browser. Like the following:
Just to illustrate the effect of browser scaling, here is an image that is too wide for the content width of this website.
Thinks it looks good? Think again. Here is the same image, properly scaled to fit within the content width of this website.
You probably can’t see any difference on a small screen such as a mobile display. But to those of us using a desktop display, the difference in quality should be obvious. The effect of browser scaling gets more pronounced as the size of the original image gets larger. In the example above, the original image is 1024px wide scaled to a 800px content width. Image degradation is already showing up. Try this with an even larger image and you start wondering if there is something wrong with your photography skills or your website-hosting server. No it’s nothing complicated like that – just using pictures that are too large.
Of course you are free to reduce the size even further. o tune the resolution according to your specific needs. A photography-oriented website usually benefits by displaying large images. When you become a big-shot photographer you could probably post even smaller images. Your brand and reputation already speak for you and you don’t need big images to prove anything. For myself, I find 700px with a watermark to be a good balance between presentation and readability for my readers. Have fun!
(Prints of the images shared here are available for purchase here.)