JPT width and height parameter not assigned

[mkruisbrink]

Thanks for the amazing plugin! I've got two sites running with Minimal Mistakes theme and testing JPT on my personal one right now.

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 noted in this discussion that I can manually set it in liquid tag or kramdown using --img height ="400", correct? ( I did not come across the manual overwrite in the docs but I guess thats why you want help :) )
• I've made the _base.scss adjustments in the theme by switching the width: 100% to auto though I'm not quite sure this would be the proper location since in the below _reset.csss snippet (for responsive images) both width and height are set on auto.

#_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
    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!

[rbuchberger]

Hmm... CSS shouldn't affect JPT's output at all, so that's not the problem. I'm not sure why you're not getting width & height, will look into it!

[mkruisbrink]

Thanks a lot, I'm pretty clueless at this stage.