jekyll_picture_tag 1.14.0 → 2.0.0pre1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.envrc +2 -0
- data/.github/workflows/code-checks.yml +2 -12
- data/.rubocop.yml +2 -0
- data/.ruby-version +1 -1
- data/docs/devs/contributing/code.md +11 -3
- data/docs/devs/contributing/testing.md +0 -11
- data/docs/devs/releases.md +20 -0
- data/docs/index.md +32 -17
- data/docs/logo.png +0 -0
- data/docs/logo.svg +880 -0
- data/docs/users/getting_started.md +55 -0
- data/docs/users/installation.md +17 -38
- data/docs/users/liquid_tag/argument_reference/crop.md +21 -36
- data/docs/users/liquid_tag/examples.md +13 -25
- data/docs/users/liquid_tag/index.md +1 -1
- data/docs/users/notes/{migration.md → migration_1.md} +1 -1
- data/docs/users/notes/migration_2.md +99 -0
- data/docs/users/presets/cropping.md +21 -22
- data/docs/users/presets/default.md +11 -3
- data/docs/users/presets/examples.md +77 -45
- data/docs/users/presets/fallback_image.md +1 -1
- data/docs/users/presets/html_attributes.md +1 -1
- data/docs/users/presets/image_formats.md +3 -3
- data/docs/users/presets/image_quality.md +70 -55
- data/docs/users/presets/index.md +78 -42
- data/docs/users/presets/link_source.md +1 -1
- data/docs/users/presets/media_queries.md +1 -1
- data/docs/users/presets/nomarkdown_override.md +1 -1
- data/docs/users/presets/pixel_ratio_srcsets.md +1 -1
- data/docs/users/presets/width_height_attributes.md +1 -1
- data/docs/users/presets/width_srcsets.md +61 -23
- data/docs/users/tutorial.md +97 -0
- data/jekyll_picture_tag.gemspec +33 -23
- data/lib/jekyll_picture_tag.rb +8 -6
- data/lib/jekyll_picture_tag/cache.rb +64 -3
- data/lib/jekyll_picture_tag/defaults/global.rb +18 -0
- data/lib/jekyll_picture_tag/defaults/presets.rb +57 -0
- data/lib/jekyll_picture_tag/images.rb +1 -0
- data/lib/jekyll_picture_tag/images/generated_image.rb +25 -63
- data/lib/jekyll_picture_tag/images/image_file.rb +90 -0
- data/lib/jekyll_picture_tag/images/img_uri.rb +3 -12
- data/lib/jekyll_picture_tag/images/source_image.rb +44 -9
- data/lib/jekyll_picture_tag/instructions.rb +70 -6
- data/lib/jekyll_picture_tag/instructions/children/config.rb +128 -0
- data/lib/jekyll_picture_tag/instructions/children/context.rb +24 -0
- data/lib/jekyll_picture_tag/instructions/children/params.rb +90 -0
- data/lib/jekyll_picture_tag/instructions/children/parsers.rb +41 -0
- data/lib/jekyll_picture_tag/instructions/children/preset.rb +182 -0
- data/lib/jekyll_picture_tag/instructions/parents/conditional_instruction.rb +69 -0
- data/lib/jekyll_picture_tag/instructions/parents/env_instruction.rb +29 -0
- data/lib/jekyll_picture_tag/output_formats/basic.rb +5 -17
- data/lib/jekyll_picture_tag/parsers.rb +5 -0
- data/lib/jekyll_picture_tag/{instructions → parsers}/arg_splitter.rb +1 -1
- data/lib/jekyll_picture_tag/parsers/configuration.rb +28 -0
- data/lib/jekyll_picture_tag/{instructions → parsers}/html_attributes.rb +1 -1
- data/lib/jekyll_picture_tag/parsers/preset.rb +43 -0
- data/lib/jekyll_picture_tag/{instructions → parsers}/tag_parser.rb +15 -12
- data/lib/jekyll_picture_tag/router.rb +35 -93
- data/lib/jekyll_picture_tag/srcsets/basic.rb +4 -10
- data/lib/jekyll_picture_tag/utils.rb +10 -20
- data/lib/jekyll_picture_tag/version.rb +1 -1
- data/readme.md +2 -0
- metadata +124 -106
- data/Dockerfile +0 -9
- data/docs/users/notes/input_checking.md +0 -6
- data/docs/users/presets/strip_metadata.md +0 -13
- data/install_imagemagick.sh +0 -23
- data/jekyll-picture-tag.gemspec +0 -52
- data/lib/jekyll-picture-tag.rb +0 -25
- data/lib/jekyll_picture_tag/cache/base.rb +0 -61
- data/lib/jekyll_picture_tag/cache/generated.rb +0 -20
- data/lib/jekyll_picture_tag/cache/source.rb +0 -19
- data/lib/jekyll_picture_tag/defaults/global.yml +0 -13
- data/lib/jekyll_picture_tag/defaults/presets.yml +0 -12
- data/lib/jekyll_picture_tag/instructions/configuration.rb +0 -121
- data/lib/jekyll_picture_tag/instructions/preset.rb +0 -122
- data/lib/jekyll_picture_tag/instructions/set.rb +0 -75
@@ -1,5 +1,5 @@
|
|
1
1
|
---
|
2
|
-
sort:
|
2
|
+
sort: 12
|
3
3
|
---
|
4
4
|
|
5
5
|
# Default preset
|
@@ -17,8 +17,16 @@ presets:
|
|
17
17
|
noscript: false
|
18
18
|
link_source: false
|
19
19
|
quality: 75
|
20
|
+
format_quality:
|
21
|
+
webp: 50
|
22
|
+
avif: 30
|
23
|
+
jp2: 30
|
24
|
+
strip_metadata: true
|
25
|
+
image_options:
|
26
|
+
avif:
|
27
|
+
compression: av1
|
28
|
+
speed: 8
|
20
29
|
data_sizes: true
|
21
|
-
|
30
|
+
keep: attention
|
22
31
|
dimension_attributes: false
|
23
|
-
strip_metadata: true
|
24
32
|
```
|
@@ -1,79 +1,111 @@
|
|
1
1
|
---
|
2
|
-
sort:
|
2
|
+
sort: 1
|
3
3
|
---
|
4
|
-
# Example
|
4
|
+
# Example presets
|
5
5
|
|
6
|
-
|
7
|
-
|
6
|
+
The following example media queries & presets (except for `default`) are built-in with a `jpt-`
|
7
|
+
prefix. For example, the `desktop` media query below can be used with `jpt-desktop`, and the `webp`
|
8
|
+
preset below can be used with `jpt-webp`.
|
8
9
|
|
9
10
|
```yaml
|
10
11
|
# _data/picture.yml
|
11
12
|
|
13
|
+
# These are used in several places. You likely want to enter whatever CSS media queries your site
|
14
|
+
# uses here.
|
12
15
|
media_queries:
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
16
|
+
mobile: 'max-width: 480px'
|
17
|
+
tablet: 'max-width: 768'
|
18
|
+
laptop: 'max-width: 1024px'
|
19
|
+
desktop: 'max-width: 1200'
|
20
|
+
wide: 'min-width: 1201'
|
18
21
|
|
19
22
|
presets:
|
23
|
+
# This entry is purely an example. It is not the default JPT preset, nor is it available as a
|
24
|
+
# built-in.
|
20
25
|
default:
|
21
|
-
|
22
|
-
|
23
|
-
dimension_attributes: true # Page reflow begone!
|
24
|
-
|
25
|
-
formats: [webp, original] # Must be an array, and order matters.
|
26
|
+
formats: [webp, original] # Order matters!
|
27
|
+
widths: [200, 400, 800, 1200, 1600] # Image widths, in pixels.
|
26
28
|
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
29
|
+
# The sizes attribute is both important, and impossible to offer good defaults for. You need to
|
30
|
+
# learn about it. Short version: Web browsers parse web pages line-by-line. When they run into
|
31
|
+
# an external asset they must download, they start that process immediately, without waiting to
|
32
|
+
# finish rendering the page. This means that at the point in time when the browser must decide
|
33
|
+
# which image to download, it has no clue how large that image will be on the page. The sizes
|
34
|
+
# attribute is how we tell it.
|
35
|
+
#
|
36
|
+
# If you do not provide this, the web browser will assume the image is 100vw (100% the width of
|
37
|
+
# the viewport.)
|
38
|
+
#
|
39
|
+
# This doesn't have to be pixel-perfect, just close enough for the browser to make a good
|
40
|
+
# choice. Keys are media queries defined above, values are how large the image will be when
|
41
|
+
# that media query is true. You can't use % (percentage width of the parent container) for the
|
42
|
+
# same reason we have to do this at all.
|
43
|
+
sizes:
|
44
|
+
mobile: calc(100vw - 16px)
|
34
45
|
tablet: 80vw
|
46
|
+
|
47
|
+
# Size is unconditional; provided either after all conditional sizes (above) or alone. If you
|
48
|
+
# only have a 'size' (no 'sizes'), and it's a constant (px, em, or rem), you should use a
|
49
|
+
# pixel-ratio srcset.
|
35
50
|
size: 800px
|
36
51
|
|
37
|
-
|
38
|
-
|
52
|
+
link_source: true # wrap images in a link to the original source image.
|
53
|
+
dimension_attributes: true # Page reflow begone!
|
39
54
|
|
55
|
+
# You can add any HTML attribute you like, to any HTML element which JPT creates:
|
40
56
|
attributes:
|
57
|
+
# parent refers to the outermost tag; <picture> if it's present, otherwise the <img>.
|
41
58
|
parent: 'data-downloadable="true"'
|
42
59
|
picture: 'class="awesome" data-volume="11"'
|
43
60
|
img: 'class="some-other-class"'
|
44
61
|
a: 'class="image-link"'
|
45
62
|
|
46
|
-
#
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
63
|
+
# You can use this as jpt-webp. All following presets follow the same pattern.
|
64
|
+
webp:
|
65
|
+
formats: [webp, original]
|
66
|
+
|
67
|
+
# Avif is the new hotness coming down the pipe. Browser support is bad and they are slow to
|
68
|
+
# generate, but you get good file sizes even compared to webp of similar quality.
|
69
|
+
avif:
|
70
|
+
formats: [avif, webp, original]
|
71
|
+
|
72
|
+
# Your build times will suffer, but everyone is happy.
|
73
|
+
loaded:
|
74
|
+
formats: [avif, jp2, webp, original]
|
75
|
+
dimension_attributes: true
|
76
|
+
|
77
|
+
# This is an example of how you would create a 'multiplier' based srcset; useful when an image
|
78
|
+
# will always be the same size on all screens (icons, graphics, thumbnails, etc), but you'd like
|
79
|
+
# to supply higher resolution images to devices with higher pixel ratios.
|
80
|
+
thumbnail:
|
81
|
+
base_width: 250 # How wide the 1x image should be.
|
82
|
+
pixel_ratios: [1, 1.5, 2] # Which multipliers to target.
|
83
|
+
fallback_width: 250 # The default is 800, which is probably too big.
|
84
|
+
formats: [webp, original]
|
54
85
|
attributes:
|
55
|
-
|
86
|
+
picture: 'class="thumbnail"'
|
56
87
|
|
57
|
-
#
|
58
|
-
|
88
|
+
# Another pixel-ratio example.
|
89
|
+
avatar:
|
90
|
+
# Say your layout demands a square:
|
91
|
+
crop: 1:1
|
92
|
+
base_width: 100
|
93
|
+
pixel_ratios: [1, 1.5, 2]
|
94
|
+
fallback_width: 100,
|
95
|
+
|
96
|
+
# Here's an example of how you'd configure JPT to work with something like lazyload:
|
97
|
+
# https://github.com/verlok/lazyload
|
98
|
+
# Remember to add a sizes attribute, unless it's close to 100vw all the time.
|
59
99
|
lazy:
|
60
100
|
markup: data_auto
|
61
101
|
formats: [webp, original]
|
62
|
-
widths: [200, 400, 600, 800]
|
63
102
|
noscript: true # add a fallback image inside a <noscript> tag.
|
64
|
-
attributes:
|
65
|
-
|
103
|
+
attributes:
|
104
|
+
parent: class="lazy"
|
66
105
|
|
67
|
-
# This is an example of how you'd get generated image
|
68
|
-
# else.
|
106
|
+
# This is an example of how you'd get a single generated image, a URL, and nothing else.
|
69
107
|
direct:
|
70
108
|
markup: direct_url
|
71
109
|
fallback_format: webp
|
72
110
|
fallback_width: 600
|
73
|
-
|
74
|
-
# Here's a naked srcset. Doesn't even give you the surrounding quotes.
|
75
|
-
srcset:
|
76
|
-
markup: naked_srcset
|
77
|
-
formats: [webp] # must be an array, even if it only has one item
|
78
|
-
|
79
111
|
```
|
@@ -1,12 +1,12 @@
|
|
1
1
|
---
|
2
|
-
sort:
|
2
|
+
sort: 3
|
3
3
|
---
|
4
4
|
|
5
5
|
# Image Formats
|
6
6
|
|
7
|
-
_Format:_ `
|
7
|
+
_Format:_ `formats: [format1, format2, (...)]`
|
8
8
|
|
9
|
-
_Example:_ `
|
9
|
+
_Example:_ `formats: [webp, original]`
|
10
10
|
|
11
11
|
_Default_: `original`
|
12
12
|
|
@@ -1,46 +1,54 @@
|
|
1
1
|
---
|
2
|
-
sort:
|
2
|
+
sort: 7
|
3
3
|
---
|
4
4
|
|
5
|
-
# Image Quality
|
5
|
+
# Image Quality & Options
|
6
6
|
|
7
|
-
Image quality
|
8
|
-
and output format.
|
7
|
+
Image quality is set per-format, using `format_quality`.
|
9
8
|
|
10
|
-
|
11
|
-
For lossless webp images, set quality to 100.
|
12
|
-
```
|
9
|
+
## Constant Quality
|
13
10
|
|
11
|
+
_Format:_
|
14
12
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
13
|
+
```yaml
|
14
|
+
format_quality:
|
15
|
+
(format): 0 <= integer <= 100
|
16
|
+
(...)
|
17
|
+
```
|
20
18
|
|
21
|
-
_Example:_
|
19
|
+
_Example:_
|
22
20
|
|
23
|
-
|
21
|
+
```yaml
|
22
|
+
format_quality:
|
23
|
+
jpg: 75
|
24
|
+
png: 65
|
25
|
+
webp: 55
|
26
|
+
```
|
24
27
|
|
25
|
-
|
28
|
+
_Defaults:_
|
26
29
|
|
27
|
-
|
30
|
+
- webp - 50
|
31
|
+
- avif - 30
|
32
|
+
- jp2 - 30
|
33
|
+
- all others - 75
|
28
34
|
|
29
|
-
|
35
|
+
## Variable Quality
|
30
36
|
|
31
|
-
```yaml
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
37
|
+
```yaml
|
38
|
+
format_quality:
|
39
|
+
(format):
|
40
|
+
(image width): (quality setting)
|
41
|
+
(image width): (quality setting)
|
42
|
+
```
|
36
43
|
|
37
|
-
_Example:_
|
44
|
+
_Example:_
|
38
45
|
|
39
|
-
```yaml
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
46
|
+
```yaml
|
47
|
+
format_quality:
|
48
|
+
jpg:
|
49
|
+
1000: 65
|
50
|
+
300: 100
|
51
|
+
```
|
44
52
|
|
45
53
|
Set a variable image quality, based on image width. Provide exactly 2 image widths and associated
|
46
54
|
quality settings. Quality will be calculated as follows:
|
@@ -59,47 +67,54 @@ sacrificing image quality for low-density screens. Taking the example settings a
|
|
59
67
|
* A 200px image will use a quality of 100.
|
60
68
|
* A 500px image will use a quality of 90.
|
61
69
|
|
70
|
+
## Strip Metadata
|
71
|
+
|
72
|
+
_Format:_ `strip_metadata: (true|false)`
|
73
|
+
|
74
|
+
_Example:_ `strip_metadata: false`
|
75
|
+
|
76
|
+
_Default:_ `true`
|
62
77
|
|
63
|
-
|
78
|
+
Remove EXIF data, which can save a few tens of kilobytes per image. This is set globally, not
|
79
|
+
per-format.
|
80
|
+
|
81
|
+
## Image Format Options
|
64
82
|
|
65
83
|
_Format:_
|
66
84
|
|
67
85
|
```yaml
|
68
|
-
|
69
|
-
|
86
|
+
image_options:
|
87
|
+
format:
|
88
|
+
setting1: value
|
89
|
+
setting2: value
|
90
|
+
(...)
|
70
91
|
(...)
|
71
92
|
```
|
72
93
|
|
73
|
-
```yaml
|
74
|
-
format_quality:
|
75
|
-
(format):
|
76
|
-
(image width): (quality setting)
|
77
|
-
(image width): (quality setting)
|
78
|
-
```
|
79
|
-
|
80
|
-
|
81
94
|
_Example:_
|
82
95
|
|
83
96
|
```yaml
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
webp: 55
|
97
|
+
image_options:
|
98
|
+
webp:
|
99
|
+
lossless: true
|
88
100
|
```
|
89
101
|
|
102
|
+
_Default:_
|
103
|
+
|
90
104
|
```yaml
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
(...)
|
105
|
+
image_options:
|
106
|
+
avif:
|
107
|
+
compression: av1
|
108
|
+
speed: 8
|
96
109
|
```
|
97
110
|
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
111
|
+
Control the write options passed to libvips for each image output format. To see a list of options
|
112
|
+
available for a given image format, search for the method `vips_(format)save` in
|
113
|
+
[this](https://libvips.github.io/libvips/API/current/VipsForeignSave.html) API documentation. For
|
114
|
+
example, png options can be found by searching for `vips_pngsave()`, leading
|
115
|
+
[here](https://libvips.github.io/libvips/API/current/VipsForeignSave.html#vips-pngsave). See the
|
116
|
+
optional arguments.
|
104
117
|
|
105
|
-
|
118
|
+
For all formats, note that
|
119
|
+
- `Q:` (quality) is handled by the settings above.
|
120
|
+
- `strip` is handled by the `strip_metadata` setting documented above.
|
data/docs/users/presets/index.md
CHANGED
@@ -14,26 +14,6 @@ the `_data/` directory as well.
|
|
14
14
|
Any settings which are specific to particular markup formats are documented on
|
15
15
|
their respective markup format page.
|
16
16
|
|
17
|
-
## Required Knowledge
|
18
|
-
|
19
|
-
If you don't know the difference between resolution switching and art direction,
|
20
|
-
stop now and learn responsive images. Ideally, write a few yourself until you
|
21
|
-
understand them.
|
22
|
-
|
23
|
-
Here are some good guides:
|
24
|
-
|
25
|
-
* [MDN Responsive Images guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
|
26
|
-
* [CSS Tricks Guide to Reponsive Images](https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/)
|
27
|
-
* [Cloud 4 - Responsive Images 101](https://cloudfour.com/thinks/responsive-images-101-definitions/)
|
28
|
-
|
29
|
-
## Media Queries
|
30
|
-
|
31
|
-
**Media queries are not presets**, but they are used when writing them. They are
|
32
|
-
defined in `_data/picture.yml` alongside presets. More information
|
33
|
-
[here](media_queries).
|
34
|
-
|
35
|
-
## Presets
|
36
|
-
|
37
17
|
_General Format:_
|
38
18
|
|
39
19
|
```yaml
|
@@ -65,37 +45,93 @@ presets:
|
|
65
45
|
noscript: true
|
66
46
|
```
|
67
47
|
|
68
|
-
|
69
|
-
|
70
|
-
|
48
|
+
## Media Queries
|
49
|
+
|
50
|
+
**Media queries are not presets**, but they are used when writing them. They are
|
51
|
+
defined in `_data/picture.yml` alongside presets. They look like this:
|
52
|
+
|
53
|
+
```yaml
|
54
|
+
# _data/picture.yml
|
71
55
|
|
72
|
-
|
73
|
-
|
74
|
-
|
56
|
+
media_queries:
|
57
|
+
(name): '(media query)'
|
58
|
+
(name): '(media query)'
|
59
|
+
(name): '(media query)'
|
60
|
+
```
|
75
61
|
|
76
|
-
|
77
|
-
contain a `.` (period). You can create as many as you like.
|
62
|
+
Example:
|
78
63
|
|
79
|
-
```
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
64
|
+
```yaml
|
65
|
+
media_queries:
|
66
|
+
full_width: 'min-width: 901px'
|
67
|
+
tablet: 'min-width: 601px'
|
68
|
+
mobile: 'max-width: 600px'
|
84
69
|
```
|
85
70
|
|
86
|
-
|
71
|
+
More information [here](media_queries).
|
87
72
|
|
88
|
-
|
89
|
-
documented [here](markup_formats).
|
73
|
+
## How to write a preset
|
90
74
|
|
91
|
-
|
75
|
+
### 0. Pick a name
|
76
|
+
|
77
|
+
* Preset names should be a single word, and they can't contain periods.
|
78
|
+
* `default` is used when you don't specify one in a liquid tag.
|
79
|
+
* Anything beginning with `jpt-` is off limits.
|
80
|
+
|
81
|
+
### 1. Pick a Markup Format
|
82
|
+
|
83
|
+
The high level, overall markup format is controlled with the `markup:` setting, documented
|
84
|
+
[here](markup_formats). You probably want the default setting of `auto`, unless you're doing some
|
85
|
+
form of post-processing.
|
86
|
+
|
87
|
+
If you have a lot of images below-the-fold, consider setting up lazy-loading with an appropriate
|
88
|
+
javascript library (there are tons) and `data_auto`.
|
89
|
+
|
90
|
+
### 2. Choose a srcset format.
|
92
91
|
|
93
|
-
For images that are different sizes on different screens (most images), use a
|
94
|
-
|
92
|
+
For images that are different sizes on different screens (most images), use a [width-based
|
93
|
+
srcset](width_srcsets) (which is the default). When using this format, it's important to create a
|
94
|
+
sizes attribute, documented at the link above.
|
95
|
+
|
96
|
+
Use a [pixel-ratio srcset](pixel_ratio_srcsets) when the image will always be the same size,
|
97
|
+
regardless of screen width (thumbnails, avatars, icons, etc).
|
98
|
+
|
99
|
+
### 3. Choose a set of image widths.
|
100
|
+
|
101
|
+
For width-based srcsets, set `widths:`. For pixel-ratio srcsets, set `base_width:` and
|
102
|
+
`pixel_ratios:`. You want 3-6 sizes that cover a wide range of devices.
|
103
|
+
|
104
|
+
### 4. Choose a set of image formats.
|
95
105
|
|
96
|
-
|
97
|
-
the same size, regardless of screen width (thumbnails and icons).
|
106
|
+
Accomplish this by setting `formats: [format1, format2, etc...]`
|
98
107
|
|
99
|
-
|
108
|
+
* `webp` has [broad support](https://caniuse.com/?search=webp) and is an obvious choice.
|
109
|
+
* `avif` has [bad](https://caniuse.com/?search=avif) (but improving) support, and for some reason is slow to generate, but gets better
|
110
|
+
file sizes than webp.
|
111
|
+
* `jp2` is [Apple's baby](https://caniuse.com/?search=jp2).
|
112
|
+
* `original` spits out whatever you put in.
|
113
|
+
|
114
|
+
Order matters; browsers will use the first one they support.
|
115
|
+
|
116
|
+
* `[webp, original]` is a good compromise of build resources, support, and performance.
|
117
|
+
* `[webp, jp2, original]` brings Safari users along for the ride.
|
118
|
+
* `[avif, original]` If you don't care about browsers that aren't chrome, or build time.
|
119
|
+
* `[avif, webp, jp2, original]` might be overkill, but it keeps everyone happy.
|
120
|
+
|
121
|
+
### 5. Turn on dimension attributes.
|
122
|
+
|
123
|
+
This step prevents page reflow on image load (especially when lazy loading), but requires some prep.
|
124
|
+
|
125
|
+
1. Make sure your CSS is correct. You need something like `width: 100%` and `height: auto` (which
|
126
|
+
is why they aren't turned on by default.) Without this step, you'll get crazy sizes and/or
|
127
|
+
stretched images.
|
128
|
+
2. Set `dimension_attributes: true`
|
129
|
+
|
130
|
+
### 6. Make any other changes you need
|
131
|
+
|
132
|
+
Here's a list of all preset settings available:
|
100
133
|
|
101
134
|
{% include list.liquid %}
|
135
|
+
|
136
|
+
(Note that the `data_*` output formats have a few special options, documented on their respective
|
137
|
+
pages.)
|