Image File Types Explained

Michael Bergbauer - March 30, 2015

Anyone working on optimizing their website knows how important it is to optimize images. But do you know if you’re using the right types of image files across your site? Below, we’ll explain the differences between the three major image file types and when it’s best to use which.

JPEG

Main features:

• 16 bit data format
• Can display millions of colors
• Common, and compatible across most platforms and displays
• Uses a compression algorithm to sacrifice some image data to reduce files size

JPEG’s use of compression is great for most webpages because it reduces page load time – which is a search engine ranking factor. Use JPEG files for real-life photos (digital cameras save their images as JPEGs by default), as well as images that contain lots of color and light/dark shading.

GIF

Main features:

• Uses 256 indexed colors
• Can utilize progressive loading (a low-quality version is loaded first, then more details are filled in)
• Can be animated

Since GIFs use a limited color range, their file sizes are small and do not require compression. However, this means they are not great for displaying details. Use GIFs for simple images with few colors, small icons, and of course, animations.

PNG

Main features:

• Capable of displaying more than 16 million different colors
• Supports transparency settings
• Uses lossless compression so no data is lost when saving

Because they display so much detail and use lossless compression, PNG files tend to be large. They are best used for logos that use transparency and fading effects, or for other complex images. Just be aware that the larger file will take longer to load.

Once you’ve decided which image file types to use, you can improve their SEO performance by optimizing the metadata for the images. For better results, create an image sitemap to help search engines index the images on your website.