5

В background-image можно поменять через media запросы, а как это сделать с тегом img? Например, для мобильников подставить картинку поменьше, чтобы они не грузили изображения по 1000px и более. Возможно ли решение через css или надо как-то по-другому?

3 ответа 3

9
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Дока: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Поддержка браузеров: https://caniuse.com/#search=srcset

6

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

<picture>
	<source srcset="https://via.placeholder.com/800" media="(min-width: 800px)" />
	<source srcset="https://via.placeholder.com/400" media="(min-width: 400px)" />
	<img src="https://via.placeholder.com/320" />
</picture>

-1

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

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.