我正在尝试使用带有WebP支持的图片标签。
(如果屏幕尺寸超过1024像素,则加载全图,最大宽度1024像素时为image-1024,最大宽度768像素时为image-768,最大宽度500像素时为image-500)
我有这段代码,并且w3验证程序抱怨:当srcset属性具有任何带有宽度描述符的图像候选字符串时,还必须存在sizes属性。
如何在其中实现尺寸?我应该有更好/不同的方式吗?
<picture>
// load webp in different sizes if browser supports it
<source media="(min-width: 1025px)"
srcset="webp/image-full.webp"
type="image/webp">
<source media="(max-width: 1024px)"
srcset="webp/image-1024.webp"
type="image/webp">
<source media="(max-width: 768px)"
srcset="webp/image-768.webp"
type="image/webp">
<source media="(max-width: 500px)"
srcset="webp/image-500.webp"
type="image/webp">
// load jpg in different sizes if browser doesn't support webp
<source media="(min-width: 1025px)"
srcset="siteimages/image-full.jpg"
type="image/jpeg">
<source media="(max-width: 1024px)"
srcset="siteimages/image-1024.jpg"
type="image/jpeg">
<source media="(max-width: 768px)"
srcset="siteimages/image-768.jpg"
type="image/jpeg">
<source media="(max-width: 500px)"
srcset="siteimages/image-500.jpg"
type="image/jpeg">
// fallback in different sizes, as well as regular src.
<img
srcset="siteimages/image-1024.jpg,
siteimages/image-768.jpg,
siteimages/image-500.jpg"
src="siteimages/image-full.jpg"
alt="image description"
class="myimageclass">
</picture>
答案 0 :(得分:1)
在srcset
标签浏览器中提供多个img
时,需要同时具有scrset
和sizes
属性,以帮助浏览器选择合适的浏览器。
您可以添加如下所示的更新代码,它应该可以正常运行-
<picture>
// load webp in different sizes if browser supports it
<source media="(min-width: 1025px)"
srcset="webp/image-full.webp"
type="image/webp">
<source media="(max-width: 1024px)"
srcset="webp/image-1024.webp"
type="image/webp">
<source media="(max-width: 768px)"
srcset="webp/image-768.webp"
type="image/webp">
<source media="(max-width: 500px)"
srcset="webp/image-500.webp"
type="image/webp">
// load jpg in different sizes if browser doesn't support webp
<source media="(min-width: 1025px)"
srcset="siteimages/image-full.jpg"
type="image/jpeg">
<source media="(max-width: 1024px)"
srcset="siteimages/image-1024.jpg"
type="image/jpeg">
<source media="(max-width: 768px)"
srcset="siteimages/image-768.jpg"
type="image/jpeg">
<source media="(max-width: 500px)"
srcset="siteimages/image-500.jpg"
type="image/jpeg">
// fallback in different sizes, as well as regular src.
<img
srcset="siteimages/image-1024.jpg 1024w,
siteimages/image-768.jpg 768w,
siteimages/image-500.jpg 500w"
sizes="(max-width: 1024px) 1024px,
(max-width: 768px) 768px,
(max-width: 500px) 500px"
src="siteimages/image-full.jpg"
alt="image description"
class="myimageclass">
</picture>
简而言之,我们告诉浏览器加载srcset列表中引用的与所选插槽大小最匹配的图像