max width and height set with jekyll picture tag

[mkruisbrink]

Thanks for the amazing theme, got it working on two sites now and learning amazing stuff everyday through struggling forward :)

I've been trying to serve images responsively with Jekyll Picture Tag. I know this plugin isn't whitelisted for GitHub pages and I'm also aware that the theme forum is perhaps not the right place to ask questions but perhaps someone has the experience.

I've come across this topic on JPT for the theme but this didn't cover the CLS topic specifically

I'm now properly serving responsive .webp images on my about page but I can't seem to figure out how to properly set the width and height element for the images to make Lighthouse (and myself) proper happy.

• I followed the documentation for JPT that can be found and specifically the section on how to deal with CLS
• I've made the _base.scss adjustments by switching the width: 100% to auto though I'm not quite sure this would be the proper location since below snippet both width and height are set on auto.
• I note the style reset for responsive images in _reset.scss:

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%; /* part 1: Set a maximum relative to the parent*/
  width: auto\9; /* IE7-8 need help adjusting responsive images*/
  height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

• My config for the JPT plugin is listed below:

#_data/picture.yml

presets:
  default:
    markup: auto
    formats: [webp, original]
    widths: [400, 600, 800, 1000]
    fallback_width: 800
    fallback_format: original
    noscript: false
    link_source: false
    quality: 75
    format_quality:
      webp: 50
      avif: 30
      jp2: 30
    strip_metadata: true
    image_options:
      avif:
        compression: av1
        speed: 8
    data_sizes: true
    keep: attention
    dimension_attributes: true

The images are served responsively when inspecting in dev tools and I also see _base.scss and _reset.scss applied. Somehow the functionality to reduce the CLS by specifying width and height parameters is not working for me.

Could anyone point me towards what I might be doing wrong? Thanks in advance!

[mkruisbrink]

Resolved. JPT not supported by GH pages as whitelisted plugin so the site didn't build and deploy properly anyway. The only way I was able to use the plugin was to add a custom workflow. Also posted this in the discussion board of the plugin itself and the maintainer said he'd look into it.