Digital images for your website
Of the dozens of image file formats out there, I’ll focus here on the common extensions we might use in your website, and why we may choose one over the other in a particular instance. Note this article is about still images, not movies, gifs, or Lotties. But first, a little vocabulary…
Digital images are either vectorized or rasterized
Vector images are drawings based on points and paths, and they can be resized without losing quality. These can only be edited by certain apps/programs such as Adobe Illustrator and are often used for logos and similar graphic elements. Vector images are saved as .png or .svg for use on websites.
Rasterized images are pixilated, so need to be sized properly for the context. Many of us understand the basics of PPI, or pixels per inch of a computer screen: pixels are tiny dots organized into a grid that, together, trick our eyes into seeing a picture. Changing the number of pixels per inch makes the picture sharper or more grainy.
PPI is similar in theory to DPI, or dots per inch, which refers to how many dots are used by paper printers. A typical office printer uses 300 dpi, whereas for website images, the standard is 72 PPI.
Types of image files
These pixel-based files are smaller in size than others, but they use “lossy” compression so image quality decreases when you zoom in on them. For this reason, it’s important to size them appropriately for where/how they’re placed. JPGs, along with PNGs, are the workhorses of image files on the web.
PNGs are pixilated files but they use “lossless” compression, so image quality is maintained when zooming in. PNGs have a larger file size compared to JPGs, but they can be transparent or have no background. This is convenient for websites where we may have overlapping graphics or we want a cut-and-paste type look with edges that contour the subject. Because PNGs retain detail, they are often used for graphics such as logos, so they can be scaled without losing quality.
RAW images are pictures that are uncompressed, so they contain all the information possible in their data. Many phones and cameras allow you to take RAW images, and because they contain so much detail, these images are good for editing later in another app.
SVGs are vector-based drawings: good for graphics, charts & illustrations because you can scale them up or down without losing details. Zoom in to your heart’s delight! One thing that makes SVGs good for charts and graphs is that search engines can detect keywords within the chart, which helps with SEO. Emojis are often saved as SVGs. See Adobe’s excellent article on SVG files here.
WebPs have better compression than .png or .jpg, and supported by all the major web browsers. These images help keep websites smaller and load faster. They’re newer on the scene than JPGs and PNGs, but they’re taking over quickly.
So what's the best image file type for your website?
The moral of the story is that in different places on your website, we’ll want to use different formats. We’ll also decide what size to save the file based on how large we’ll view it. Larger files mean slower page load time. Slower page load time costs us viewers. Like so many things in life, it’s a balance.
Vocabulary
Bitmap image – An image made up of pixels which contain data.
Lossy compression – a method of file compression which makes the file smaller but sacrifices image quality.
Pixel – a dot which contains data and appears as a color defined by that data.
Pixelated – used to describe an image that has been broken down into pixels.
Raster image – a pixelized image where the file’s data describes each pixel.
TIFF – Adding this here informationally: TIFFs are used primarily for printing photos, so you generally won’t see them on websites.
Vector image – a drawing that is built on points and lines, not pixels.
