Блог

Главная - Вопросы по программированию - Адаптивные изображения с помощью элемента изображения и медиа-запросов с помощью CSS

Адаптивные изображения с помощью элемента изображения и медиа-запросов с помощью CSS

#html #css #responsive-design #media-queries

Вопрос:

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

 <picture>
    <source media="(max-width: 300px)" srcset="/images/thumb.png ">
    <source media="(max-width: 500px)" srcset="/images/largethumb.png ">
    <img src="/images/original.png">
</picture>

Однако у меня на странице много изображений, так как же я могу уменьшить полезную нагрузку HTML? Я ищу что-то подобное, но не уверен, возможно ли это вообще:

HTML

 <picture>
    <source srcset="/images/thumb.png ">
    <source srcset="/images/largethumb.png ">
    <img src="/images/original.png">
</picture>

ПСЕВДО CSS

 picture source:nth-child(1){
    media:(max-width: 300px);
}
picture source:nth-child(2){
    media:(max-width: 500px);
}

Но я ничего не могу найти в Google.

Я уже проверил:

Комментарии:

1. ваш метод на самом деле является методом снижения нагрузки. Нет никакого CSS-способа, так как тогда все элементы будут загружены и просто скрыты CSS. Если вы хотите предотвратить нецелевое использование данных, вам необходимо запретить загрузку элементов непосредственно с помощью HTML или использовать JS для загрузки элементов только тогда, когда они появляются в окне просмотра. Это, однако, может вызвать неприятное заикание.

Ответ №1:

Я бы предложил использовать ленивую загрузку. Это буквально откладывает загрузку ресурсов на странице до тех пор, пока они не понадобятся. Например, при использовании API-интерфейса Intersection Observer изображения никогда не будут загружены, если пользователи никогда не доберутся до этой точки веб-сайта. Это означает серьезную экономию пропускной способности.

Есть несколько способов, как это сделать:

  1. Собственная ленивая загрузка
 <img src="yourimage.jpg" loading="lazy" alt="..." />

Более подробная информация здесь: https://web.dev/browser-level-image-lazy-loading/

  1. Использование API Intersection Observer Все подробности здесь: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  2. Вот также отличная статья о том, как идеально сочетать всю технику с адаптивными изображениями: https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/
Метки: