<img srcset="{%- if block.settings.image .width >= 165 -%}
{{ block.settings.image | img_url: '165x' }} 165w,
{%- endif -%}
{%- if block.settings.image .width >= 360 -%}
{{ block.settings.image | img_url: '360x' }} 360w,
{%- endif -%}
{%- if block.settings.image .width >= 533 -%}
{{ product_card_product.featured_media | img_url: '533x' }} 533w,
{%- endif -%}
{%- if block.settings.image .width >= 720 -%}
{{ block.settings.image | img_url: '720x' }} 720w,
{%- endif -%}
{%- if block.settings.image .width >= 940 -%}
{{block.settings.image | img_url: '940x' }} 940w,
{%- endif -%}
{%- if block.settings.image .width >= 1066 -%}
{{ block.settings.image | img_url: '1066x' }} 1066w
{%- endif -%}"
src="{{ block.settings.image | img_url: '533x' }}"
sizes="(min-width: 1100px) 535px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ block.settings.image.alt | escape }}"
class="lazyload">
保证图片的高清用srcset
最新推荐文章于 2024-11-06 22:41:26 发布
本文探讨了在内容社区中如何利用技术手段,如srcset和响应式图片设计,以提高图片加载效率并确保不同设备上的良好显示效果。
摘要由CSDN通过智能技术生成