When you build a website, you most likely will end up working with many images. Because of that, many of my Website Creation Workshop students end up, not just learning about building a WordPress website, but also a bit about graphics. In fact, because of the graphics interest level that I saw in my students, I even started a program called the Graphics Creation Workshop a couple  of years ago.

So if you’ve always wondered about the differences between JPEG, GIF, and PNG files, the infographic below will help you.

While quite a few image file formats exist, it’s safe to say that you just need to know about only 3 of them: JPEG, GIF, and PNG. Let’s look at each of those.

What is a JPEG (.jpg or .jpeg) image?

JPEG probably is the most commonly used image format these days. Most digital camera images are saved as JPEG files. JPEG is a great format to use when you want to reduce the file size but you sometimes lose details during the compression process.

  • Probably the image file type that most of us are familiar with.
  • Can’t have transparent parts.
  • Can be compressed quite a bit; ideal when you want the file size to be small.
  • Opening, editing, and re-saving the same .jpg file multiple times will result in the loss of quality over time.

What is a GIF (.gif) image?

In the early days of websites, GIF images were very popular as they are even smaller in size than JPEGs. While the quality is not that great, a GIF image can have transparency. You can also create animated GIFs.

  • Uses fewer colors than a .jpg file, hence, the file size is smaller.
  • Allows transparency.
  • Can be animated. (Check out Giphy for animated GIF examples.)
  • Lower quality than the other two file types.

What is a PNG (.png) image?

The newest of these three formats, PNG, is known to retain quality very well. PNG allows transparency, too. It’s an ideal format when you want to display details. The file size can be much bigger than other formats.

  • In general, produces crispier images than .jpg and .gif images.
  • Allows transparency.
  • Does not lose data after compression.
  • Cannot be animated.

When to Use Which Type of Image File

While I don’t think it’s important for most of us (who are not professional graphic designers) to know the detailed differences between these 3 file types, knowing when to use each can be very helpful especially when you are using them for your website. When you use the right type of image files, your site will load fast, look professional, and engage your readers.

Below is a handy chart that summarizes this for you:

Infographics credit: Know Your File Types: When to Use JPEG, GIF, & PNG

Image Resources

Now that you understand the differences among .jpg, .gif, and .png files, I’d love for you to experiment and have fun with images!

Here are some image resources that can come in handy as you create and edit images:

Canva

Canva is an amazing online image editing tool that easily lets you create great-looking images for websites, social media, and more.

Read my blog post here to learn more about Canva.

Coolors

Trying to decide your logo colors? Or the background image for your blog post’s featured image? Coolors is a brilliant, simply tool that lets you see different color combos online.

Read more about Coolors in my blog post.

ColorZilla

ColorZilla is a handy Firefox/Chrome browser add-on/extension that lets you find out the value of any color shown in a web page. It can be very helpful when you want to produce the same color as something you see on a website etc.

If creating graphics interest you, you want to check out my Graphics Creation Workshop where I take my students, without any artistic background, deeper into the world of images.

Have fun with images!

Print Friendly, PDF & Email