May be some benefits from combining a couple of performance ideas:
A big holdup on WebP has been getting them served in a backwards-compatible way without preloading the jpeg/png. If the image load is getting triggered from JS anyway, it should be trivial to toss in a ".webp" at the end of all the URLs.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Declined | None | T114791 Explore lazy-loading WebP thumbnails to supporting browsers (eg Android Chrome) | |||
| Resolved | Feature | • Gilles | T27611 Serve optimized WebP thumbnails as alternative to JPEG, PNG | ||
| Resolved | Matanya | T27397 Add .webp to the list of accepted file types on Wikimedia Commons uploads | |||
| Resolved | None | T50519 Add basic WebP upload support with JPEG/PNG thumbnails | |||
| Declined | None | T152739 Send WebP images when possible | |||
| Resolved | • Gilles | T254557 Thumbor doesn't save Content-Disposition: inline headers to Swift for webp thumbnails | |||
| Resolved | Jdlrobson | T110615 Explore the improvement on first paint / load time on connections if we load images via JS | |||
| Resolved | Jdlrobson | T111198 Provide infrastructure to compare first paint and load time with on demand images | |||
| Resolved | ori | T119797 Serve low-res images by default to users on slow or metered mobile connections | |||
| Declined | None | T119798 Vary mobile HTML by connection speed | |||
| Declined | ori | T119801 Update GeoIP cookie to include netspeed info |
Websites such as BBC news / Facebook send a low res image and enhance it via JS. Also worth exploring.
grep for http://www.bbc.com/news/world-europe-34453739 in
<div class="js-delayed-image-load" data-src="http://ichef-1.bbci.co.uk/news/304/cpsprodpb/09DA/production/_85922520_eleanor_roosevelt_alamy976.jpg" data-width="976" data-height="549" data-alt="Eleanor Roosevelt"></div>