Blurry image? The difference between vector and raster
When it comes to websites, a common question we hear is “why do some images look more blurry than others?”
There’s not always a singular and easy answer to this question, but it helps to have a basic understanding of the difference between the two major image files that are used in designing and developing websites — raster images and vectors.
Raster images are perhaps the most common form of image files developed with websites. Raster images are comprised of pixels (each pixel is a single point and smallest element in a digital display, like a computer monitor) and are more complex visuals than vectors.
Photographs are raster images because they use an tremendous amount of of color variations and require the use of pixel limits to optimize the photo. If you think of a sunset image where the sky blends from blue to orange, this is a good example of of a raster image taking advantage of pixel capabilities to present a pleasing website visual.
A raster image viewed in digital form will always have a specific number of pixels when displayed. When you enlarge the image file without increasing the number of pixels, the image will start to look blurry.
Common types of website raster images include jpg, gif, png, psd files.
Common types of images you may see as a raster images:
- A sunset (think color variation/blending)
- A portrait (think facial details)
- Action/Sports (think of complex color transitions and detail)