I am trying to write img HTML tag which should optimized for performance and responsive for all devices. I applied the sizes, widths property to the img tag. Below is my liquid code
{%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
{% liquid
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
%}
{%- capture sizes -%}
(min-width: 1350px) {{ 1350 | minus: 100 | divided_by: 2 }}px,
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
{%- endcapture -%}
{{
block.settings.image
| image_url: width: 1500
| image_tag:
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority,
alt: block.settings.image.alt
}}
I was influenced by Dawn Theme. In Dawn Theme they applied image default with 100%. but I am not interested in applying 100%. because there are possibilities to get the image render size higher than the image intrinsic size.
Expectation: I want to make the image responsive as well as performance-optimized. In general width, the image should get its Intrinsic size. If intrinsic size goes out of the page width and adding a scrollbar to the bottom then I want to affect it 100% Width, so it will fit to the page width and the bottom scrollbar removed.
Tried: I applied this CSS code to the image.
display: block;
max-width: 100%;
height: auto;
width: auto;
It is working near my expectations but I do not know why the images are generated like that-
Rendered size: 182 × 182 px
Rendered aspect ratio: 1∶1
Intrinsic size: 360 × 360 px
Intrinsic aspect ratio: 1∶1
File size: 43.1 kB
Look at the Intrinsic size and Rendered size. I showing this result from the mobile view. as there have 360 To render. But it is rendering 182 Only. And also there are spaces to expand. If I apply width:100%; Then the render size goes out a little from the Intrinsic size but no scrollbar is added. But I do not want this. I want to grab the full Intrinsic size but if it is going out of the page size or parent element size, then get the page width or parent element size to make it responsible.
