If you’ve had even the most cursory conversation with anyone from our team over the last several years, you’ll know that image quality is of paramount importance to us — the biggest priority we have is ensuring your images look their best online. But when it comes to examining image quality, there are some factors that come into play that can skew one’s impression of an image or set of images.
Item 1 – Bitmap Files
Bitmap files are pixel-based image files (unlike Vector files, which are not pixel-based), they are made up of individual squares of color that become more and more visible as you zoom in.
This becomes most apparent and most important when you’re viewing your images. Jpeg files can be displayed smaller than their actual size and larger than their actual size, but viewing a Jpeg file at any size other than 100% will skew your perception of the sharpness or quality of the image.
Item 2 – Resolution
The RAW photos that come out of your camera do not have a fixed resolution. The resolution is assigned to the file when you export them from Lightroom (or similar). Most print labs require a resolution of 240-350 dpi (dots per inch) for printing, so it is common to export your photos with a resolution setting in that range.
When you share or view photos on an electronic device, however, the resolution is much lower than that. Historically 72dpi has been the norm, but advances in monitor technology has increased that number in the last several years. The truth, in fact, is that resolution does not register on the internet, and pixel count – not pixel density – is the only factor that is considered.
Since electronic monitors have lower resolution than printers do, your photos will display their best at a much smaller size than your original capture. This means that your 6,000 pixel-wide image won’t display its best online at full size. You’ll want to size it down to, say, 1800px wide for the web.
When comparing a print-ready image with a web-ready image, keep in mind that the web-ready image likely has 1/6 to 1/10 the number of overall pixels that the print-ready image has, so optimal viewing conditions will differ for the two images.
Item 3 – How you view your images
As important as any other element in examining image quality is how you’re viewing your images. It is imperative to asses the quality of an image at a 100% view and not zoomed in any further than that. Any bitmap file zoomed in to 200/300/400% will look bad, with the square outlines of the individual pixels beginning to become apparent. This can make your image look soft (out of focus) or as if the file is degraded (some say “pixelated”). File degradation is a big deal, but often people assume degradation when the real issue is the zoom factor at which they’re viewing. This gets more complicated when your computer monitor and viewing software are lying to you. Read below…
Item 4 – Retina and UHD/HiDPI monitors
To make all this even more confusing, monitor manufacturers have decided to confuse the issue of image size representation by creating new rules and terminology. And many photo-viewing software tools have been slow to adapt.
A Retina screen has 4x the number of pixels compared to a traditional screen. This presents sizing issues because photos would look very small on a Retina screen if displayed at their actual size.
To combat this, Mac OS will by default scale images to a bigger size (in lots of apps, web browsers, Preview, PhotoViewer, etc) equating a 2px by 2px grid to one “screen pixel”. This is a big problem when you’re looking at a web-ready image. You’ve downsized your high-resolution image for the web, then your monitor and operating system are scaling it up again – this will make images look pixelated.
As evidence of this, try this little experiment. If you’re on a Mac with a Retina display, take a screen shot of your desktop using SHFT+CMND+4 and drag a rectangle that is 500px wide by 500px tall (the dimension will be shown to you where your cursor is). Once the screen shot is saved to your desktop, right-click it and select “Get Info” and you’ll see that the screenshot has a dimension of 1000px by 1000px. What?!? Even Apple can’t decide how to indicate what a ‘pixel’ is. Crazy…
Using the Preview app is confusing because the default behavior will display image scaled to 200% – making it look not-so-nice.
If you view the smaller web-ready images in (current versions of) Photoshop at 100% you will like see them appear smaller than you are used to (but not pixelated). The size shown in PS will be shown at actual size without scaling. This is also the size you’ll see in Storytailor’s preview (unless otherwise indicated).
The web has similar issues, because many websites and blogging platforms don’t account for the higher pixel density of Retina monitors, so they use sizing based on the 2×2-pixels-equal-one-pixel maths.
So you can’t trust your software or your operating system – What are you to do?
As time goes by and software companies catch up to these image viewing issues on UHD/HiDPI and Retina displays, they will build in smarts that will help combat or alleviate the issues altogether. In the meantime, your best defense is to recognize what you’re seeing when you’re seeing it, and make the best decisions possible in resizing your images for use online.
If you have images you’d like for us to take a look at with you, please feel free to contact our image experts will have a look and talk things through with you.