jekyll_picture_tag 1.11.0 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (124) hide show
  1. checksums.yaml +4 -4
  2. data/.envrc +4 -0
  3. data/.github/workflows/code-checks.yml +33 -0
  4. data/.gitignore +3 -0
  5. data/.rubocop.yml +31 -3
  6. data/.ruby-version +1 -1
  7. data/docs/.envrc +2 -0
  8. data/docs/Gemfile +4 -2
  9. data/docs/Gemfile.lock +14 -12
  10. data/docs/_config.yml +6 -10
  11. data/docs/devs/contributing/code.md +54 -0
  12. data/docs/devs/contributing/docs.md +31 -0
  13. data/docs/devs/contributing/index.md +15 -0
  14. data/docs/devs/contributing/setup.md +33 -0
  15. data/docs/devs/contributing/testing.md +23 -0
  16. data/docs/devs/index.md +7 -0
  17. data/docs/devs/releases.md +118 -0
  18. data/docs/index.md +67 -31
  19. data/docs/logo.png +0 -0
  20. data/docs/logo.svg +880 -0
  21. data/docs/users/configuration/directories.md +34 -0
  22. data/docs/users/configuration/disable.md +24 -0
  23. data/docs/users/configuration/fast_build.md +28 -0
  24. data/docs/users/configuration/ignore_missing.md +23 -0
  25. data/docs/users/configuration/index.md +29 -0
  26. data/docs/users/configuration/kramdown_fix.md +20 -0
  27. data/docs/users/configuration/suppress_warnings.md +16 -0
  28. data/docs/users/configuration/urls.md +69 -0
  29. data/docs/users/getting_started.md +55 -0
  30. data/docs/users/index.md +7 -0
  31. data/docs/users/installation.md +32 -0
  32. data/docs/users/liquid_tag/argument_reference/alternate_images.md +18 -0
  33. data/docs/users/liquid_tag/argument_reference/attributes.md +42 -0
  34. data/docs/users/liquid_tag/argument_reference/base_image.md +12 -0
  35. data/docs/users/liquid_tag/argument_reference/crop.md +33 -0
  36. data/docs/users/liquid_tag/argument_reference/link.md +16 -0
  37. data/docs/users/liquid_tag/argument_reference/preset.md +17 -0
  38. data/docs/users/liquid_tag/argument_reference/readme.md +9 -0
  39. data/docs/users/liquid_tag/examples.md +81 -0
  40. data/docs/users/liquid_tag/index.md +31 -0
  41. data/docs/users/notes/git_lfs.md +7 -0
  42. data/docs/users/notes/github_pages.md +5 -0
  43. data/docs/users/notes/html_attributes.md +5 -0
  44. data/docs/users/notes/index.md +6 -0
  45. data/docs/users/notes/kramdown_bug.md +41 -0
  46. data/docs/users/notes/managing_images.md +21 -0
  47. data/docs/{migration.md → users/notes/migration_1.md} +1 -1
  48. data/docs/users/notes/migration_2.md +99 -0
  49. data/docs/users/presets/cropping.md +60 -0
  50. data/docs/users/presets/default.md +32 -0
  51. data/docs/users/presets/examples.md +111 -0
  52. data/docs/users/presets/fallback_image.md +28 -0
  53. data/docs/users/presets/html_attributes.md +26 -0
  54. data/docs/users/presets/image_formats.md +21 -0
  55. data/docs/users/presets/image_quality.md +120 -0
  56. data/docs/users/presets/index.md +75 -0
  57. data/docs/users/presets/link_source.md +16 -0
  58. data/docs/users/presets/markup_formats/fragments.md +48 -0
  59. data/docs/users/presets/markup_formats/javascript_friendly.md +57 -0
  60. data/docs/users/presets/markup_formats/readme.md +43 -0
  61. data/docs/users/presets/markup_formats/standard_html.md +25 -0
  62. data/docs/users/presets/media_queries.md +36 -0
  63. data/docs/users/presets/nomarkdown_override.md +17 -0
  64. data/docs/users/presets/pixel_ratio_srcsets.md +32 -0
  65. data/docs/users/presets/quality_width_graph.png +0 -0
  66. data/docs/users/presets/width_height_attributes.md +34 -0
  67. data/docs/users/presets/width_srcsets.md +123 -0
  68. data/docs/users/presets/writing_presets.md +65 -0
  69. data/docs/users/tutorial.md +97 -0
  70. data/jekyll_picture_tag.gemspec +38 -23
  71. data/lib/jekyll_picture_tag.rb +11 -10
  72. data/lib/jekyll_picture_tag/cache.rb +64 -3
  73. data/lib/jekyll_picture_tag/defaults/global.rb +18 -0
  74. data/lib/jekyll_picture_tag/defaults/presets.rb +57 -0
  75. data/lib/jekyll_picture_tag/images.rb +4 -0
  76. data/lib/jekyll_picture_tag/images/generated_image.rb +92 -0
  77. data/lib/jekyll_picture_tag/images/image_file.rb +90 -0
  78. data/lib/jekyll_picture_tag/{img_uri.rb → images/img_uri.rb} +3 -10
  79. data/lib/jekyll_picture_tag/{source_image.rb → images/source_image.rb} +44 -9
  80. data/lib/jekyll_picture_tag/instructions.rb +70 -6
  81. data/lib/jekyll_picture_tag/instructions/children/config.rb +128 -0
  82. data/lib/jekyll_picture_tag/instructions/children/context.rb +24 -0
  83. data/lib/jekyll_picture_tag/instructions/children/params.rb +90 -0
  84. data/lib/jekyll_picture_tag/instructions/children/parsers.rb +41 -0
  85. data/lib/jekyll_picture_tag/instructions/children/preset.rb +182 -0
  86. data/lib/jekyll_picture_tag/instructions/parents/conditional_instruction.rb +69 -0
  87. data/lib/jekyll_picture_tag/instructions/parents/env_instruction.rb +29 -0
  88. data/lib/jekyll_picture_tag/output_formats/basic.rb +5 -17
  89. data/lib/jekyll_picture_tag/parsers.rb +5 -0
  90. data/lib/jekyll_picture_tag/{instructions → parsers}/arg_splitter.rb +1 -1
  91. data/lib/jekyll_picture_tag/parsers/configuration.rb +28 -0
  92. data/lib/jekyll_picture_tag/{instructions → parsers}/html_attributes.rb +1 -1
  93. data/lib/jekyll_picture_tag/parsers/preset.rb +43 -0
  94. data/lib/jekyll_picture_tag/{instructions → parsers}/tag_parser.rb +15 -12
  95. data/lib/jekyll_picture_tag/router.rb +35 -93
  96. data/lib/jekyll_picture_tag/srcsets/basic.rb +4 -10
  97. data/lib/jekyll_picture_tag/utils.rb +24 -20
  98. data/lib/jekyll_picture_tag/version.rb +1 -1
  99. data/readme.md +15 -13
  100. metadata +215 -93
  101. data/.travis.yml +0 -8
  102. data/Dockerfile +0 -9
  103. data/docs/_layouts/directory.html +0 -32
  104. data/docs/assets/style.css +0 -31
  105. data/docs/contributing.md +0 -109
  106. data/docs/example_presets.md +0 -116
  107. data/docs/global_configuration.md +0 -173
  108. data/docs/installation.md +0 -45
  109. data/docs/notes.md +0 -91
  110. data/docs/output.md +0 -63
  111. data/docs/presets.md +0 -391
  112. data/docs/releases.md +0 -70
  113. data/docs/usage.md +0 -157
  114. data/jekyll-picture-tag.gemspec +0 -52
  115. data/lib/jekyll-picture-tag.rb +0 -25
  116. data/lib/jekyll_picture_tag/cache/base.rb +0 -59
  117. data/lib/jekyll_picture_tag/cache/generated.rb +0 -20
  118. data/lib/jekyll_picture_tag/cache/source.rb +0 -19
  119. data/lib/jekyll_picture_tag/defaults/global.yml +0 -11
  120. data/lib/jekyll_picture_tag/defaults/presets.yml +0 -11
  121. data/lib/jekyll_picture_tag/generated_image.rb +0 -140
  122. data/lib/jekyll_picture_tag/instructions/configuration.rb +0 -121
  123. data/lib/jekyll_picture_tag/instructions/preset.rb +0 -103
  124. data/lib/jekyll_picture_tag/instructions/set.rb +0 -71
@@ -0,0 +1,16 @@
1
+ ---
2
+ sort: 5
3
+ ---
4
+
5
+ # Link
6
+
7
+ _Format:_ `--link (some url)`
8
+
9
+ _Examples_: `--link https://example.com`, `--link /blog/some_post/`
10
+
11
+ Wrap the image in an anchor tag, with the `href` attribute set to whatever
12
+ value you give it. This will override automatic source image linking, if you
13
+ have enabled it.
14
+
15
+ **Note**: If you get either mangled HTML or extra {::nomarkdown} tags when
16
+ using this, read [here]({{ site.baseurl }}/users/notes/kramdown_bug).
@@ -0,0 +1,17 @@
1
+ ---
2
+ sort: 1
3
+ ---
4
+
5
+ # Preset
6
+
7
+ Select a [preset]({{ site.baseurl }}/users/presets), or omit to
8
+ use the `default` preset. A preset is a collection of settings which determines
9
+ nearly everything about JPT's output, from the image formats used to the exact
10
+ format your final HTML will take. Think of it like a recipe or a blueprint; JPT
11
+ will take the information provided in the liquid tag, combine it with the
12
+ settings written in the preset, and use it to craft your images and markup.
13
+
14
+ If the `preset` is omitted then default settings will be used, in the simplest
15
+ case resulting in an `<img>` tag containing a srcset pointing to your newly
16
+ generated images. You are free to override the `default` preset and define
17
+ your own settings, giving full flexibility in what JPT will create.
@@ -0,0 +1,9 @@
1
+ ---
2
+ sort: 3
3
+ ---
4
+
5
+ # Argument Reference
6
+
7
+ Given in order:
8
+
9
+ {% include list.liquid %}
@@ -0,0 +1,81 @@
1
+ ---
2
+ ---
3
+ # Examples
4
+
5
+ {% raw %}
6
+
7
+ * Basic form, will use the preset named 'default':
8
+ ```
9
+ {% picture example.jpg %}
10
+ ```
11
+
12
+ * Include alt text:
13
+ ```
14
+ {% picture example.jpg --alt Alt Text %}
15
+ ```
16
+
17
+ * Select a `preset` (defined in `_data/picture.yml`:
18
+ ```
19
+ {% picture my_preset example.jpg %}
20
+ ```
21
+
22
+ * Show different images on different devices. (Note that `mobile` must be set
23
+ to some media query under `media_queries:` in `_data/picture.yml`.
24
+ ```
25
+ {% picture example.jpg mobile: example_cropped.jpg %}
26
+ ```
27
+
28
+ * Use liquid variables:
29
+ ```
30
+ {% picture "{{ page.some_liquid_variable }}" %}
31
+ ```
32
+
33
+ * Select the blog_index preset, use liquid variables, and wrap the image in an
34
+ anchor tag (link):
35
+ ```
36
+ {% picture blog_index "{{ post.image }}" --link {{ post.url }} %}
37
+ ```
38
+
39
+ **Note:** If the image path is coming from a liquid variable then you should guard against spaces
40
+ by wrapping the inner tag in quotes, as in the previous examples.
41
+
42
+ * Add arbitrary HTML attributes:
43
+ ```
44
+ {% picture example.jpg --picture class="some classes" --img id="example" %}
45
+ ```
46
+
47
+ * Crop to a 16:9 aspect ratio (Will keep the part of the image "most likely to
48
+ draw human attention"):
49
+ ```
50
+ {% picture example.jpg 16:9 %}
51
+ ```
52
+
53
+ * Crop to a 1:1 aspect ratio, keeping the middle, with alt text:
54
+ ```
55
+ {% picture thumbnail example.jpg 1:1 center --alt Example Image %}
56
+ ```
57
+
58
+ * Crop the same image multiple times:
59
+ ```
60
+ {% picture example.jpg 16:9 tablet: example.jpg 4:3 mobile: example.jpg 1:1 %}
61
+ ```
62
+
63
+ * Use filenames with spaces:
64
+ ```
65
+ {% picture "some example.jpg" mobile: other\ example.jpg %}
66
+ ```
67
+
68
+ * Use line breaks to make a complicated tag manageable:
69
+ ```
70
+ {%
71
+ picture
72
+ hero
73
+ example.jpg 16:9 entropy
74
+ tablet: example2.jpg 3:2
75
+ mobile: example3.jpg 1:1
76
+ --alt Happy Puppy
77
+ --picture class="hero"
78
+ --link /
79
+ %}
80
+ ```
81
+ {% endraw %}
@@ -0,0 +1,31 @@
1
+ ---
2
+ sort: 2
3
+ ---
4
+
5
+ # Tag Usage
6
+
7
+ This section describes how to use JPT's liquid tag ({% raw %} `{% picture (...)
8
+ %}` {% endraw %}); what options it takes and what kind of information you can pass
9
+ through it to influence the the final HTML and generated images.
10
+
11
+ ## Format
12
+
13
+ {% raw %}
14
+ `{% picture [preset] (image) [crop] [alternate images & crops] [attributes] %}`
15
+ {% endraw %}
16
+
17
+ The only required argument is the base image. Line breaks and extra spaces are
18
+ fine, and you can use liquid variables anywhere.
19
+
20
+ * `preset` - Select a recipe/blueprint from the ones you have defined in
21
+ `presets`. Will use `default` if not specified.
22
+
23
+ * `(image)` - required.
24
+
25
+ * `crop` - Aspect ratio & keep settings.
26
+
27
+ * `alternate images & crops` - Art Direction; show different images on different
28
+ devices. Give in order of ascending specificity.
29
+
30
+ * `attributes` - Add css classes, data-attributes, or wrap the whole thing in an
31
+ anchor tag.
@@ -0,0 +1,7 @@
1
+ # Git LFS
2
+
3
+ I'm Putting this here because it bit me: If you want to use git LFS, make sure that your hosting
4
+ provider makes those images available during the build process. Netlify, for example, does not.
5
+ You won't find this out until you have gone through the entire migration process and try to deploy
6
+ for the first time.
7
+
@@ -0,0 +1,5 @@
1
+ # Github Pages?
2
+
3
+ Github Pages only allows a very short whitelist of plugins, which sadly does not include JPT. You
4
+ can either run it locally, then commit and push the generated files (rather than the source
5
+ files), or just host it some other way. I recommend Netlify.
@@ -0,0 +1,5 @@
1
+ # HTML attributes
2
+
3
+ Jekyll Picture Tag has comprehensive attribute support for all generated HTML. You can add
4
+ attributes both through the [liquid tag]({{ site.baseurl }}/usage), and the [preset]({{
5
+ site.baseurl }}/presets) (scroll down a bit).
@@ -0,0 +1,6 @@
1
+ ---
2
+ sort: 5
3
+ ---
4
+ # Notes and FAQ
5
+
6
+ {% include list.liquid %}
@@ -0,0 +1,41 @@
1
+ # Extra {::nomarkdown} tags or mangled HTML?
2
+
3
+ ## TLDR up front
4
+
5
+ There's a bug involving `<picture>` tags wrapped in `<a>` tags which is not in
6
+ my power to fix.
7
+
8
+ * If you're getting extra `{::nomarkdown}` tags floating around your images, add `nomarkdown:
9
+ false` to either the relevant preset or under `picture` in `_config.yml`.
10
+
11
+ * If you're getting mangled HTML when trying to wrap images with anchor tags, add `nomarkdown:
12
+ true` to the preset.
13
+
14
+ ## What's going on here:
15
+
16
+ Kramdown is Jekyll's default markdown parser. Kramdown gets grumpy when you give it a block level
17
+ element (such as a `<picture>`) surrounded by a span level element (such as an `<a>`), and horribly
18
+ mangles it. The fix for this is to tell Kramdown to chill with a `{::nomarkdown}..{:/nomarkdown}`
19
+ wrapper.
20
+
21
+ Jekyll Picture Tag can be called from many different places: a markdown file, an HTML file, an HTML
22
+ layout for a markdown file, and an HTML include, to name a few. JPT tries its best to determine
23
+ whether its output will be parsed by Kramdown or not, but Jekyll itself doesn't make this
24
+ particularly easy which results in some false positives. (The one I'm most aware of is when a
25
+ markdown file uses an HTML layout which includes a picture tag.)
26
+
27
+ Unfortunately, I don't see an easy way to fix this. We've gotten this far mostly by trial and error.
28
+ I'll continue to work on improving the autodetection, but you can override this behavior explicitly.
29
+
30
+ ## The fix:
31
+
32
+ By default, JPT will add a `{::nomarkdown}` tag if all of the following are true:
33
+ * It thinks it's called from a markdown page
34
+ * The image will be wrapped in an anchor tag (i.e. `link_source_image:` or a `--link` parameter)
35
+ * This behavior hasn't been explicitly disabled.
36
+
37
+ You can disable nomarkdown tags globally by setting `nomarkdown: false` under the `picture:` key in
38
+ `_config.yml`.
39
+
40
+ You can enable or disable markdown tags per preset by adding `nomarkdown: true|false` to them.
41
+ **This setting overrides everything else, both JPT autodetection and the global setting.**
@@ -0,0 +1,21 @@
1
+ # Managing Generated Images
2
+
3
+ Jekyll Picture Tag creates resized versions of your images when you build the
4
+ site. It uses a caching system to speed up site compilation, and re-uses images
5
+ as much as possible. Filenames take the following format:
6
+
7
+ `(original name without extension)-(width)-(id-string).(filetype)`
8
+
9
+ Try to use a base image that is larger than the largest resized image you need.
10
+ Jekyll Picture Tag will warn you if a base image is too small, and won't upscale
11
+ images.
12
+
13
+ By specifying a `source` directory that is ignored by Jekyll you can prevent
14
+ huge base images from being copied to the compiled site. For example, `source:
15
+ assets/images/_fullsize` and `output: generated` will result in a compiled site
16
+ that contains resized images but not the originals. Note that this will break
17
+ source image linking, if you wish to enable it. (Can't link to images that
18
+ aren't public!)
19
+
20
+ The `output` directory is never deleted by Jekyll. You may want to empty it once
21
+ in awhile, to clear out unused images.
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  ---
3
- # Migrating from versions < 1.0
3
+ # Migrating from 0.x to 1.x
4
4
 
5
5
  This document details the changes from previous versions (Everything before 1.0), and how to migrate
6
6
  an existing site to the new version. It won't be updated to reflect new features -- it simply
@@ -0,0 +1,99 @@
1
+ ---
2
+ ---
3
+ # Migrating from 1.x to 2.x
4
+
5
+ There are a few breaking changes from 1.x versions, but they've been minimized and hopefully they
6
+ won't affect you too badly. This is a guide to transitioning an existing site; We don't go into all
7
+ the new features here, except where they replace or modify existing ones.
8
+
9
+ - For easy skimming, anything with a bullet point (like this line) is something you need to
10
+ check/do.
11
+
12
+ ## Libvips
13
+
14
+ - Install Libvips, both in development and production. Any reasonably recent version will do.
15
+
16
+ We still fall back to ImageMagick when Vips doesn't support a given image format, so there's no
17
+ reason to uninstall it. However, we no longer require version 7. Version 6+ is fine, which makes
18
+ deployments involving Ubuntu much easier.
19
+
20
+ ## Jekyll 4.0+
21
+
22
+ - Update to Jekyll 4.x
23
+
24
+ We're removing support for versions of Jekyll before 4.0. I did it inadvertently awhile ago with the
25
+ fast_build setting, now it's official. If this causes you a great deal of pain, speak up and we'll
26
+ look into supporting older versions.
27
+
28
+ ## Ruby 2.6+
29
+
30
+ - Ensure you're running Ruby 2.6 or later.
31
+
32
+ While Jekyll supports 2.4, it's officialy EOL and 2.5 (our previous target) is in security
33
+ maintenance only. Since I want major version releases to be as rare as possible, we're making this
34
+ move now. Again, speak up if this causes a great deal of pain.
35
+
36
+ ## Image quality & write options.
37
+
38
+ - If you have set `quality:` in a preset, it will stop having an effect for webp, avif, and jp2
39
+ images. You need to set `format_quality:` instead.
40
+
41
+ Previously, all image formats used a default quality of 75. We have now set a default quality for 3
42
+ formats:
43
+
44
+ ```yml
45
+ format_quality:
46
+ webp: 50
47
+ avif: 30
48
+ jp2: 30
49
+ ```
50
+
51
+ Since `format_quality` overrides `quality`, your `quality` setting won't affect those formats
52
+ anymore.
53
+
54
+ - Lossless webp or avif was previously accomplished by setting quality to 100. Now, that is
55
+ accomplished with an image option:
56
+
57
+ ```yml
58
+ #_data/picture.yml
59
+ presets:
60
+
61
+ my_preset:
62
+ image_options:
63
+ webp:
64
+ lossless: true
65
+ ```
66
+
67
+ ## Setting names changing
68
+
69
+ In `_data/picture.yml`,
70
+ - `markup_presets` is now `presets`
71
+ - `media_presets` is now `media_queries`.
72
+
73
+ Go check, especially if you've been using JPT for awhile. We renamed them several versions ago, but
74
+ the old names were still supported until now. If you get a bunch of 'preset not found' warnings,
75
+ this is probably why.
76
+
77
+
78
+ ## Crop changes
79
+
80
+ - Anywhere you've set a crop geometry in any format other than `w:h`, remove or change it. This
81
+ could be in both tags and presets.
82
+ - Anywhere you've set a crop gravity such as `north` or `southeast`, remove it. This could also be
83
+ in both tags and presets.
84
+ - Build the site, look through cropped images and decide if you like the results. Adjust the new
85
+ `keep` setting if desired.
86
+
87
+ We now use the Libvips smartcrop feature which does some magic to keep the most interesting part.
88
+ `gravity` is now `keep` (as in which part of the image to keep), and your options are `attention`,
89
+ `entropy`, or `centre`/`center`. The default is `attention`, and it works pretty well in my testing
90
+ so far.
91
+
92
+ If you can't get satisfactory results with those options, you'll have to use a proper editor. JPT is
93
+ not one, and the old crop feature went too far down the road of trying to be.
94
+
95
+ ## Naming of presets and media queries
96
+
97
+ - If you have any presets or media queries with names that start with `jpt-`, change them.
98
+
99
+ We're cordoning off a namespace for built-in ones.
@@ -0,0 +1,60 @@
1
+ ---
2
+ sort: 7
3
+ ---
4
+
5
+ # Cropping
6
+
7
+ ## Crop & Media Crop
8
+
9
+ _Format:_
10
+
11
+ ```yaml
12
+ crop: (aspect ratio)
13
+ media_crop:
14
+ (media_preset): (aspect ratio)
15
+ (media_preset): (aspect ratio)
16
+ (...)
17
+ ```
18
+
19
+ _Example:_
20
+
21
+ ```yaml
22
+ crop: '16:9'
23
+ media_crop:
24
+ tablet: '3:2'
25
+ mobile: '1:1'
26
+ ```
27
+
28
+ Crop aspect ratio, given either generally or for specific media presets. The
29
+ hierarchy is: `tag argument` > `media_crop:` > `crop:`.
30
+
31
+ This setting accepts the same arguments as the `crop`
32
+ [tag parameter]({{ site.baseurl }}/users/liquid_tag/argument_reference/crop).
33
+
34
+ ## Keep & Media Keep
35
+
36
+ ```yaml
37
+ keep: (measure)
38
+ media_keep:
39
+ (media_preset): (measure)
40
+ (media_preset): (measure)
41
+ (...)
42
+ ```
43
+
44
+ _Example:_
45
+
46
+ ```yaml
47
+ keep: attention
48
+ media_gravity:
49
+ tablet: entropy
50
+ mobile: center
51
+ ```
52
+
53
+ Which part of the image to keep when cropping, given either generally or for specific media presets.
54
+ The hierarchy is: `tag argument` > `media_keep:` > `keep:` > `attention` (default).
55
+
56
+ This setting accepts the same arguments as the `keep` [tag parameter]({{ site.baseurl
57
+ }}/users/liquid_tag/argument_reference/crop):
58
+ * `center` or `centre`
59
+ * `attention`
60
+ * `entropy`
@@ -0,0 +1,32 @@
1
+ ---
2
+ sort: 14
3
+ ---
4
+
5
+ # Default preset
6
+
7
+ Here are the default preset settings:
8
+
9
+ ```yml
10
+ presets:
11
+ default:
12
+ markup: auto
13
+ formats: [original]
14
+ widths: [400, 600, 800, 1000]
15
+ fallback_width: 800
16
+ fallback_format: original
17
+ noscript: false
18
+ link_source: false
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
29
+ data_sizes: true
30
+ keep: attention
31
+ dimension_attributes: false
32
+ ```