Тег изображения против CSS медиазапроса - PullRequest
Новая
       10

Тег изображения против CSS медиазапроса

0 голосов
/ 12 октября 2018

Я хочу узнать о преимуществах использования тега Picture по сравнению с медиа-запросом CSS с точки зрения чистой производительности (время загрузки сайта).Я занимаюсь разработкой веб-сайта, и клиенты заставляют меня использовать тег изображения, но я думаю, что оба они одинаковы.Дайте мне знать ваш вклад. 

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

или

с использованием медиазапроса и нацеливания на отдельные теги изображений.

1 Ответ

0 голосов
/ 16 октября 2018

Медиа-запрос работает следующим образом: даже когда вы просматриваете веб-сайт на рабочем столе, он по-прежнему загружает стили для мобильных устройств.

Пример: если вы прячете маленькое изображение на рабочем столе, на рабочем столе все еще малоизображение будет загружено, но не будет отображаться (если оно скрыто).

Тег изображения: если у вас есть 3 разных изображения для мобильного, планшета и рабочего стола.При загрузке страницы (когда на мобильном телефоне) тег Picture будет загружать только изображение с мобильного устройства, он будет пренебрегать другими 2.

. Если вы хотите протестировать: 1. Напишите HTML-код, который вы использовали выше, для 3 различных изображений.2. Как только вы окажетесь на рабочем столе, загрузите страницу.Теперь у вас есть изображение рабочего стола, которое вы можете увидеть.3. Отключите интернет от вашего ноутбука.4. В режиме реагирования браузера продолжайте уменьшать экран. 5. Когда он достигнет ширины планшета, вы увидите, что изображение не будет видно и оно будет повреждено.6. Это означает, что изображение для планшета не было загружено ранее при загрузке страницы.

...