@AlexanderSek
Верстка, UX/UI

Забирает ли alt из тэга и нужен ли сейчас Picturefill? Адаптивные изображения?

Здравствуйте. Стоит задача сделать так что бы при загрузке на разные экраны (пк версия и мобильная) подставлялись разные версии изображения (стандартное в высоком разрешении и облегченное) для того что бы увеличить скорость загрузки страницы для пользователей на мобильном интернете. Интересует несколько вопросов:
1. Нужно ли использовать сейчас библиотеку PictureFill или браузеры уже сами могут работать с тэгом picture? Я заметил через инструменты разработчика что даже без неё при маленьком экране подставляются уже оптимизированные картинки
2. Будут ли забираться картинки в индекс, а также их alt атрибут при использовании тэга picture? пример:

<picture>
            <source srcset="assets/image/banner-1920.jpg" media="(min-width: 941px)"> <!-- Изображение в высоком разрешении-->
            <img src="assets/image/banner-900.jpg" srcset ="assets/image/banner-900.jpg" alt="Пример альта" class="banner-image banner-image-big"> <!-- Изображения для мобильных устройств-->
        </picture>

  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
@tyzberd
есть такая страница
https://support.google.com/webmasters/answer/11401...
там сказано
Зачастую именно изображения больше всего утяжеляют страницу и тормозят ее загрузку, из-за чего может дополнительно расходоваться трафик. Рекомендуем решить эту проблему с помощью новейших методов оптимизации и создания адаптивных изображений.

и в этом тексте есть ссылка на https://developers.google.com/web/fundamentals/des... где написано про picture, есть пример с alt, про поддержку браузерами есть.
и вот поддержка https://caniuse.com/#feat=picture

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Если речь идет о ширине экрана менее 450 пикселей и устройстве с нисходящей совместимостью, элемент picture поддерживаться не будет. В этом случае для вывода изображения на экран браузер использует элемент img (он должен быть включен).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы