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

gistfile1.md

What's the Deal Image Optimization?

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

Overview

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

PNGs

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

JPEGs

• 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)

12KB JPEG

2KB PNG

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

Conclusion

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"