Picture srcset с webp - как реализовать размеры?

Я пытаюсь создать тег изображения с поддержкой WebP.

(загрузить изображение полностью, если размер экрана превышает 1024 пикселей, изображение-1024 для максимальной ширины 1024 пикселей, изображение-768 для максимальной ширины 768 пикселей и изображение-500 для максимальной ширины 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>

html webp srcset
person user1692094    schedule 08.04.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

При предоставлении нескольких 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, которое наиболее близко соответствует выбранному размеру слота.

Подробное руководство по адаптивным изображениям

person Varun Goel    schedule 14.04.2020
comment
Спасибо! Работает отлично. Я не был уверен, куда его добавить, несколько руководств добавили 800w или 2x где-то внутри тега источника. В приведенном вами примере мне непонятно, что делает ‹img sizes = (max-width: 600px) 480px, 800px›? Для максимальной ширины экрана 600 пикселей он обслуживает ... изображения размером 480 и 800 пикселей? - person user1692094; 15.04.2020
comment
Нет проблем. Для максимальной ширины экрана 600 пикселей будет выбрано изображение 480 пикселей и 800 пикселей для остальных размеров экрана. - person Varun Goel; 15.04.2020
comment
смешно, если я действительно не могу записать набор в атрибут srcset источника, или могу? - person Fanky; 10.12.2020
comment
вам также нужно изменить порядок источников от наименьшего к наибольшему, чтобы он работал, как я тестировал в Firefox. - person Fanky; 10.12.2020