You know when your photo gets grainy and blurry because you zoomed in too far or stretched it out too much? That’s pixelation.
Pixelation occurs most frequently in images with a low number of pixels per inch (PPI) but also happens if there’s a low bit-per-pixel rate.
/ PPI relates to the resolution of an image.* / Bit-per-pixel rate refers to the amount of data represented by each pixel.*
In a raster format, pixels blend together to form a larger image. They’re size-constrained because of a consistent PPI. So, when a raster image is enlarged, the pixels get larger too.
Individual pixels stretch to the point of visibility, causing graininess or fuzziness (i.e. pixelation).
Deliberate pixelation is often used in videos to obscure a person’s identity or to preserve the privacy of people who were filmed without consent. It’s also used to censor images and videos containing vulgar gestures, inappropriate language, or nudity.
In a more recent trend, designers are making their projects pixelated as an artistic approach. Particularly popular in video games, this technique can invoke nostalgia for an earlier tech era.
Raster images are made up of individual dots of color arranged in a grid. As an image gets enlarged, it’s impossible to add more pixels. Pixels are stretched to the point they become visible.
Vector images, on the other hand, are created with a mathematical equation. Instead of the image being made of dots, a vector image uses lines. As the image is enlarged, the equation is recalculated and alters the lines. This results in a crisp, clean image, regardless of size.
Encountering unintended pixelated images in a company’s marketing materials or in their software design is cringe-worthy at best (and a dealbreaker at worst). Here’s how to avoid that:
Resolution relates to the PPI in a digital image.
High-resolution images are best for print materials, which have a much higher dots-per-inch measure than digital displays. Low-resolution raster images are best for web displays because they provide the necessary clarity without additional data bloat. Vector images are best for cases where an extremely large or scalable image is needed.
If image quality is a central concern, start your design with a vector. Their complex algorithms make resizing a breeze. But most importantly… Vector images can be exported as raster images, but raster images cannot be converted to vector images.
Here’s a look at how Thomas Helbrecht works with vectors using Figma:
<iframe width="560" height="315" src="https://www.youtube.com/embed/4vzs6O29o-0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Sign up for Figma (it’s free!) and avoid the unnecessarily expensive software.
Image editing software can be used to preserve the quality of both vector and raster images.
The most common way to draw and preserve vector images is using software like Figma, which approaches design from a math-based perspective instead of pixel-based.
If you’re stuck with a raster image and need to preserve the quality, look into professional photo editing programs. They support raster images by adding in blank pixels as the image is enlarged and automatically coloring them to match the rest of the image.
If you enjoyed this guide, continue exploring with these related terms. A. Pixel: An unavoidable part of every digital space that can affect everything from layout to image quality... Read the full definition B. Vector Graphics: They’re created with lines instead of pixels, and therefore have some interesting properties and uses... [Read the full definition] C. Raster Graphics: These graphics are made with a grid of pixels and can be an important part of a digital project... Read the full definition