Когда мы размещаем изображения на наших веб-сайтах, мы обычно помещаем тег ‹img /› с соответствующим src.
Но на самом деле это не лучшая практика, когда мы хотим использовать эти изображения на сайтах, которые будут использоваться в производственной среде; Это связано с тем, что когда пользователь браузера Safari заходит на нашу страницу, он не сможет правильно видеть определенные изображения, особенно изображения в формате webp.
В этом случае простым решением будет оставить все изображения в формате png и избежать проблем.
Проблема с этим заключается в том, что это сильно наказывает на уровне SEO, поскольку Google всегда будет говорить нам, что мы можем сделать наш сайт быстрее, используя веб-изображения.
Еще одна проблема, с которой мы сталкиваемся, заключается в том, что когда мы хотим изменить изображения на небольших экранах, процесс, позволяющий это сделать, становится довольно долгим, не запутываясь в попытке или написав несколько строк css или js.
Лучший способ использовать изображения на веб-сайтах — это использовать тег ‹picture›, этот тег позволяет нам размещать список изображений, и браузер использует то, которое ему больше всего подходит, или то, которое подстраивается под заданное нами среднее значение.
Это позволяет нам размещать на нашем веб-сайте два изображения, одно в формате png, а другое — в формате webp, поэтому браузер будет отображать изображения в формате webp во всех браузерах, а в Safari — в формате png.
Мы также можем добавить среднее значение, чтобы показывать конкретное изображение, когда размеры экрана, который видит пользователь, изменяются, что экономит нам много строк кода JS или CSS, а также производительность.
Рассматривать:
Внутри тега Picture всегда должно быть img, чтобы вы могли использовать его в качестве изображения по умолчанию при рендеринге веб-страницы.
