
but for the other 92%, displaying images with the right file type is essential. Only 8% of websites include no visual content. Since the SVG calculates the positions based on a percentage of the total area, and not pixels, there’s no pixelation at all. Vector Image Format Magnification (Image source: )Īs you can see, the difference between quality when magnified 7x is completely incomparable. This means you can endlessly enlarge the original image resolution without any loss in quality or distortion. Vector graphics instead use a system of lines and curves on a cartesian plane, scaled in comparison to the total area, not any single pixel.

Unlike the static raster image file formats, where each design shape and color is tied to a pixel, these formats are more flexible. SVG, EPS, AI, and PDF are examples of vector image file types. The vast majority of the photographs or images you see on the internet use a raster image format. This ends up creating a blurry, pixelated, or otherwise distorted image.

Since they’re static, you cannot efficiently resize the images, the original design and pixels will simply get stretched to fill the extra space. Raster image file types display static images where every pixel has a defined color, position, and proportion based on their resolution (for example 1280×720).

The most common image formats for the web ( JPEG, GIF, and PNG) are all under the raster category. Let’s take a closer look at each category. Image file types and formats are divided into two main different categories: raster image files and vector image files.
