Information to Help Your Organization

Image File Types, Explained

  • Katie Evenden, Marketing Director
  • |
  • February 2023
  • |
  • Website Design
Women working on Laptop

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.

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
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
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
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:

Click Here to Compare Image Types

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

If you need help with creating images for your website, don’t hesitate to contact us today. We’d love to help!

Ready to Take Your Business to the Next Level?

Contact us today to chat about your organization needs and ideas.
Need to chat with us now?
Call us today at (810) 299‑7100.
42 milligrams is a digital boutique specializing in custom web-based solutions built to your specific business needs.
Call Now for a Free Consultation
42 milligrams, llc
2000 Grand River Annex
Suite 200
Brighton, MI 48114