Настройка размеров <img>отступления для <source>внутри <picture>, для SEO / времени загрузки страницы - PullRequest
Новая
       90

Настройка размеров <img>отступления для <source>внутри <picture>, для SEO / времени загрузки страницы

0 голосов
/ 02 мая 2020

Используя приведенный ниже код, я пытаюсь добиться этого:

  • разрешить браузеру выбирать между WEBP <source> и JPEG в <img> (как запасной вариант)
  • отобразить изображение шириной 754px для ширины области просмотра> 1058px или, для меньших областей просмотра, автоматически выбрать одно из пяти изображений и растянуть до ширины области просмотра.
  • имеет атрибут src <img> на месте, который указывает на версию lazyload с низким разрешением

  • , укажите width и height изображения в HTML, указанном по причинам SEO / UX (подробнее ниже). 

    <div>
<picture>
<source type="image/webp" 
     data-srcset="
        image_100.webp 100w, 
        image_200.webp 200w, 
        image_400.webp 400w, 
        image_600.webp 600w,
        image_754.webp 754w" 
        data-sizes="(min-width: 1058px) 1000px, 100%" />
<img data-srcset="
        image_100.png 100w, 
        image_200.png 200w, 
        image_400.png 400w, 
        image_600.png 600w,
        image_754.png 754w" 
        data-sizes="(min-width: 1058px) 1000px, 100%" 
        src="image_min.png" width="1000" height="300" alt="image_alt" />
</picture>
</div>

Почему существуют префиксы data-, спросите вы? Я хочу использовать скрипт lazyloading, который удалит их в нужное время, когда должно быть отображено изображение.

До запуска сценария lazyloading браузер игнорирует элемент <source>, поскольку srcset и sizes будут отсутствовать в этой точке. Браузер также игнорирует data-srcset и data-sizes из <img> и, следовательно, отображает изображение с низким разрешением / заполнителем, как определено в src.

Зная размеры изображения и, таким образом, отношение w / h, я также хочу указать их в HTML, чтобы браузер знал, какое место зарезервировать для изображения во время загрузки, до изображения загружены, чтобы предотвратить повторный рендеринг.

Простая установка абсолютных значений изображения в style или в width и height атрибутов <img>, действительны только для ширины области просмотра> 1058px. В противном случае размеры указаны относительно размера области просмотра. Итак, я хочу сказать браузеру, что изображение будет иметь ширину 100% и высоту 30% ширины родительского элемента <div>, что действительно во всех случаях.

Я знаю, что существует css padding-top трюк, чтобы сохранить соотношение сторон div, но я не уверен, что смогу использовать его в этом сценарии, поскольку он фактически создает отступ над изображением.

Любые другие идеи по настройке размер резервного изображения?

1 Ответ

0 голосов
/ 03 мая 2020

Хорошо, поэтому вероятный ответ, в конце концов, заключается в том, чтобы обернуть <picture> в контейнер <div> и применить CSS, включая хак padding-top, чтобы сохранить его соотношение сторон: 

<div style="position:relative;"width:100%;padding-top:33%>
<picture>
<source type="image/webp" 
     srcset="
        image_100.webp 100w, 
        image_200.webp 200w, 
        image_400.webp 400w, 
        image_600.webp 600w,
        image_754.webp 754w" 
        sizes="(min-width: 1058px) 1000px, 100%" />
<img srcset="
        image_100.png 100w, 
        image_200.png 200w, 
        image_400.png 400w, 
        image_600.png 600w,
        image_754.png 754w" 
        sizes="(min-width: 1058px) 1000px, 100%" 
        src="image_min.png" style="width:100%;height:100%;position:absolute" alt="image_alt" />
</picture>
</div>
  • CSS запасного варианта <img>: width и height установлены на 100%, а position:absolute
  • Оболочка <div> должна быть CSS position:relative, чтобы изображение было расположено внутри него "абсолютно".
  • <div> должно иметь width и padding-top, заданные для отражения размеров / соотношения сторон изображения.
  • CSS не требуется определять inline, поэтому размер оболочки div можно установить по-разному для разных размеров области просмотра с помощью медиазапросов.

Он работает как следует:

Элемент <img> полностью заполняет оболочку <div>. Благодаря position:absolute оболочка padding-top <div> не влияет на положение изображения. Процентное значение padding-top устанавливает его относительно элемента width , поэтому соотношение сторон остается постоянным (например, padding-top, установленный на 100%, сделает обертку всегда квадратной).

Основное преимущество для SEO / UX:

Независимо от того, что представляют собой значения sizes и srcset, если известны размеры (то есть соотношение сторон), мы можем создать заполнитель, используя CSS из отступление <img> и, таким образом, резервирование места для изображения, которое еще не было загружено или даже выбрано браузером из srcset.

В конечном итоге это предотвратит раздражающие изменения в макете страницы, вызванные изображением, нарисованным на странице, которая уже была отрисована.

...