You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: readme.md
+10-1Lines changed: 10 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ Both filters support an optional parameter for resizing images. For example:
16
16
17
17
### Use case: compressing images
18
18
19
-
These filters enable you to automatically convert any common image format into the best browser-friendly format that the browser of a user supports. This can significantly reduce the bandwidth that may be necessary to load the image.
19
+
These filters enable you to automatically convert common image formats into the most efficient, browser-friendly format supported by the user's browser. [Serving images in modern formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/)can significantly reduce the bandwidth required to load images.
@@ -42,6 +42,14 @@ This is converted by Jekyll into:
42
42
</picture>
43
43
```
44
44
45
+
For example, when processing a generic Full HD image, the following compression results were observed:
46
+
47
+
```
48
+
Transcoded image 'src/assets/thumbnails-wide/uef-base.png' to 'src/cache/avif/9a50001a863a24ae8f0d847488b1ce39.avif' (2928kb -> 122kb)
49
+
Transcoded image 'src/assets/thumbnails-wide/uef-base.png' to 'src/cache/webp/9a50001a863a24ae8f0d847488b1ce39.webp' (2928kb -> 191kb)
50
+
Transcoded image 'src/assets/thumbnails-wide/uef-base.png' to 'src/cache/jpg/9a50001a863a24ae8f0d847488b1ce39.jpg' (2928kb -> 838kb)
51
+
```
52
+
45
53
### Use case: responsive images
46
54
47
55
These filters enable declarative creation of responsive images. Here's an example [include](https://jekyllrb.com/docs/includes/) template for a responsive thumbnail:
@@ -115,6 +123,7 @@ bundle install
115
123
116
124
## References
117
125
126
+
-[Serve images in modern formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/)
0 commit comments