You hear these phrases tossed around by everyone today – from amateur photographers, to the iPhone salesman, to some of the world’s most acknowledged visual creators and designers. But what do image size specs really mean? And what should you use?
Simply, it all depends on your project. Knowing what medium you are creating for and how your images will be used is key to sizing and picking the right number of pixels or DPI. Before you begin your next project, though, make sure you are familiar with all the image-quality jargon.
Picture elements, or pixels, in web design refer to the smallest units on a grid displaying an image. Pixels are measure by pixels per inch, or PPI. The more pixels per inch, the sharper an image will appear because of the size of each pixel.
Pixelation occurs when the number of pixels per inch in an image is low, causing each pixel to have visible edges.
PPI (pixels-per-inch) is important because it is a measure of image quality. Using image sizing tools in photo editing software, you can resample images (change the number of pixels in the document) or resize images (change the actual size of each pixel in the document but not the overall number of pixels).
In Adobe Photoshop, the “Image Size” menu allows you to resize or resample. Keep an eye on the number of pixels (the top section of the window) versus the “Resample Image” option (in the bottom left corner).
On Screen and for the Web
The web standard for images is 72 pixels per inch. At 72 PPI, images will render nicely (as long as they are of good quality) and should not appear pixelated or distorted. Keep in mind that your full-size photo should be wide enough to fully occupy the frame. (If you are in doubt, always size your photo a little on the large side.)
Think about your Facebook timeline photo, for example. The cover photo is 851 pixels wide. At 72 pixels per inch, your photo would need to be nearly 12 inches wide to fill the space without causing pixelation.
PPI has an impact on text as well. Just as a higher number of pixels per inch can make a photo appear sharper, it can also make text easier to read. Fonts with higher PPI are legible on screen at even smaller sizes than lose with lower PPI. Remember, text can appear pixelated in the very same way images can.
Finally, when thinking about pixels for web design, you must consider the ever-changing browser size. Unlike a few years ago when most everyone used a standard shape and size browser for most applications, today’s users each have a set of preferences that you may want to take into account. When developing fluid-with layouts, allow for images to grow proportionately with the browser but not beyond actual size. This will…