Как создать эффективные заголовочные изображения для адаптации к разным размерам экрана без пикселизации
Я создавал сайт на своем ноутбуке. И я сохраняю ширину заголовка изображения до 100% и высоту 400px. Я оптимизирую свои изображения размером от 800 px x 600 px до 1920 px x 1800 px, чтобы получить около 20 Кбайт с помощью инструментов оптимизации в Интернете и в автономном режиме. Что бы ни выглядело хорошо на моем экране, я использую их. Но изображения теряют свое качество на больших экранах.
Я предполагаю, что я совершенно не прав в своем подходе.
Я в недоумении относительно того, как добиться, чтобы мои изображения заголовков имели супер качество на всех экранах, не будучи более тяжелыми, чем около 20 КБ. (Я считаю, что это достаточно хороший вес на изображение на странице с точки зрения скорости загрузки). Я мог быть совершенно не в порядке. Мне нужно знать, как профессиональным разработчикам и шаблонам удается получить эти совершенные изображения с низким весом и высоким качеством. Это полностью процесс Photoshop или есть и другие методы?
Страница, на которую я ссылаюсь, находится здесь http://www.mylaundrywla.com/
1 ответ
Вы должны использовать picture элемент.
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
Элемент picture - это шаблон разметки, который позволяет разработчикам объявлять несколько источников для изображения. Используя медиа-запросы, он дает разработчикам контроль над тем, когда и будут ли эти изображения представлены пользователю.
Источник - http://responsiveimages.org/
Глобальная поддержка браузеров на 74,27% в соответствии с caniuse.com
Picturefill
Это может быть заполнено Javascript для работы в неподдерживаемых браузерах.
Адаптивное изображение, заполненное для
<picture>,srcset,sizes, и больше.