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

Пікірлер: 18

  • @EdCodes
    @EdCodes2 жыл бұрын

    Watch this next: COMPLETE GUIDE TO IMAGES on Shopify - Formats, Sizes, Compression, SEO - kzread.info/dash/bejne/eKF9tK2vf9jXg8Y.html

  • @jordanramon9206
    @jordanramon9206 Жыл бұрын

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

  • @philipzwart6449
    @philipzwart6449 Жыл бұрын

    Very useful and concise information, thank you.

  • @h.schulz114
    @h.schulz114 Жыл бұрын

    Thanks a lot for your explanations!

  • @MrKozlicek
    @MrKozlicek2 жыл бұрын

    Nice video and nice channel. Subscribed :)

  • @olgagal8800
    @olgagal88002 жыл бұрын

    Thank your for great explanations!

  • @EdCodes

    @EdCodes

    2 жыл бұрын

    welcome!

  • @lockhartlucis
    @lockhartlucis6 ай бұрын

    Awesome video

  • @tomtenberg
    @tomtenberg2 ай бұрын

    What about webp or avif?

  • @charlieb2b
    @charlieb2b2 жыл бұрын

    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

    @EdCodes

    2 жыл бұрын

    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.

  • @That_Freedom_Guy
    @That_Freedom_Guy Жыл бұрын

    Thanks.👍🏻

  • @elgarnamocii3397
    @elgarnamocii3397 Жыл бұрын

    konw i understand. thank u for sharing

  • @Flandernify
    @Flandernify9 ай бұрын

    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?

  • @socheatkaraoke
    @socheatkaraoke11 ай бұрын

    Cool

  • @johnmauger718
    @johnmauger7185 ай бұрын

    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

    @EdCodes

    5 ай бұрын

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

  • @j7ndominica051
    @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.