Add WebP details to the readme

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 `<picture>` element, and adding `webp` as one of the `<source>`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