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

JavaScript Treehouse Club: JavaScript Car Sounds HTML Comments and JavaScript

Posted by Dervin Buckery
Dervin Buckery
Courses Plus Student 838 Points

.png vs .jpg

Is it best to use .jpg or .png for creation of webpages. If one is best please explain .. Thank you!

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The choice of image format would depend on the image size and content.

In general, if the image contains limited color information such as a logo or drawing, the .png format will be more compact and render more quickly and accurately. It's also a good choice if any part of the image needs to be transparent.

But if the image has no transparent areas and lots of color information such as a photograph, the .jpg format will be better.

Rikku ~
Rikku ~
3,095 Points
Rikku ~
Rikku ~
3,095 Points

Hi!

First, I imagine it's easy to be overwhelmed by decisions when in the early stages of your creating the webpages. When I'm in a similar situation, being unsure of which format is best suited, I tend to choose the more capable format.

In the case of "jpg vs png", I go for PNG. It supports transparency and it has great color support for photos (although less good in optimizing file size). Just be sure your image is saved in PNG-24, and not PNG-8. A PNG-24 image should have a filesize larger (at least 4 times?) than if saved in jpg. A PNG-8 would get a filesize comparable to jpg saved with highest quality.

This strategy might be right for you if you are in the learning process of building webpages, as it makes it easier and faster to have a page up running. Optmization can usually be done later when everything is working.