My previous blog posted focused on developing images for print. This post will examine the techniques for effective online images. Again, Gabriela Martinez from Texto is the source for much of this information.
Resolution
Getting a high-quality image in the print world requires large files. Not so in the online world, where files are repeatedly downloaded as people visit web pages. The larger the file, the longer it takes to download and the slower the page loads. That’s why web designers often use low-resolution images – about 72ppi – to reduce download time.
Also, a larger image won’t look any better on the screen anyway because the quality of the image is controlled by the resolution of the screen. A 72ppi and a 300ppi picture will both be displayed at the same screen resolution. A screen set to a 1,920 x 1,200 resolution will display 1,920 pixels horizontally in 1,200 rows, which is equivalent to about 96ppi.
So do not make an image any larger than necessary for sharing online. Typically that means using lower-resolution images to speed up downloads. One exception to this rule is when you’re posting items for others to download and print (e.g., photos of the executive team). These images should be high res (300ppi).
And a note. High-resolution devices-such as the newer MacBooks with Retina displays-may make the general 72ppi standard moot in the not-so-distant future. A 72ppi image displayed on such a device will either be a fraction of its size, or will be displayed at the original dimensions with extra pixels and filled in (interpolated). Either scenario could significantly reduce the quality of the image. For such screens, 144ppi is preferred.
But, until the installed base of these higher-res screens gets larger, it’s probably safe to stick with the 72ppi guideline.
Type of File
The Portable Network Graphics (PNG) format works best online. This format behaves better, looks sharper, and generally loads faster than JPEG on the screen.
Web designers sometimes use GIF images for small icons that are used throughout a website and must load quickly. The GIF format is not suitable for printed images, which usually need higher resolution.
These are just some basic graphics concepts. I also discuss related topics in these blog posts:
And there are these other great resources:
- Raster. JPG. EPS. PNG-What’s the Difference? by MODassic Marketing
- What DPI do Web Images Need to Be? by Dara Skolnick
- Graphic Design for Print vs the Web: 15 Vital Differences You Need to Know About by Janie Kliever
- What is Resolution? DPI, PPI and Megapixels by Jared Page, and
- Understanding DPI and Pixel Dimensions by Sara Campos.·
