Еще более быстрая загрузка благодаря

тегу пикчер

Чтобы страница загружалась еще быстрее существуют специальные форматы изображений такие как webp, но к сожалению из за конкуренции, формат очень легких изображений не отображается во всех браузерах. Поэтому чтобы избежать казусов с загрузкой фотографий можно проложить путь в обход войны корпораций. Показывать для быстрых браузеров легкие изображения, а для их противников стандартные джепеги. С помощью тега изображений <picture> занести легкий формат такой как webp в отображение для поддерживающих их браузеров. Указав тип тега type=”image/webp” в source 

Как добавить webp изображение способы вставить вебпи артинки на сайт
тег пикчер

<source srcset=»img/awesomeWebPImage.webp» type=»image/webp»>

После чего можно не переживать что легкая картинка будет не доступна для неподдерживающих её браузеров. И спокойно сократить вес страницы для более быстрой её загрузки.

​<picture>

<source srcset=»mdn-logo.svg» type=»image/svg+xml»>

<img src=»mdn-logo.png» alt=»MDN»>

</picture> 

Тег пикчер совместим со всеми браузерами как пишут на сайте девелопер мозилла. https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture Поэтому его удобно использовать если нужно сократить размер изображений для ускорения загрузки и получить уверенность что картинка откроется в любом случае. 

<picture>
  <source media=»(min-width:650px)» srcset=»img_pink_flowers.jpg»>
  <source media=»(min-width:465px)» srcset=»img_white_flower.jpg»>
  <img src=»img_orange_flowers.jpg» alt=»Flowers» style=»width:auto;»>
</picture>

в тег пикчер так же можно указывать размер картинок сразу под размер экрана.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *