Skip to content

Commit 2576fe8

Browse files
committed
Update readme
1 parent 928ab8d commit 2576fe8

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

readme.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Both filters support an optional parameter for resizing images. For example:
1616

1717
### Use case: compressing images
1818

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.
2020

2121
```liquid
2222
{% assign imagePath = "assets/images/some-image.bmp" %}
@@ -42,6 +42,14 @@ This is converted by Jekyll into:
4242
</picture>
4343
```
4444

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+
4553
### Use case: responsive images
4654

4755
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
115123

116124
## References
117125

126+
- [Serve images in modern formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/)
118127
- [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Responsive_images)
119128
- [Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types)
120129
- [Optimize Cumulative Layout Shift](https://web.dev/articles/optimize-cls)

0 commit comments

Comments
 (0)