保证图片的高清用srcset

本文探讨了在内容社区中如何利用技术手段,如srcset和响应式图片设计,以提高图片加载效率并确保不同设备上的良好显示效果。
摘要由CSDN通过智能技术生成
   <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">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值