When creating your website, selecting the proper photographs and imagery to capture the user best is an essential part of their experience. It’s almost expected that images are part of the natural visuals of a website. Can you remember visiting a website that did not use images? Probably not. According to W3Techs.com, only 3.6% of websites do not use any images. That’s amazingly low!

When photos are used on a website, many people don’t know the difference between the file formats you can use. JPG, PNG, GIF… is there a big difference? While they may display the same when you view the website, there are substantial differences in each file format and likely a preferred format or two, depending on the type of image you are using.

This article will look at the most common image file types used on websites and briefly explain when you should use them.

Most Common Image File Types:

GIF (Graphics Interchange Format)

File Extension(s): .gif

They are a good choice for simple images and animations and are commonly used for graphics, logos, and icons. Additionally, they are popular because they support basic animation like the ones you’ve seen on memes and social media websites.

JPEG (Joint Photographic Expert Group image)

File Extension(s): .jpg, .jpeg, .jfif, .pjpeg, .pjp

They are the most popular choice for still images because they are compressed to smaller file sizes. It is very common to save pictures and photographs as JPEGs. If a higher quality is essential to the image, then JPEG should be avoided, and you should opt for a file type with less quality loss, such as a PNG or WebP.

PNG (Portable Network Graphics)

File Extension(s): .png

PNG is better for images when you need higher quality than a JPEG, or the images require transparency.

SVG (Scalable Vector Graphics)

File Extension(s): .svg

SVG is a vector image format that you can use for UI elements, icons, graphs, etc. The benefit is that it can be scaled to any size without losing quality.

WebP (Web Picture format)

File Extension(s): .webp

WebP is a new file format for high-quality images and animated images that also comes in a smaller file size than PNG and JPEGs. It will likely become the most common image type as it gains acceptance. According to Google, which adopted using WebP images on their platforms, WebP images are 26% smaller than JPGs, which is a huge benefit when using images on the web.

Other File Types

While there are some other file types, they are very infrequently used. Some of these are older file types that are being used less and less each year, while others are still used for very particular uses.

  • APNG (Animated Portable Network Graphics)
  • AVIF (AV1 Image File Format)
  • BMP (Bitmap file)
  • ICO (Microsoft Icon)
Facebooktwitterredditpinterestlinkedinmail

About the Author

David May

Dave is one of our Front End Web Developers. When he's not keeping up with web development trends and furthering his knowledge of all things code, he's probably playing a video game, reading a book or sitting on the beach.

Your website browser is no longer supported.