jekyll_picture_tag 1.11.0 → 1.12.0

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.
Files changed (72) hide show
  1. checksums.yaml +4 -4
  2. data/docs/Gemfile +4 -2
  3. data/docs/Gemfile.lock +14 -12
  4. data/docs/_config.yml +6 -10
  5. data/docs/devs/contributing/code.md +44 -0
  6. data/docs/devs/contributing/docs.md +13 -0
  7. data/docs/devs/contributing/index.md +15 -0
  8. data/docs/devs/contributing/setup.md +13 -0
  9. data/docs/devs/contributing/testing.md +41 -0
  10. data/docs/devs/index.md +7 -0
  11. data/docs/{releases.md → devs/releases.md} +24 -14
  12. data/docs/index.md +43 -27
  13. data/docs/users/configuration/cdn.md +35 -0
  14. data/docs/users/configuration/directories.md +34 -0
  15. data/docs/users/configuration/disable.md +24 -0
  16. data/docs/users/configuration/fast_build.md +28 -0
  17. data/docs/users/configuration/ignore_missing.md +23 -0
  18. data/docs/users/configuration/index.md +29 -0
  19. data/docs/users/configuration/kramdown_fix.md +20 -0
  20. data/docs/users/configuration/relative_urls.md +15 -0
  21. data/docs/users/configuration/suppress_warnings.md +16 -0
  22. data/docs/users/index.md +7 -0
  23. data/docs/users/installation.md +52 -0
  24. data/docs/users/liquid_tag/argument_reference/alternate_images.md +18 -0
  25. data/docs/users/liquid_tag/argument_reference/attributes.md +42 -0
  26. data/docs/users/liquid_tag/argument_reference/base_image.md +12 -0
  27. data/docs/users/liquid_tag/argument_reference/crop.md +48 -0
  28. data/docs/users/liquid_tag/argument_reference/link.md +16 -0
  29. data/docs/users/liquid_tag/argument_reference/preset.md +17 -0
  30. data/docs/users/liquid_tag/argument_reference/readme.md +9 -0
  31. data/docs/users/liquid_tag/examples.md +81 -0
  32. data/docs/users/liquid_tag/index.md +31 -0
  33. data/docs/users/notes/git_lfs.md +7 -0
  34. data/docs/users/notes/github_pages.md +5 -0
  35. data/docs/users/notes/html_attributes.md +5 -0
  36. data/docs/users/notes/index.md +6 -0
  37. data/docs/users/notes/input_checking.md +6 -0
  38. data/docs/users/notes/kramdown_bug.md +41 -0
  39. data/docs/users/notes/managing_images.md +21 -0
  40. data/docs/{migration.md → users/notes/migration.md} +0 -0
  41. data/docs/users/presets/cropping.md +61 -0
  42. data/docs/users/presets/default.md +23 -0
  43. data/docs/users/presets/examples.md +79 -0
  44. data/docs/users/presets/fallback_image.md +28 -0
  45. data/docs/users/presets/html_attributes.md +26 -0
  46. data/docs/users/presets/image_formats.md +21 -0
  47. data/docs/users/presets/image_quality.md +43 -0
  48. data/docs/users/presets/index.md +101 -0
  49. data/docs/users/presets/link_source.md +16 -0
  50. data/docs/users/presets/markup_formats/fragments.md +48 -0
  51. data/docs/users/presets/markup_formats/javascript_friendly.md +57 -0
  52. data/docs/users/presets/markup_formats/readme.md +43 -0
  53. data/docs/users/presets/markup_formats/standard_html.md +25 -0
  54. data/docs/users/presets/media_queries.md +36 -0
  55. data/docs/users/presets/nomarkdown_override.md +17 -0
  56. data/docs/users/presets/pixel_ratio_srcsets.md +32 -0
  57. data/docs/users/presets/width_height_attributes.md +34 -0
  58. data/docs/users/presets/width_srcsets.md +85 -0
  59. data/lib/jekyll_picture_tag/instructions/preset.rb +5 -1
  60. data/lib/jekyll_picture_tag/instructions/set.rb +5 -1
  61. data/lib/jekyll_picture_tag/version.rb +1 -1
  62. metadata +55 -14
  63. data/docs/_layouts/directory.html +0 -32
  64. data/docs/assets/style.css +0 -31
  65. data/docs/contributing.md +0 -109
  66. data/docs/example_presets.md +0 -116
  67. data/docs/global_configuration.md +0 -173
  68. data/docs/installation.md +0 -45
  69. data/docs/notes.md +0 -91
  70. data/docs/output.md +0 -63
  71. data/docs/presets.md +0 -391
  72. data/docs/usage.md +0 -157
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1fdaad2f56cc244f8bce4ffcf5689630fe71ec0b7e091d91e289a1dc7d6740d8
4
- data.tar.gz: 971d590896ef6396a86c8ce6f6dd7fef46804443b4c2b76226e5e774dc5cd204
3
+ metadata.gz: 57fe7741c94cf1511eb8824dec643e9acb953b3251b2714b030e662742d62680
4
+ data.tar.gz: fcfae3154dcfe87509bc4759171ab6f2a27636ab75d6ec20d24b335f8535dc8c
5
5
  SHA512:
6
- metadata.gz: 77fa8b7e4b3db8839a988f0613b8e3b0257ff92f7e379db12bf9de1da3644acf7d6a6bfa0fb82b900fb71d2e6775d842d2187ec1e13617cf268098f98ad41e12
7
- data.tar.gz: b9efeae7cff9bc5a962d9c076d735c00011ad231cbac264b232a29a6f4ec3af101d9f905a0cde61283b0b739b8d9388e92ccad7f600aacccc382c2845edbd71e
6
+ metadata.gz: af9a456fb275f80eedff3c26a1579c3ce95b2385fd66f1a7e203947de2e16deea596f2e6a1334f5cb475e4d61c26803569bd522a84356a574b826cc071961fa3
7
+ data.tar.gz: a6fb8984f4fe3b02564a60038d77136d15c5fd1625a1e8b5f654b656494eb8e9b1f7f497436145253e8f241d5cb902243df37ff38511a05b742c5c2de1c5730d
@@ -1,4 +1,6 @@
1
1
  source 'https://rubygems.org'
2
2
 
3
- gem 'github-pages', group: :jekyll_plugins
4
- gem 'jekyll-theme-slate'
3
+ group :jekyll_plugins do
4
+ gem 'github-pages'
5
+ gem 'jekyll-rtd-theme'
6
+ end
@@ -1,7 +1,7 @@
1
1
  GEM
2
2
  remote: https://rubygems.org/
3
3
  specs:
4
- activesupport (6.0.3)
4
+ activesupport (6.0.3.2)
5
5
  concurrent-ruby (~> 1.0, >= 1.0.2)
6
6
  i18n (>= 0.7, < 2)
7
7
  minitest (~> 5.1)
@@ -28,12 +28,12 @@ GEM
28
28
  execjs (2.7.0)
29
29
  faraday (1.0.1)
30
30
  multipart-post (>= 1.2, < 3)
31
- ffi (1.12.2)
31
+ ffi (1.13.1)
32
32
  forwardable-extended (2.6.0)
33
33
  gemoji (3.0.1)
34
- github-pages (204)
34
+ github-pages (206)
35
35
  github-pages-health-check (= 1.16.1)
36
- jekyll (= 3.8.5)
36
+ jekyll (= 3.8.7)
37
37
  jekyll-avatar (= 0.7.0)
38
38
  jekyll-coffeescript (= 1.1.1)
39
39
  jekyll-commonmark-ghpages (= 0.1.6)
@@ -72,7 +72,7 @@ GEM
72
72
  mercenary (~> 0.3)
73
73
  minima (= 2.5.1)
74
74
  nokogiri (>= 1.10.4, < 2.0)
75
- rouge (= 3.13.0)
75
+ rouge (= 3.19.0)
76
76
  terminal-table (~> 1.4)
77
77
  github-pages-health-check (1.16.1)
78
78
  addressable (~> 2.3)
@@ -80,13 +80,13 @@ GEM
80
80
  octokit (~> 4.0)
81
81
  public_suffix (~> 3.0)
82
82
  typhoeus (~> 1.3)
83
- html-pipeline (2.12.3)
83
+ html-pipeline (2.13.0)
84
84
  activesupport (>= 2)
85
85
  nokogiri (>= 1.4)
86
86
  http_parser.rb (0.6.0)
87
87
  i18n (0.9.5)
88
88
  concurrent-ruby (~> 1.0)
89
- jekyll (3.8.5)
89
+ jekyll (3.8.7)
90
90
  addressable (~> 2.4)
91
91
  colorator (~> 1.0)
92
92
  em-websocket (~> 0.5)
@@ -136,6 +136,8 @@ GEM
136
136
  addressable (~> 2.0)
137
137
  jekyll (>= 3.5, < 5.0)
138
138
  rubyzip (>= 1.3.0)
139
+ jekyll-rtd-theme (0.1.6)
140
+ github-pages (~> 206)
139
141
  jekyll-sass-converter (1.5.2)
140
142
  sass (~> 3.4)
141
143
  jekyll-seo-tag (2.6.1)
@@ -202,9 +204,9 @@ GEM
202
204
  jekyll (>= 3.5, < 5.0)
203
205
  jekyll-feed (~> 0.9)
204
206
  jekyll-seo-tag (~> 2.1)
205
- minitest (5.14.0)
207
+ minitest (5.14.1)
206
208
  multipart-post (2.1.1)
207
- nokogiri (1.10.9)
209
+ nokogiri (1.10.10)
208
210
  mini_portile2 (~> 2.4.0)
209
211
  octokit (4.18.0)
210
212
  faraday (>= 0.9)
@@ -215,7 +217,7 @@ GEM
215
217
  rb-fsevent (0.10.4)
216
218
  rb-inotify (0.10.1)
217
219
  ffi (~> 1.0)
218
- rouge (3.13.0)
220
+ rouge (3.19.0)
219
221
  ruby-enum (0.8.0)
220
222
  i18n
221
223
  rubyzip (2.3.0)
@@ -236,14 +238,14 @@ GEM
236
238
  tzinfo (1.2.7)
237
239
  thread_safe (~> 0.1)
238
240
  unicode-display_width (1.7.0)
239
- zeitwerk (2.3.0)
241
+ zeitwerk (2.4.0)
240
242
 
241
243
  PLATFORMS
242
244
  ruby
243
245
 
244
246
  DEPENDENCIES
245
247
  github-pages
246
- jekyll-theme-slate
248
+ jekyll-rtd-theme
247
249
 
248
250
  BUNDLED WITH
249
251
  2.1.4
@@ -1,13 +1,9 @@
1
- theme: jekyll-theme-slate
1
+ remote_theme: rundocs/jekyll-rtd-theme
2
+
2
3
  title: Jekyll Picture Tag
4
+ description: Images for Jekyll, done correctly.
5
+ lang: en-US
3
6
 
4
- url: ''
5
7
  baseurl: '/jekyll_picture_tag'
6
-
7
- defaults:
8
- -
9
- scope:
10
- path: ''
11
- values:
12
- layout: directory
13
-
8
+ readme_index:
9
+ with_frontmatter: true
@@ -0,0 +1,44 @@
1
+ ---
2
+ sort: 4
3
+ ---
4
+
5
+ # Code Guidelines
6
+
7
+ * Generally, go for straightforward and readable rather than terse and clever. I'm not actually a
8
+ very good programmer; I need simple code that's easy to understand.
9
+
10
+ * Refactoring is welcome, especially in the name of the previous point.
11
+
12
+ * I'm very reluctant to introduce breaking changes to configuration settings. This rule isn't
13
+ absolute, but I'm not going to do it without a good reason.
14
+
15
+ * Don't disable cops without strong justification.
16
+
17
+ * I generally try to write tests before writing code, especially when fixing bugs. This
18
+ gives us some confidence that what we think we're testing and what we're actually testing aren't
19
+ too different.
20
+
21
+ ## Hard rules
22
+
23
+ These aren't the rules for submitting a pull request, these are the rules for merging into master.
24
+ I'm thrilled to receive any help at all, and I'm more than happy to help with meeting these
25
+ criteria:
26
+
27
+ * Liquid tag syntax can only be extended; no breaking changes. I'm not willing to force
28
+ users to dig through their entire site and change every picture tag in order to update to the
29
+ latest version.
30
+
31
+ * Maintain "no configuration required" - a new user must be able to add JPT to their gemfile, bundle
32
+ install, and start writing picture tags in their site without touching a yml file.
33
+
34
+ * 100% test coverage (Meaning that when running the unit and integration tests together, every line
35
+ of code in the `lib` folder must run at least once.)
36
+
37
+ * No failing tests
38
+
39
+ * No rubocop warnings
40
+
41
+ ### Thanks!
42
+
43
+ As I said, don't let any of the rules & guidelines scare you away. They're the rules for merging
44
+ into master, not submitting a pull request. I'm thrilled to receive any help at all.
@@ -0,0 +1,13 @@
1
+ ---
2
+ sort: 2
3
+ ---
4
+
5
+ # Docs
6
+
7
+ They run on github pages, which is based on jekyll. You can preview as you edit:
8
+
9
+ 0. Follow the [setup instructions](setup)
10
+ 1. `$ cd docs`
11
+ 2. `$ bundle install`
12
+ 3. `$ bundle exec jekyll serve`
13
+ 4. In a web browser, navigate to `localhost:4000/jekyll_picture_tag/`
@@ -0,0 +1,15 @@
1
+ ---
2
+ ---
3
+ # Contributing
4
+
5
+ Bug reports, feature requests, and feedback are very welcome, either through
6
+ github issues or via email: robert@buchberger.cc
7
+
8
+ Pull requests are encouraged! I'm happy to answer questions and provide
9
+ assistance along the way. Don't let any of the recommendations/requests in this
10
+ guide stop you from submitting one.
11
+
12
+ I think one of the biggest opportunities for improvement in this plugin is its
13
+ documentation. I'd really love help here, and all you need to know is markdown.
14
+
15
+ {% include list.liquid %}
@@ -0,0 +1,13 @@
1
+ ---
2
+ sort: 1
3
+ ---
4
+
5
+ ## Setup
6
+
7
+ It's pretty standard:
8
+
9
+ ```
10
+ $ git clone git@github.com:rbuchberger/jekyll_picture_tag.git
11
+ $ cd jekyll_picture_tag
12
+ $ bundle install
13
+ ```
@@ -0,0 +1,41 @@
1
+ ---
2
+ sort: 3
3
+ ---
4
+
5
+ ## How to run the tests
6
+
7
+ You probably only need to use docker if it's inconvenient to install ImageMagick 7.
8
+
9
+ ### Bare Metal
10
+
11
+ ```note
12
+ Depending on your environment, you may need to prefix all rake commands with
13
+ `bundle exec`.
14
+ ```
15
+
16
+ `rake test` runs the test suite (both unit tests and integration tests). Ignore the mini_magick
17
+ `method redefined` warnings (unless you know how to fix them?)
18
+
19
+ `rake unit` runs just the unit tests, while `rake integration` runs the integration tests. The unit
20
+ test coverage isn't stellar, but both unit and integration tests together hit 100%.
21
+
22
+ Speaking of coverage, simplecov is set up -- you'll get a measurement of coverage in the test output
23
+ and a nice report in the `coverage` directory. I'd like to move to mutation based coverage testing,
24
+ but that's a project for another day.
25
+
26
+ The tests do output a few images to the `/tmp/` directory, which I'm pretty sure means it won't work
27
+ on Windows. This is fixable if there is a need, so if that gets in your way just ask.
28
+
29
+ `rake rubocop` checks code formatting, `rake rubocop:auto_correct` will try to fix any rubocop
30
+ issues, if possible.
31
+
32
+ `rake` will run all tests and rubocop.
33
+
34
+ ### Docker
35
+
36
+ The following commands will build and run the tests inside a docker image.
37
+
38
+ ```bash
39
+ $ docker build . -t jpt
40
+ $ docker run -t jpt
41
+ ```
@@ -0,0 +1,7 @@
1
+ ---
2
+ sort: 2
3
+ ---
4
+
5
+ # Development
6
+
7
+ {% include list.liquid %}
@@ -1,11 +1,17 @@
1
1
  ---
2
2
  ---
3
3
  # Release History
4
+ * 1.12.0 July 30, 2020
5
+ * Documentation overhaul. Now with 87% less scrolling!
6
+ * Rename `markup_presets` and `media_presets` to `presets` and
7
+ `media_queries`. The old names were bad and caused confusion. The old names
8
+ will continue to work until the next major version is released.
4
9
  * 1.11.0 July 27, 2020
5
10
  * **Width and height attribute support!** Begone, page reflow.
6
11
  * Cache image information between builds
7
- * Change image naming format. This update will trigger all images to be regenerated, so you may
8
- want to delete your generated images folder beforehand.
12
+ * Change image naming format. This update will trigger all images to be
13
+ regenerated, so you may want to delete your generated images folder
14
+ beforehand.
9
15
  * 1.10.2 July 6, 2020
10
16
  * Bugfix for fallback image files not actually getting generated
11
17
  * 1.10.1 July 2, 2020
@@ -17,23 +23,25 @@
17
23
  * 1.9.0 Feb 2, 2020
18
24
  * Add `fast_build` global setting
19
25
  * Add `disabled` global setting
20
- * Reduce unnecessary disk IO; sites with many source images should see build times improve when
21
- no new images need to be generated.
22
- * Add support for empty attributes; specifically so best-practice for decorative images (`alt=""`)
23
- is possible.
26
+ * Reduce unnecessary disk IO; sites with many source images should see build
27
+ times improve when no new images need to be generated.
28
+ * Add support for empty attributes; specifically so best-practice for
29
+ decorative images (`alt=""`) is possible.
24
30
  * 1.8.0 Nov 25, 2019
25
31
  * Add `data_sizes` setting for the `data_` family of output formats.
26
32
  * 1.7.1 Nov 14, 2019
27
33
  * Fix some HTML attribute related bugs
28
34
  * Add a few items to the FAQ
29
35
  * 1.7.0 Aug 12, 2019
30
- * Add support for setting generated image quality, either generally or specific to given
31
- formats.
36
+ * Add support for setting generated image quality, either generally or
37
+ specific to given formats.
32
38
  * Add support for spaces and other url-encoded characters in filenames
33
- * Documentation restructure - Moved it out of the wiki, into the `docs` folder.
39
+ * Documentation restructure - Moved it out of the wiki, into the `docs`
40
+ folder.
34
41
  * Bugfix: Fallback image width will now be checked against source image width.
35
42
  * Bugfix: Minor fix to nomarkdown wrapper output
36
- * link_source will now target the base source image, rather than finding the biggest one.
43
+ * link_source will now target the base source image, rather than finding the
44
+ biggest one.
37
45
  * Remove fastimage dependency, add addressable dependency.
38
46
  * Moderately significant refactoring and code cleanup
39
47
  * Decent set of tests added
@@ -44,14 +52,15 @@
44
52
  * better `{::nomarkdown}` necessity detection
45
53
  * allow user to override `{::nomarkdown}` autodetection
46
54
  * 1.4.0 Jun 26, 2019:
47
- * Rename gem from `jekyll-picture-tag` to `jekyll_picture_tag`, allowing us to use rubygems again.
55
+ * Rename gem from `jekyll-picture-tag` to `jekyll_picture_tag`, allowing us to
56
+ use rubygems again.
48
57
  * Add new output format: `naked_srcset`.
49
58
  * 1.3.1 Jun 21, 2019: Bugfix
50
59
  * 1.3.0 Jun 7, 2019:
51
60
  * Initial compatibility with Jekyll 4.0
52
61
  * bugfixes
53
- * change to generated image naming-- The first build after this update will be longer, and you
54
- might want to clear out your generated images.
62
+ * change to generated image naming-- The first build after this update will be
63
+ longer, and you might want to clear out your generated images.
55
64
  * 1.2.0 Feb 9, 2019:
56
65
  * Add nomarkdown fix
57
66
  * noscript option
@@ -62,7 +71,8 @@
62
71
  * auto-orient images before stripping metadata
63
72
  * 1.0.2 Jan 18, 2019: Fix ruby version specification
64
73
  * 1.0.1 Jan 13, 2019: Added ruby version checking
65
- * **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the [migration guide]({{ site.baseurl }}/migration).
74
+ * **1.0.0** Nov 27, 2018: Rewrite from the ground up. See the
75
+ * [migration guide]({{ site.baseurl }}/users/notes/migration).
66
76
  * 0.2.2 Aug 2, 2013: Bugfixes
67
77
  * 0.2.1 Jul 17, 2013: Refactor again, add Liquid parsing.
68
78
  * 0.2.0 Jul 14, 2013: Rewrite code base, bring in line with Jekyll Image Tag.
@@ -1,12 +1,15 @@
1
1
  ---
2
- id: quickstart
3
2
  ---
4
3
 
5
- # Quick start / Demo
4
+ # Jekyll Picture Tag
5
+
6
+ Responsive Images, Done Correctly.
7
+
8
+ ## Quick start / Demo
6
9
 
7
10
  **All configuration is optional.** Here's the simplest possible use case:
8
11
 
9
- 1. [Install]({{ site.baseurl }}/installation)
12
+ 1. [Install]({{ site.baseurl }}/users/installation)
10
13
 
11
14
  2. Write this: {% raw %} `{% picture test.jpg %}` {% endraw %}
12
15
 
@@ -31,24 +34,31 @@ id: quickstart
31
34
  Create `_data/picture.yml`, add the following:
32
35
 
33
36
  ```yml
34
- markup_presets:
37
+ presets:
35
38
  default:
36
39
  formats: [webp, original]
37
40
  ```
38
- **Note:** Order matters! `[webp, jpg]` will offer the browser webp-images first. The browser will pick the *first* format it can work with. So if the order is reversed `[jpg, webp]` it will use the jpg image before the webp.
41
+
42
+ **Note:** Order matters! `[webp, jpg]` will offer webp-images first. The
43
+ browser will pick the *first* format it can work with. So if the order is
44
+ reversed `[jpg, webp]` it will use the jpg image before the webp.
39
45
 
40
46
  ### Here's a more complete demonstration:
41
47
 
42
- [Presets]({{ site.baseurl }}/presets) are named collections of settings, and come in 2 kinds: Media
43
- Presets are named CSS media queries, and Markup Presets determine the output text and images. You
44
- choose one with the second [tag parameter]({{ site.baseurl }}/usage), or omit for the `default` (as
45
- in these examples). They are located in `_data/picture.yml`. Here's an example:
48
+ [Presets]({{ site.baseurl }}/users/presets) are named collections of settings.
49
+ You choose one with the second [tag
50
+ parameter]({{site.baseurl}}/users/liquid_tag), or omit for the `default` (as in
51
+ these examples). They are located in `_data/picture.yml`. Alongside `presets`,
52
+ we also set named `media_queries` for easy reference. Here's an example:
53
+
46
54
 
47
55
  ```yml
48
- media_presets:
56
+ # _data/picture.yml
57
+
58
+ media_queries:
49
59
  mobile: 'max-width: 600px'
50
60
 
51
- markup_presets:
61
+ presets:
52
62
  default:
53
63
  widths: [600, 900, 1200]
54
64
  formats: [webp, original]
@@ -57,9 +67,9 @@ markup_presets:
57
67
  size: 500px
58
68
  ```
59
69
 
60
- Imagemagick can easily crop images to an aspect ratio, though you should **read the whole
61
- installation guide before using this feature**. With the above preset, if you write this:
62
-
70
+ Imagemagick can easily crop images to an aspect ratio, though you should **read
71
+ the whole installation guide before using this feature**. With the above preset,
72
+ if you write this:
63
73
 
64
74
  {% raw %}
65
75
  `{% picture test.jpg 3:2 mobile: test2.jpg 1:1 --alt Alternate Text %}`
@@ -72,43 +82,49 @@ You'll get something like this:
72
82
 
73
83
  <picture>
74
84
  <source
75
- sizes="(max-width: 600px) 80vw, 600px"
85
+ type="image/webp"
76
86
  media="(max-width: 600px)"
87
+ sizes="(max-width: 600px) 80vw, 600px"
77
88
  srcset="
78
89
  /generated/test2-600-21bb6fGUW.webp 600w,
79
90
  /generated/test2-900-21bb6fGUW.webp 900w,
80
91
  /generated/test2-1200-21bb6fGUW.webp 1200w
81
- "
82
- type="image/webp">
92
+ ">
83
93
  <source
94
+ type="image/webp"
84
95
  sizes="(max-width: 600px) 80vw, 600px"
85
96
  srcset="
86
97
  /generated/test-600-195f7d192.webp 600w,
87
98
  /generated/test-900-195f7d192.webp 900w,
88
99
  /generated/test-1200-195f7d192.webp 1200w
89
- "
90
- type="image/webp">
100
+ ">
91
101
  <source
92
- sizes="(max-width: 600px) 80vw, 600px"
102
+ type="image/jpeg"
93
103
  media="(max-width: 600px)"
104
+ sizes="(max-width: 600px) 80vw, 600px"
94
105
  srcset="
95
106
  /generated/test2-600-21bb6fGUW.jpg 600w,
96
107
  /generated/test2-900-21bb6fGUW.jpg 900w,
97
108
  /generated/test2-1200-21bb6fGUW.jpg 1200w
98
- "
99
- type="image/jpeg">
109
+ ">
100
110
  <source
111
+ type="image/jpeg"
101
112
  sizes="(max-width: 600px) 80vw, 600px"
102
113
  srcset="
103
114
  /generated/test-600-195f7d192.jpg 600w,
104
115
  /generated/test-900-195f7d192.jpg 900w,
105
116
  /generated/test-1200-195f7d192.jpg 1200w
106
- "
107
- type="image/jpeg">
117
+ ">
108
118
  <img src="/generated/test-800-195f7dGUW.jpg" alt="Alternate Text">
109
119
  </picture>
110
120
  ```
111
121
 
112
- In other words, you have the art direction, format switching, and resolution switching problems
113
- *solved*, with a one-liner and a nicely readable config file that is 1/3 as long as the output
114
- markup. Lighthouse is happy, and you don't even need to crop things yourself.
122
+ In other words, you have the art direction, format switching, and resolution
123
+ switching problems *solved*, with a one-liner and a nicely readable config file
124
+ that is 1/3 as long as the output markup. Lighthouse is happy, and you don't
125
+ even need to crop things yourself.
126
+
127
+ That isn't a complete demonstration of Jekyll Picture Tag's feature set; it can
128
+ (among other things) add width & height attributes to prevent page reflow, add a
129
+ link to the source image (or anywhere else), and adjust image quality. See the
130
+ docs for more.