JPEG vs. PNG

While using photoshop to crop my images for a website I am coding, I noticed that I kept on switching between png and jpeg formats. These are the two that I recognize as the most used in pictures, but what is the difference?

I also know that png is usually used in transparent images, however none of my pictures that were in a png format magically changed transparency.

So, I did some research and found that png is usually higher quality than jpeg, which I thought was interesting because I assumed it was the other way around since jpeg seems slightly more popular. Because jpegs are lower quality, they are also faster to load which may explain its popularity.

If your image turns out to be in a lower quality than expected, try changing the format to png. This will be more noticeable in pictures or graphics with distinct hard lines.

I also learned that you should use a jpeg format for photo albums, complex images, and opaque images.

All of these are useful things for web designers to know, especially for beginners. I learned that either format is acceptable, however, it really depends on the quality of the picture that you want that should decide what format you use. Higher quality pictures should use png formats, but be aware that you may be adding more to the size of the image file, which may make it take longer to load for some viewers.

Finally, if you are really unsure save a picture in both formats and look at the quality of each. If you’re happy with the quality in both, but the png file is much larger, choose the jpeg one. If you’re not happy with the quality in the jpeg one, choose the png version of the photo.

After learning more about both formats I now realize a few pictures I had edited and cropped in Photoshop seemed to lose their quality when I was done. Although it wasn’t too noticeable, I still was able to tell a difference between the original and the final product. I originally thought it was because I changed the image size, and it just lost a little of its high quality because of this, but I am now wondering if I saved those files as a png or jpeg, and if that had anything to do with it.

Leave a comment