DEV Community

Cover image for The Other Side of the Dot: An Image Format Guide
David Tetreau
David Tetreau

Posted on

The Other Side of the Dot: An Image Format Guide

Have you ever found yourself wondering what those image file extensions are that hang out on the opposite side of the dot as your image file name? If so, you are in luck! This post will explain what those file extensions are all about and when you should use them. Knowing the right image file to use is a very important skill to possess. Each image format has a distinct purpose and selecting the wrong image can affect performance, appearance, and scalability.

Image Formats

Here is a list of many of the common image formats you could encounter on the job:

  • JPEG (or JPG) or Joint Photographic Experts Group
  • PNG or Portable Network Graphics
  • GIF or Graphics Interchange Format
  • TIFF or Tagged Image File
  • PSD or Photoshop Document
  • PDF or Portable Document Format
  • EPS or Encapsulated Postscript
  • AI or Adobe Illustrator Document
  • INDD or Adobe Indesign Document
  • RAW or Raw Image Formats

This is by no means a comprehensive list, but no worries! We will be focusing on the three most common image types you will find on the web.

Web Friendly File Formats

  1. JPEGs or JPGs can be compressed and are a good option for showing photographs with many colors. They also have a small file size. A disadvantage of JPEG images is that when they are compressed, they lose quality. JPEG images are one of the main images you will find on the web. They are great for blogs. As a matter of fact, the cover image of this blog post is in JPEG format.
  2. PNGs are not as good as JPEGs for showing colorful photographs. They do not support as much color data. However, they are a good option for logos because you can make them have a transparent background. confused icon figure Also, PNGs are good for things like screenshots when colors do not matter as much. They are a little larger than JPEGs, but they can withstand compression a little better. This is another image you will find frequently on the web.
  3. GIFs are generally used for short animations. However, they can be still images as well. There is some controversy about how to pronounce GIF. There is more about that here. It is good to use GIFs on websites sparingly because it is difficult to optimize them. loading icon is spinning They will also be larger files and take up more space. Why not use CSS animations if you can? GIFs can also be displayed with a transparent background. Although they have their issues, GIFs are found often on the web.

I hope you have enjoyed reading about common file formats! Thanks for reading my post, and good luck with your future endeavors!


Discussion (1)

uknowaguy profile image

Awesome read!

Great knowledge to have. I finally learned my images load faster with jpg not to long ago