Web images seem like they are an easy topic for web designers. Most people seem to believe you just upload the image and it’s all taken care of – however there are, in fact, many different things a web designer has to deal with when considering what images to use on a website – from aspect ratio to DPI/PPI and file formats, images can be quite a complicated issue.
One of the more confusing parts of using images online regards the discussion of dots per inch (DPI) and pixels per inch/pixel density (PPI). Even experts and major companies get confused – there have been occasions where Apple, Android, and Adobe have used the term DPI when they should have used the term PPI. These terms are not synonymous with one another, but they are related. In this section of today’s article, we will cover the relationship and differences between these two terminologies.
DPI is used to describe the resolution of dots per inch on a print, as well as the printing resolution of a print dot gain. A print dot gain is the increase in size of halftone dots that occurs during printing – it is caused by the spreading of ink during printing.
The higher a printer’s DPI is, the clearer and more detail the print will be. A printer doesn’t have just one DPI measurement though, it depends on the mode the printer is in as well as driver settings. The range of DPI depends on the print head technology it uses. For instance, Inkjet printers are capable of 300-720 DPI, while laser printers are capable of 600 – 2400 DPI.
Before we get into PPI, we should discuss what a pixel is. A pixel is the smallest unit of information in a digital image. A screen is made up millions and millions of pixels and it’s nearly impossible to see an individual pixel. A pixel, however, does not have an actual size (nor does it have to be square – it can be rectangle or round), it’s a very relative unit of measurement.
Pixel Density or pixels per inch (PPI) is the measurement of the resolution of digital devices. It can be defined as the total number of pixels in each square inch of a digital display. PPI is often confused for DPI but PPI is the measurement for digital displays while DPI is used for print material.
PPI and display resolution are highly related mathematically, and before we get into the equations we should discuss what display resolution really is. The display resolution of a screen on a digital device is the number of distinct pixels in each dimension that can be displayed. So if you see the resolution 1920 x 1080 that means that the screen has 1920 pixels in width and 1080 pixels in height.
The relationship between display resolution and pixel density (PPI) is inversely proportional, meaning that if you keep the resolution constant and increase the screen size, the PPI will be lowered. But if you decrease the screen size and keep the resolution constant the PPI will be higher. If you want a sharp screen, you should check the PPI of a display device. The higher the PPI is the more beautiful the graphics and text will be, allowing you to see everything in fine detail.
When creating a responsive website, you have to consider the aspect ratio, especially if you want the images and videos to maintain the same shape across multiple devices. When working with a responsive website, you want to make sure that that images are the same across the devices so the meaning of the image doesn’t change. Web designers can resize each image by hand for different devices or use coding to do it for them.
Try this aspect ratio calculator if you’re having trouble understanding how aspect ratio works on your website. Just remember that aspect ratio is basically telling you how square or wide an image is – 1:1 is square and 16:9 is wide.
Images can be formatted in many different ways and some ways are better than others for web design.
.jpg or .jpeg (Joint Photographic Experts Group) is the most common file format on the internet. This image file is compressed and can be compressed to varying degrees depending on how small a user would like the file to be. However, the smaller a .jpg file is then the more grainy it will be. If you want fast load times on your website, .jpgs are a great option as long as you don’t mind the quality being imperfect.
.gif (Graphics Interchange Format) – Most of the time people like to argue over the pronunciation of this file image format then discuss its usage. It’s a fairly limited file format, .gifs are unable to display more than 256 colors. Photographs and other graphics with gradients look more low quality, while images with only a few colors do well with the small file size. .gifs are mostly used to show animated features.
.png (Portable Network Graphic) – .png files are quite useful for web designs that require transparency or quality. They support more colors than .gifs and are larger than .jpegs. The also allow for elements within the image to be transparent. You would be surprised on how often this is necessary when building a website.
.tif or .tiff (Tagged Image File Format) – These image files don’t work well with most web browsers especially since they’re such a large file format. They’re best used by printers and photographers.
.eps (Encapsulated PostScript) – This image file format can store both vectors and bitmaps. These can’t be displayed on the web but are used in illustration and graphics programs. Often your logo files are saved in this format.
.pdf (Portable Document Format) – Another widely used file format. .pdf files can contain vector, bitmaps, typefaces, layers, and rasters. They are often used to display information that authors don’t wish to be edited easily. It is also useful because it can include multiple pages that are easily printable. You will often find brochures, instructions, newsletters, and financial information in this format.
Hopefully, this discussion of image file formats has relieved any confusion you may have had over which format for your web images is the best for your website.
At digiTech Web Design, we’re committed to offering our clients high-quality, responsive web designs that are full of beautiful images. For more information on how we can help you with your web design and internet marketing needs, please contact us today!
