theme-tools icon indicating copy to clipboard operation
theme-tools copied to clipboard

Check the width against the srcset values

Open ludoboludo opened this issue 2 years ago • 2 comments

Is your feature request related to a problem? Please describe.

When you output an image like this:

{{ section.settings.image_2 | image_url: width: 3840 | image_tag:
      loading: 'lazy',
      width: section.settings.image_2.width,
      height: image_height_2,
      class: image_class_2,
      sizes: sizes,
      widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
      alt: section.settings.image_2.alt | escape
 }}

The image_url: width: value is going to limit the what widths you can output/generate. So ideally the image_url: width: value should be similar to the highest value declared in the widths:.

Describe the solution you'd like

There could be a warning showing up when the value is different or lower 🤔

Describe alternatives you've considered

Manual checking 😅

Additional context

This is something we ran into in Dawn. We realized we were using 1500 on the image banner image and it would never output an image bigger than 1500 despite having some widths set up to 3840.

ludoboludo avatar Nov 08 '22 21:11 ludoboludo