Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Responsive Images Image Delivery with Srcset and Sizes Image Formats

Posted by Scott Madrid
Scott Madrid
13,228 Points

Are GIF's typically larger or smaller file sizes than JPEG or PNG's?

In this video, Nick tells us that GIF's and PNG's are typically larger file sizes than JPEG's. But when I watched the "Photoshops Foundation, Optimization:Part 1" video, it states that GIF's typically have smaller file sizes(specifically 3:30 into the video) than JPEG and PNG-24's. What is the correct answer?

Scott Madrid
Scott Madrid
13,228 Points

Thank You Evan! This answer definitely clarifies my question!

2 Answers

Evan Agee
Evan Agee
13,088 Points
Evan Agee
Evan Agee
13,088 Points

In short, it depends GREATLY on the content of the image itself. Let me explain:

If you take a photograph and save it as a gif or png the file size will be much larger than a jpg because those format are better suited for graphical elements with larger areas/cells of color that are the similar or the same.

Personally I try to use the following criteria to determine format:

  1. If it's a photograph or a complex image with lots of color variation: JPG
  2. If it's graphic without animation OR you need alpha transparency: PNG
  3. If animation is needed OR gif compression results in a smaller file size (while preserving the image quality) AND your use case allows you to use a matte: GIF
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Also, gif files are restricted to up to 256 colours per image for a static image or 256 colours per frame for an animated gif. They can be any 256 colours from the 24-bit colour space, but if the image has less colours than that, you can save a lot in the file size.

And they can still have transparency by specifying a particular colour as the transparent colour.

So yes, again it depends greatly on the image content.

Evan Agee
Evan Agee
13,088 Points
Evan Agee
Evan Agee
13,088 Points

Fantastic Scott! Have fun!