Image File Types, Explained

Katie Evenden, Marketing Director
|
February 2023
|
Website Design

File types don't have to be complicated or confusing. This guide will help you provide the best image types to your designer or developer when building or updating your site.

Below are general descriptions for each of file types used in website design, and when they are used.

PNG

Portable Network Graphic

A PNG file is a raster-based image. It can have a transparent or semi-transparent background, making it a very common website image. A PNG file shouldn’t be stretched bigger than the original file, as it will become pixelated and lose its quality.

Usage Examples: Logos, any images that need a transparent background (such as a cutout of a person)
File Size: Typically at least 25% bigger than comparable JPEG files
Quality: Good (raster-based)
Compression: Lossless

JPEG

Joint Photographic Experts Group

A JPEG file is also a raster-based image and does not have a transparent background. It is not limited to a specific number of colors, so photographs are typically JPEG files. If a JPEG is stretched to a larger size than the original, it will become pixelated/blurry. It should also be noted that JPEGs should be scaled to the size of the space it will be used it in prior to adding it to a website, rather than trying to shrink a larger JPEG into a small space after.

Usage Examples: Photos on your website, the images you use on your social media channels
Size: Typically smaller than PNG, due to their lossless compression.
Quality: Good (raster-based)
Compression: Lossy

SVG

Scalable Vector Graphics

A SVG file is a vector-based image, which means it can be grown or scaled down as much as you need, without pixelization. This means it can be stretched across the whole screen or shrunk to fit in a small area without worrying about losing quality or becoming blurry. Some of the main uses for a SVG file include:

Usage Examples: Logos, illustrations, graphs, and charts
Size: Typically smaller than PNG
Quality: Great (vector-based)
Compression: Lossless

WEBP

Web Picture Format

A WebP file is a relatively new file type created by Google, to help make load times quicker on websites. They are smaller file sizes which means you can have all the benefits of JPEG and PNG files, just with a smaller file size. This makes it a go-to for your website images – especially if you need to improve your loading times. It is also considered a “modern Image type,” which will help to improve your SEO efforts. The only downside with WebP files is that some versions of various browsers (like Safari and Firefox) don’t always like it.

Usage Examples: any images (photos) on your site, cutouts
Size: 25% - 34% smaller than comparable JPEG files, 26% smaller than comparable PNG files
Quality: Great (raster-based)
Compression: lossy

Of course, these are not the only type of files, but they are the most common types for websites. Here is a quick tool to help visualize the differences: