Как снизить вес изображений без ухудшения качества
За счёт изображений сайты выглядят более красочными. Некоторые ресурсы и вовсе без них не могут обойтись — интернет-магазины, личные блоги путешественников или фотографов. Мы уже рассматривали в этой статье приёмы для увеличения скорости загрузки сайта, в числе которых отметили и оптимизацию изображений. Это один из важнейших пунктов, потому что обычно именно из-за картинок веб-страницы грузятся медленно. В результате сайт теряет свои позиции в поисковой выдаче, а пользователи его покидают быстро, потому что не хотят долго ждать загрузки.
Выбрать правильный формат
Для каждого типа изображений есть свой формат. Фотографии должны иметь расширение jpg, а чертежи, печатный текст и подобные им элементы — png. Один и тот же файл может весить в два-три раза меньше, если ему просто правильно подобрать формат.
Jpeg позволяет сжимать изображения за счёт разбивки и объединения в группы отдельных пикселей по квадратам 8x8. А Jpeg 2000 обычно используют там, где нужно выводить очень много фотографий. У этого формата доступен больший уровень компрессии без потери качества. Но поддерживает его только браузер Safari. Качественно сжимает изображения и Jpeg-xr, но он тоже доступен далеко не всем, а только пользователям браузеров Internet Explorer 9 версии и старше.
Ещё два популярных формата:
- SVG. Предназначен для векторов — геометрических фигур, логотипов и простых изображений без сложных элементов. Если изменять их масштаб, качество будет всегда сохраняться.
- WebP. Этот формат позволяет сохранять изображения максимально чёткими благодаря особому типу сжатия: оно не затрагивает края. Его поддерживают все основные браузеры — Chrome, Opera, Firefox.
Уменьшить разрешение
Лучше всего сделать так, чтобы разрешение изображения равнялось месту, где оно размещается. А если нужно опубликовать его в исключительном качестве, то стоит приложить его отдельным файлом для скачивания.
Пользователи будут заходить на сайт с разных устройств, у каждого из которых своя ширина экрана. И если для большого экрана картинка в 1200 пикселей будет оптимальной, то при её выводе на планшете или телефоне ресурсы интернета и сервера будут использоваться впустую. Выход простой — прописать в HTML размеры для разных экранов по отдельности.
В атрибуте srcset прописывается несколько вариантов изображений с разной шириной. Откуда браузер будет брать нужные картинки и их размеры. А атрибут sizes подскажет ему видимую область, доступную для их вывода. Есть немало инструментов, которые могут экспортировать изображения в разных размерах, — например, Photoshop. Также существуют сервисы для автоматизированной обработки большого количества иллюстраций.
Оптимизировать растровые изображения
Фотографии — это растровые элементы. Они особенно нуждаются в оптимизации, так как каждый их пиксель весит 4 байта. В браузере 256 оттенков на каждый канал цвета, но далеко не всегда есть необходимость в таком изобилии. Поможет приём для снижения глубины цвета — ограничение палитры до 256 цветов. Это поможет вдвое уменьшить вес фотографии.
Есть алгоритмы наподобие ImageMin, удаляющие ненужные части изображений. Неиспользуемые цвета стираются, а очень похожие — объединяются. Можно создать целые блоки схожих оттенков, применив дельта-кодирование. Для этого нужно указать разницу между соседними пикселями. Если они имеют схожие цветовые значения, то дельта между ними будет нулевая, вес пикселя не превысит один бит.
Оптимизировать векторные изображения
Элементы в формате svg вы можете создавать прямо в текстовом редакторе, применяя тег svg. Разметку svg можно встраивать и в веб-страницы. А чтобы уменьшить размер таких изображений, используйте инструмент svgo. Он уберёт лишние сведения — метаданные редактора, комментарии, скрытые элементы, значения по умолчанию. При этом изображение останется качественным.
Встроить изображения в веб-страницы
Вес кнопки или лого можно дополнительно уменьшить если встроить их код в код веб-страницы. За счёт этого на сервер при загрузке контента будет поступать меньше запросов. Данные изображения преобразовываются в base64-строки, и результат помещается в атрибут src тега. В нём, например, можно прописать, что соответствующие сведения нужно определить как PNG-изображение в кодировке base64. После описания изображения размещаются символы, которые представляют его содержимое.
Применить Lazy loading
Браузеры автоматически сразу загружают все изображения веб-страницы. Из-за этого сайт становится медленным, но здесь может помочь ленивая загрузка изображений. Они будут появляться на веб-странице только в тот момент, когда понадобятся пользователю. Автоматическую загрузку же можно оставить для самых важных иллюстраций. Настроить Lazy loading можно при помощи JavaScript.
Можно использовать плагин lazysizes. Когда изображение должно появиться, содержимое атрибута data-src копируется в атрибут src. С атрибутом srcset это будет работать так же.
Если изображения у вас будут загружаться не сразу, потребуется заранее указать их размеры. Иначе может сдвинуться макет страницы. Нужно прописать нужные размеры в атрибутах height и width тега img, например, 1000 и 700. Они должны быть не в пикселях, а просто в виде чисел. Размер иллюстрации может и не составлять 1000 на 700 пикселей, однако такая информация поможет браузеру понять её пропорции.
Скрыть изображения на мобильных версиях
У смартфонов наименьшая производительность, и для них изображения лучше совсем отключить. Нужно просмотреть сайт и найти фотографии и другие элементы, которые можно убрать без нарушения смысла контента. А затем использовать атрибут sizes, где следует прописать правила для браузера. Так он сможет узнать, при каких условиях изображение нужно скрыть.
Запомнить
Тяжёлые изображения — одна из причин медленной загрузки сайта.
Для каждой картинки нужно подобрать правильный формат.
Следует уменьшить разрешение растровых и векторных изображений.
Можно встроить иллюстрации в код сайта.
Lazy loading — инструмент для отложенной загрузки картинок.
Некоторые изображения лучше скрывать на мобильных версиях.