How many pixels per inch are best for web images? Dispel common misconceptions about image resolution for the web with this guide from Shutterstock.
“But wait,” we hear you scoff, “why wouldn’t image resolution matter for the web? Am I supposed to post jagged, fuzzy photos on my professional website and call it a day?”
Not so fast! Image quality for online photos, graphics, and icons is essential for providing a satisfactory user experience to anyone who visits your website. However, image resolution is a term that has more meaning in print than it does online. Let’s dive into the details of image resolution and determine what’s truly important for vivid imagery on the web.
What Is Image Resolution?
A term leftover from the printing industry, image resolution is the density of the dots or pixels that make up the image. Image resolution is, in other words, the amount of visual information an image contains. In this context, it makes perfect sense that you want your images to have as high of a resolution as possible, so they appear sharp, crisp, and vibrant.
We measure image resolution in DPI or PPI. In the print industry, image resolution is measured in dots per inch, or DPI. Translated to digital, image resolution is measured in pixels per inch, or PPI. You’ll often see these terms used interchangeably, but DPI is reserved for print while PPI is used for digital images. An image with a higher PPI tends to be of greater quality due to its pixel density.
But, if PPI seemingly has a connection to quality, why are we, the Shutterstock team, insisting that image resolution online isn’t a big deal? Let’s quickly detour to the long-forgotten past — the 1980s — and apply what we learned to the current state of image quality.
Standard Web Image Resolution
Historically, web designers considered 72 PPI the “standard” definition for images destined for the web. The rationale? You might hear that most screens automatically fit 72 pixels per inch. So, at this resolution, the image is as detailed as it can get. But the full story is more complicated.
When Apple released its first Macintosh computers in the ‘80s, they stuck to a nine-inch display with an image resolution of 72 PPI. This decision was practical — their ImageWriter printers printed images at 144 DPI, and this 2:1 ratio made scaling images painless and straightforward.
Display technology has advanced rapidly in the thirty-six years since the Macintosh was released, and now few computers have a display resolution of 72 PPI. When you export images from Photoshop and other image editing software, you might automatically set the image resolution at 72 PPI, after years of reinforcement. However, displays vary drastically in resolution.
If that’s the case, is there no standard? How do we ensure that our images display beautifully online, across all devices?
What Affects Image Display on the Web?
In terms of image resolution for the web, it’s better to think strictly in pixel dimensions and file size.
- Pixel Dimensions — This refers to how many pixels constitute your image, in length and width. For example, a square image measuring 360×360 pixels has 360 pixels in each row and 360 pixels in each column. If your computer’s display has a resolution of 72 PPI, this image would measure five inches on each side when displayed at full size on your monitor. That’s a pretty large image!
The larger the dimensions are for your image, the more professional your image will look. If the dimensions for a photograph are 2000×1500 pixels, the image will look terrific as a banner or as a small photo on the side of your website. However, if you use an image measuring 200×150 pixels, it’ll only look professional in its native, smaller size. Blowing this image up to use as a hero image will result in a grainy, sloppy look that no one who visits your website will appreciate.
- File Size — Your image quality will increase as your file size becomes larger and the amount of compression your image is subject to decreases. Your image file size is simply the number of bytes the image takes up on your computer or website. Your image’s dimensions will determine the file size, but the file type you use for your images will also be a significant factor. To decide between JPEGs, PNGs, or even GIFs, read our recommendations for the best image formats for the web.
When deciding what file type to use and the level of quality for your images, keep in mind that page speed decreases as the total file size increases. You want to choose the image quality that looks the best, while keeping each image file small and manageable. When your page is slow and full of glitches, the user experience suffers. Fifty-three percent of mobile users abandon web pages that take more than three seconds to load. Ramping up the file size may result in a better image, but it could negatively impact site performance.
When Image Resolution Matters
Image resolution may not be relevant in most digital applications, but in print, the image resolution is king. The DPI will drastically affect how an image prints and is of prime importance when exporting images from design and editing software, if you aren’t uploading the photos online.
In professional printing, your photos should have an image resolution of at least 300 DPI. The human eye can generally not differentiate images above 200 DPI, but it’s standard practice to use 300 DPI and above for optimal clarity. Always check the settings of your printer before choosing an image resolution for print. Many printers can’t handle resolutions above 300 DPI, and using such a setting may create strange visual artifacts.
For context: If you want to print a four inch by six inch image at 300 DPI, it should measure 1200×1800 pixels before printing. When shooting pictures with a camera, photographers should shoot at a higher resolution than what they will need for printing. Then they can sharpen and reduce the images in photo-editing software.
When editing images for print, it’s best to use TIFF or EPS file formats. These types of files are lossless, meaning you won’t compress or compromise the image when saving and reopening. However, these files are large and cumbersome.
Cover image via Who is Danny. Screen image via Galyna Andrushko.
Discover more tips on how to design your website with these articles:
- The Best Website-Ready Images to Launch Your Online Presence
- How to Design a Website: 10 Golden Rules for Beginners
- Simple Website Layout Design Tips Anyone Can Follow
- How to Resize Images for the Web Without Losing Quality
- A Practical Guide for Visual Website Design
The post Why You Don’t Need to Worry About Image Resolution for the Web appeared first on The Shutterstock Blog.