When To Use JPG vs PNG (For Websites)

The easiest way to speed up your website is to use the correct image format. This is a very common cause of slow loading speed in Shopify Stores, but this video also applies to websites of any kind including Wordpress, Webflow, Squarespace, Wix etc...
The main takeaway here is that you should use JPEG (or JPG) for photographs, and PNG for computer graphics like logos, text, or icons. Because if you save a photograph as PNG, the file size will be huge.
The exception for this rule is if you need transparency such as in a product image with background removed, in which case you must use PNG.
If you’d like to see more videos on how to speed up your Shopify store, let me know in the comments.
Subscribe: / @edcodes

[@EdCodes]

Watch this next: COMPLETE GUIDE TO IMAGES on Shopify - Formats, Sizes, Compression, SEO - th-cam.com/video/FmIRKvOuqSc/w-d-xo.html

[@jordanramon9206]

You are a blessing to this earth Ed. Thank you so much for sharing your knowledge with us.

[@philipzwart6449]

Very useful and concise information, thank you.

[@h.schulz114]

Thanks a lot for your explanations!

[@MrKozlicek]

Nice video and nice channel. Subscribed :)

[@olgagal8800]

Thank your for great explanations!

[@EdCodes]

welcome!

[@lockhartlucis]

Awesome video

[@tomtenberg]

What about webp or avif?

[@That_Freedom_Guy]

Thanks.👍🏻

[@charlieb2b]

Thanks for the video. Question. I do digital drawing, portrait of people as close as a picture as possible. Should I export my drawings as jpeg or png to share on social media?

[@EdCodes]

This isn't as important for social media - facebook, instagram, and others all have their own compression. This video is mainly directed at website owners.
But generally it's also about the amount of colors - I think this is something I forgot to mention. Photographs have millions of colors. If you're using shades and gradients in your drawings that's also a lot of colors, the result will be a large and heavy png.
You can test by saving your images in each format and seeing which weighs more, and if you can see which is better quality. Try squoosh.app if you want to compress while checking quality.

[@elgarnamocii3397]

konw i understand. thank u for sharing

[@socheatkaraoke]

Cool

[@Flandernify]

Use Jpeg for photographs? I am looking at my older pictures (ca. 10 years), some 10% of them are not accessible anymore.... Being lossy, Jpeg is too unstable. If you cant store your pictures long-term, what is the point of taking pictures?

[@johnmauger718]

Great video, but had to throw in a dislike because you have embedding turned off which made it impossible to even source you in a professional way. GG 😎👍

[@EdCodes]

I turned off embedding due to the invalid traffic bug in TH-cam. This affected hundreds of TH-camrs where our views were being seen as spam, and turning off embedding was a suspected fix. I've turned it back on now.

[@j7ndominica051]

The panda comparison is rigged in favor of JPEG. The PNG has a blank alpha channel and the quality of the JPEG is poor. If you have artificial shapes of contrasting colors that are not greeen or yellow on the photo, you must unselect chroma subsampling.