Как использовать изображение с низким разрешением для мобильных устройств?

Я разрабатываю отзывчивый сайт, используя медиа-запросы для изменения макета при изменении размера видового экрана.

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

Как отключить изображение высокого качества и заменить его более низким качеством изображения с помощью CSS?

Спасибо.

Ответ 1

Используя элемент HTML5 picture, вы можете указать встроенные медиа-запросы для размера изображений:

<picture>
 <source srcset="sm.png" media="(max-width: 400px)">
 <source srcset="mid.png" media="(max-width: 800px)">
 <source srcset="lg.png">
 <img src="lg.png" alt="MDN">
</picture>

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

Подробнее о элементе picture в MDN.

Кроме того, JS polyfill в случае, если резервное копирование тега img недостаточно!

Ответ 2

На момент написания этой статьи элемент picture практически не поддерживал браузер.

Итак, вот две альтернативы:

Если изображение получено из CSS, вы можете запретить его загрузку с помощью display: none.
Если изображение находится в теге HTML img, учтите, что браузер вызывает изображения из атрибута src. Вы можете обойти это, используя вместо этого атрибут data. Примените data ко всем изображениям и добавляйте src только тогда, когда вы хотите загрузить их.

HTML

  <img data-src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">

  $(document).ready(function() {
       $(this).find('img').each(function() {
         $(this).attr("src", $(this).data("src"));
       });
    });

Ответ 3

вы можете создать свой файл электронной таблицы css, добавив в экран просмотра нет изображения для больших изображений, новые мобильные браузеры не будут загружать большие изображения, если они содержат display: none в css, что позволяет загружать страницу быстрее, а также добавление отображения не для небольших изображений на рабочем столе будет делать то же самое.

Ответ 4

Это просто - создайте другое изображение с меньшим разрешением и поставьте его мультимедийные запросы.

Запросы СМИ могут помочь вам скрыть и показать элементы на основе разрешения экрана и типа носителя.

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