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.
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)
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
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
- 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
/cdn.vox-cdn.com/uploads/chorus_asset/file/8658581/akamai_US_state_average_connectivity_q1_2017_copy_01.png)
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"