Skip to content

Instantly share code, notes, and snippets.

Last active July 9, 2021 15:37
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
PNGs vs. JPEGs - What's the Deal with Those?!

What's the Deal Image Optimization?


PNGs vs. JPEGs - What's the Deal with Those?


If you come from a development background, it can be easy to overlook optimizations outside of JS and CSS. I found some interesting information about PNGs and JPEGs,] and synthesized it the best I could.

Just the facts


  • optimized for text and simple 2d images
  • lossless (can copy as many times as you like)


  • optimized for photographic images
  • lossy (loses quality every time you copy)

File sizes

Simple Text Image

Choose PNGs for simple images (i.e. text or simple graphics).

The JPEG version (top) of this image is 5x larger than the PNG version (bottom) (source)





Detailed photoghraphic image (700px width)

Choose JPEGs for detailed photographic images

The PNG version (left) of this image is 10x larger than the JPEG version (right) (source)

PNG 400KB vs. JPG 35KB


U.S. Internet speeds

  • corporate wi-fi 850 Mbps
  • U.S. average 18 Mbps
  • increasing about 20% each year
  • U.S. is ranked 10th in wireine speeds
  • 75% of Americans own a smart phone
  • U.S. is ranked 28th in mobile internet speeds (source)
    • 10.7 Mbps (U.K. is 26 Mbps!)
    • countries with faster mobile internet than U.S.
      • Slovakia
      • Kenya
      • Indonesia
      • Egypt
      • South Korea
      • Romania



It is tempting to request a PNG due to the transparent background, but it can save you 1 MB to opt for an optimized JPEG for detailed photographic images.

Why does this matter? On a slower smart phone connection of 8 Mbps, this is an ENTIRE EXTRA SECOND of loading time. On a page with 5 large images, this could amount to 5 extra seconds of loading time.

"2 seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second." - Maile Ohye, from Google"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment