Используйте srcset для автоматического выбора правильного размера изображения.
Согласно данным HTTP Archive , типичная веб-страница на мобильном устройстве весит более 2,6 МБ, и более двух третей этого веса составляют изображения. Это отличная возможность для оптимизации!
Краткое содержание
- Не сохраняйте изображения, размер которых превышает их размер для отображения на экране.
- Сохраните несколько размеров для каждого изображения и используйте атрибут
srcset, чтобы браузер выбирал самый маленький размер. Значениеwуказывает браузеру ширину каждой версии:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Сохраняйте изображения с правильным размером.
Вы можете ускорить работу своего веб-сайта и снизить потребление данных, используя изображения с размерами, соответствующими размеру экрана. Другими словами, задавайте изображениям правильную ширину и высоту при сохранении.
Взгляните на изображения ниже.
Они выглядят почти одинаково, но размер файла одного из них более чем в 10 раз превышает размер файла другого.
Первое изображение имеет гораздо больший размер файла, поскольку сохранено с размерами, значительно превышающими размер экрана. Оба изображения отображаются с фиксированной шириной 300 пикселей, поэтому логично использовать изображение, сохраненное в том же размере.
Для изображений фиксированной ширины используйте изображения, сохраненные с теми же размерами, что и размер экрана.
Но… что, если размер экрана будет меняться?
В мире, где используется множество устройств, изображения не всегда отображаются в одном фиксированном размере.
Изображения могут иметь ширину в процентах или быть частью адаптивных макетов, где размеры изображений изменяются в соответствии с размером экрана.
…а как насчет устройств с высокой потребностью в пикселях, таких как дисплеи Retina?
Помогите браузеру выбрать правильный размер изображения.
Было бы здорово, если бы каждое изображение было доступно в разных размерах, и браузер мог бы выбрать оптимальный размер для своего устройства и экрана? К сожалению, в вопросе выбора наилучшего изображения возникает замкнутый круг . Браузер должен использовать самое маленькое изображение, но он не может узнать ширину изображения, не загрузив его для проверки.
Вот тут-то и пригодится srcset . Вы сохраняете изображения разных размеров, а затем сообщаете браузеру ширину каждой версии:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Значения w показывают ширину каждого изображения в пикселях. Например, small.jpg 500w сообщает браузеру, что ширина изображения small.jpg составляет 500 пикселей. Это позволяет браузеру выбирать наименьшее возможное изображение в зависимости от типа экрана и размера области просмотра — без необходимости загружать изображения для проверки их размера.
Вы можете увидеть работу функции srcset на изображении ниже. Если вы используете ноутбук или настольный компьютер, измените размер окна браузера и снова откройте эту страницу. Затем воспользуйтесь панелью «Сеть» в инструментах браузера, чтобы проверить, какое изображение было использовано. (Вам нужно будет сделать это в режиме инкогнито или приватного просмотра, иначе исходный файл изображения будет кэширован.)
Как создать изображения разных размеров?
Для каждого изображения, которое вы хотите использовать с srcset , вам потребуется указать несколько доступных размеров.
Для отдельных изображений, таких как главные изображения, можно вручную сохранять изображения разных размеров. Если у вас много изображений, например, фотографии товаров, потребуется автоматизация. Для этого есть два подхода.
Включите обработку изображений в процесс сборки.
В процессе сборки вы можете добавить шаги для создания версий изображений разных размеров. Подробнее см. в разделе «Использование Imagemin для сжатия изображений» .
Воспользуйтесь сервисом обработки изображений.
Создание и доставка образов могут быть автоматизированы с помощью коммерческого сервиса, такого как Cloudinary , или его аналога с открытым исходным кодом, например Thumbor , который вы устанавливаете и запускаете самостоятельно.
Вы загружаете изображения высокого разрешения, и сервис обработки изображений автоматически создает и предоставляет изображения различных форматов и размеров в зависимости от параметров URL. Например, откройте это изображение на Cloudinary и попробуйте изменить значение w или расширение файла в адресной строке.
Сервисы обработки изображений также обладают более продвинутыми функциями, такими как возможность автоматической "интеллектуальной обрезки" для изображений разных размеров и автоматической доставки изображений WebP в браузеры, поддерживающие этот формат, вместо JPEG — без изменения расширения файла.
Что делать, если изображение отображается некорректно при разных размерах?
В этом случае вам потребуется использовать элемент <picture> для "художественного оформления": указать другое изображение или обрезать изображение в разных размерах. Чтобы узнать больше, ознакомьтесь с практической работой по "художественному оформлению" .
А что насчет плотности пикселей?
В устройствах высокого класса физические пиксели меньше (плотнее). Например, в телефоне высокого класса может быть в два или три раза больше пикселей в каждом ряду, чем в более дешевом устройстве.
Это может повлиять на размер, необходимый для сохранения изображений. Мы не будем вдаваться в подробности, но вы можете узнать больше из практического занятия "Использование дескрипторов плотности" .
А как насчет размера изображения на экране?
Вы можете использовать sizes , чтобы еще лучше настроить srcset .
Без этого атрибута браузер использует всю ширину области просмотра при выборе изображения из srcset . Атрибут sizes указывает браузеру ширину, на которой будет отображаться элемент изображения, поэтому браузер может выбрать наименьший возможный размер файла изображения — до того, как будут выполнены какие-либо вычисления компоновки.
В приведенном ниже примере sizes="50vw" указывает браузеру, что это изображение будет отображаться на 50% ширины области просмотра.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Вы можете увидеть это в действии на сайте simpl.info/sizes и в практическом руководстве "Указание ширины нескольких слотов" .
А как насчет поддержки браузерами?
srcset и sizes поддерживаются более чем 90% браузеров по всему миру .
Если браузер не поддерживает атрибуты srcset или sizes он будет использовать только атрибут src .
Благодаря этому функции srcset и sizes обеспечивают значительное постепенное улучшение!
Узнать больше
Для более подробного изучения оптимизации изображений ознакомьтесь с разделом «Оптимизация изображений» на сайте web.dev. Для более подробного ознакомления рекомендуем пройти бесплатный курс «Адаптивные изображения» от Udacity.