How do you use Jekyll Picture Tag?

[rbuchberger]

Hi all!

Since we just hit 500 stars, I'd like to know how people are using this little plugin! My involvement with Jekyll Picture Tag started something like this:

I was a newly self-taught web developer, creating a portfolio site. I figured that if I want to be hired, said website should probably have a near-perfect lighthouse score, so I went about addressing the various recommendations made by it. One of those recommendations was to offer webp images, which led me to start learning responsive images. After a brief investigation I thought "Holy crap this is painful. Surely there's a plugin to do it all for me." This led me to JPT.

At the time it hadn't been updated in years and didn't support multiple image formats. I dove into the source code, thinking I might add the feature myself. There were some open long-open pull requests and a few issues I could handle, so I pinged the original maintainer (@robwierzbowski) asking for push access which he graciously gave me.

From there I started what I thought would be some light refactoring, but which quickly turned into a complete rewrite. That was released as version 1.0. After some time Rob gave the repo to me entirely, and the rest is in the changelog.

So I'd love to know: What's your use case? What cool things are you doing with JPT?

[IanCassTwo]

I use it on a site that I created to document the restoration and modification of my car. I don't use it anywhere near as well as I should but perhaps I'll improve the site in future. For now, it works ok. https://rlw7w.uk/

[inetbiz]

@rbuchberger I also am trying to wrangle my head around the liquid and data presets. Here's what I have for blog header:

media_queries:
  mobile: 'max-width: 480px'
  tablet: 'max-width: 800'
  laptop: 'max-width: 800'
  desktop: 'max-width: 800'
  wide: 'min-width: 800'
presets:
  blog-header:
    formats: [webp, original] # Order matters!
    widths: [200, 400] # Image widths, in pixels.
    sizes:
      mobile: calc(100vw - 16px)
      tablet: 80vw
    size: 400px
    link_source: false
    quality: 75
    format_quality:
      webp: 50
      avif: 30
      jp2: 30
    strip_metadata: true
    dimension_attributes: true
    nomarkdown: false
    attributes:
      parent: data-downloadable="true"
      picture: 'loading="lazy" class="image featured u-photo"'

---

_config.yml

#     ____                              ______           
#    /  _/___ ___  ____ _____ ____     /_  __/___ _____ _
#    / // __ `__ \/ __ `/ __ `/ _ \     / / / __ `/ __ `/
#  _/ // / / / / / /_/ / /_/ /  __/    / / / /_/ / /_/ / 
# /___/_/ /_/ /_/\__,_/\__, /\___/    /_/  \__,_/\__, /  
#                    /____/                    /____/ 
# ASCII-Font › http://patorjk.com/software/taag/#p=display&f=Slant&t=Phlow
picture:
  source: "assets/images/_fullsize/"
  output: "assets/images/generated/"
  suppress_warnings: no
  nomarkdown: true
  ignore_missing_images: true

---

Grid Max Width: 661px Blog featured image should be around 649x400

Output Picture Tag:

<picture loading="lazy" class="image featured u-photo" data-downloadable="true">
  <source sizes="(max-width: 480px) calc(100vw - 16px), (max-width: 800) 80vw, 400px" srcset="/assets/images/generated/prestashop-analytics-200-175ad72ec.webp 200w, /assets/images/generated/prestashop-analytics-400-175ad72ec.webp 400w, /assets/images/generated/prestashop-analytics-800-175ad72ec.webp 800w" type="image/webp">
  <source sizes="(max-width: 480px) calc(100vw - 16px), (max-width: 800) 80vw, 400px" srcset="/assets/images/generated/prestashop-analytics-200-7a70cc0bf.png 200w, /assets/images/generated/prestashop-analytics-400-7a70cc0bf.png 400w, /assets/images/generated/prestashop-analytics-800-7a70cc0bf.png 800w" type="image/png">
  <img height="400 850" src="/assets/images/generated/prestashop-analytics-800-7a70cc0bf.png" width="1750">
</picture>

---

smarty tag:

 {% picture blog-header {{page.featured_image}}  --img height="400" %}

I need the <img height="400" and the width to not be 1750 as the original has. Where did I go wrong?

[rbuchberger]

Hi! Thanks for the questions.

What's happening with your height and width is you have dimension attributes enabled (which generates width & height), and you're also passing a height into the liquid tag (which is why you're getting two values in the image height.) Which route to take depends on what result you want:

• If you're trying to crop, pass an aspect ratio: {% picture blog-header {{page.featured_image}} 13:8 %}
• If you want specific values for width & height for whatever reason, disable dimension attributes and pass them like you're setting height now.
• If you want to prevent page reflow on image load, keep dimension attributes enabled, stop passing a height, and ensure the image has height: auto; in css.

Other than that, you might have some redundant settings in there. You copy-pasted one of the examples, which has some nonsense "example" data that's not actually meant to be used. Check out my comments:

media_queries:
  mobile: 'max-width: 480px'
  tablet: 'max-width: 800' 
  laptop: 'max-width: 800'
  desktop: 'max-width: 800'
# There's no reason to have the same media query 3 times.
  wide: 'min-width: 800'

presets:
  blog-header:
    formats: [webp, original]
    widths: [200, 400] # If you're offering a 650 pixel wide image, you should have a width that's at least that big.
    sizes: # Are these correct? They're the same as the example.
      mobile: calc(100vw - 16px)
      tablet: 80vw
    size: 400px
    link_source: false # this is the default, you can delete it.
    quality: 75 # You can delete all of these quality settings, unless you're having issues with image quality.
    format_quality:
      webp: 50
      avif: 30
      jp2: 30
    strip_metadata: true # This is the default
    dimension_attributes: true # This adds the original width & height to your image, to prevent page reflow.
    nomarkdown: false
    attributes:
      parent: data-downloadable="true" # You probably don't need this
      picture: 'loading="lazy" class="image featured u-photo"'

#     ____                              ______           
#    /  _/___ ___  ____ _____ ____     /_  __/___ _____ _
#    / // __ `__ \/ __ `/ __ `/ _ \     / / / __ `/ __ `/
#  _/ // / / / / / /_/ / /_/ /  __/    / / / /_/ / /_/ / 
# /___/_/ /_/ /_/\__,_/\__, /\___/    /_/  \__,_/\__, /  
#                    /____/                    /____/ 
# ASCII-Font › http://patorjk.com/software/taag/#p=display&f=Slant&t=Phlow
picture:
  source: "assets/images/_fullsize/"
  output: "assets/images/generated/"
  suppress_warnings: no # I think this will actually suppress warnings. You should set "true" or "false". false is the default.
  nomarkdown: true # This is the default, you can remove it.
  ignore_missing_images: true