Как запретить браузеру загружать изображения в мобильном окне просмотра

Question

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

, но в мобильной версии фотография установлена ​​надисплей: нет;

, но проверка показала, что браузер все равно его загрузил!

, поэтому я попытался display: none; отец div и все еще загружен,

есть ли способ остановить загрузку браузера?

Answer 1

Браузер не знает о CSS и что изображение не будет отображаться для мобильных устройств при анализе дерева DOM.

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

                            the media query   image display size
                                     v             v
<img src="./kitten.jpg" sizes="(min-width: 768px) 700px" />

Примечание. Атрибут размеры просто сообщает браузеру размер изображения, а не изменяет его размер.изображение.Вам все равно нужно будет сохранить любой CSS, связанный с изображением.

Answer 2

Вы можете использовать свое изображение как фоновое изображение.Он будет загружен только в том случае, если медиа-запросы будут приняты, поэтому для мобильных устройств картинка не загружается, а для настольных версий она загружается.

Недостатком является то, что Google не будет индексировать вашинапример, в Google Images, но если ваша картинка не приносит пользы пользователю / тексту, это неплохо.

---

Другой вариант заключается в том, что вы используете

<picture>
  <source media="(min-width: 768px)" srcset="your-desktop-picture.jpg">
  <source srcset="your-mobile-picture.jpg">
  <img src="fallback-for-old-browsers.jpg" alt="">
</picture>

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

---

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