From bd4c4df62580bd9ad1e7b3e9e75085e896391036 Mon Sep 17 00:00:00 2001 From: Shaun O'Connell Date: Wed, 30 Sep 2020 16:14:58 +0300 Subject: [PATCH] Add WebP details to the readme --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7175725..993e21d 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,8 @@ Then I gradually made the following changes: - Setting intrinsic image widths and heights to stop any layout shifts while they load. 1. [`03-no-lazy-loading`](03-no-lazy-loading/index.html): - Take off the lazy loading so that we can compare like to like. - +1. [`04-webp`](04-webp/index.html): + - Progressively-enhance the HTML by using the `` element, and adding `webp` as one of the ``s. ## Results @@ -39,6 +40,7 @@ Version | Requests | Transferred | WebPageTest | Comments [00-original](00-original/index.html) | 60 | 7,819KB | [00](https://webpagetest.org/result/200929_Di2B_202bdecf2063c4b6c9a8ab39c9d2753b/) | Baseline [01-compressed-jpgs](01-compressed-jpgs/index.html) | 60 | 6,394KB ✅ *(-1,425KB)* | [01](https://webpagetest.org/result/200929_DiTA_18be7082d9ad2708ba3e6302d3e07d62/) | TinyJPG is amazing. [03-no-lazy-loading](03-no-lazy-loading/index.html) | 59 ✅ *(-1)* | 6,380KB ✅ *(-14KB)* | [03](https://webpagetest.org/result/200929_DiRJ_4b09841208346f8612cbf130ebc9dc9a/) | PNGs < GIFs. Inlined CSS. +[04-webp](04-webp/index.html) | 59 | 6,380KB ✅ *(-14KB)* | [04]() | PE with WebP & `picture` elements ### With Lazy-loading of the offscreen images