Изображения почти всегда занимают больше половины веса типичной страницы сайта. Это значит, что грамотная работа с картинками — самый быстрый способ ускорить сайт, не трогая код и не меняя хостинг. Но «оптимизация» пугает многих владельцев сайтов как что-то техническое и рискованное — вдруг фото станет мутным. На практике всё проще, если разобраться в нескольких понятиях.
Почему картинки «весят» больше, чем кажется
Современные камеры и смартфоны снимают в разрешении, рассчитанном на печать или просмотр на большом экране — часто несколько тысяч точек по ширине, что при высоком качестве даёт файл на несколько мегабайт. На сайте эта же фотография обычно показывается в блоке шириной в несколько сотен точек. Загружать оригинал без изменений — всё равно что везти письмо на грузовике: результат тот же, но ресурсов потрачено в разы больше необходимого.
Разница в весе файла до и после разумной оптимизации почти всегда впечатляет: фотография, которая весила три-четыре мегабайта, после правильной обработки может весить в двадцать-тридцать раз меньше, оставаясь визуально неотличимой на экране.
Три параметра, которые определяют вес файла
Разрешение
Разрешение — это физический размер изображения в точках. Если картинка на странице показывается шириной в шестьсот точек, нет смысла хранить файл шириной в несколько тысяч точек — лишние точки просто не используются браузером, но исправно увеличивают вес файла. Единственное исключение — экраны с высокой плотностью пикселей, где картинку стоит готовить примерно в полтора-два раза больше видимого размера, чтобы она оставалась чёткой.
Формат файла
Разные форматы изображений по-разному справляются со сжатием. Один из старых распространённых форматов неплохо сжимает фотографии со множеством оттенков, но плохо подходит для изображений с крупными областями одного цвета — логотипов, иконок, скриншотов с текстом. Для таких изображений лучше подходят форматы, рассчитанные именно на плоскую графику. Современные форматы, разработанные специально для веба, дают заметно лучшее сжатие, чем старые, при сопоставимом визуальном качестве, и поддерживаются практически всеми современными браузерами.
Уровень сжатия
Даже в рамках одного формата можно сжать изображение сильнее или слабее. Полное, «безупречное» сжатие без единой потери качества почти всегда даёт файл заметно тяжелее, чем сжатие с небольшой, незаметной глазу потерей детализации. Для большинства фотографий на сайте умеренное сжатие с потерей качества — правильный выбор: разница в резкости незаметна человеческому глазу при обычном просмотре, а выигрыш в весе файла существенный.
Не путайте сжатие изображения с ухудшением его на глаз. Правильно применённое сжатие уменьшает вес файла в несколько раз, оставляя картинку визуально идентичной оригиналу для обычного посетителя сайта. Заметные артефакты сжатия — признак того, что уровень сжатия выбран слишком агрессивным, а не что сжатие как таковое вредно.
Практический порядок действий
- Обрежьте лишнее. Уберите из кадра то, что не нужно показывать — обрезка уменьшает вес файла ещё до сжатия и делает композицию точнее.
- Приведите к нужному размеру. Измените разрешение под реальный размер блока на странице, с небольшим запасом для чётких экранов.
- Выберите подходящий формат. Фотографии — в формат с хорошим сжатием фотографического контента, плоскую графику и логотипы — в формат для векторной или простой графики.
- Сожмите с разумным уровнем качества. Начните с умеренного сжатия и визуально сравните результат с оригиналом на реальном экране, а не только в масштабе сто процентов на большом мониторе.
- Проверьте итоговый вес. Ориентир для фотографии на типичной странице — десятки, а не сотни килобайт, за редкими исключениями для полноэкранных фоновых изображений.
Отложенная загрузка: экономия без сжатия
Отдельный приём, не связанный напрямую со сжатием, — отложенная загрузка изображений, которые находятся ниже первого экрана. Смысл в том, что браузер не загружает картинку, пока посетитель не долистает страницу до неё. Это не уменьшает вес самого файла, но ускоряет первый показ страницы: браузеру не нужно ждать загрузки десятков изображений, чтобы показать то, что посетитель видит в первую секунду.
Для длинных страниц с большим количеством фотографий — например, каталога интернет-магазина или портфолио — этот приём часто даёт больший эффект, чем ещё более сильное сжатие уже загруженных изображений.
Частые ошибки при подготовке изображений
| Ошибка | Почему это плохо | Как правильно |
|---|---|---|
| Загрузка оригинала с камеры без обработки | Файл в разы тяжелее необходимого, страница загружается медленно | Уменьшить до нужного размера перед загрузкой на сайт |
| Один формат для всех типов изображений | Плоская графика и логотипы плохо сжимаются в формате для фотографий | Подбирать формат под тип изображения |
| Чрезмерное сжатие | Заметные искажения, размытость, «мыло» на фотографии | Проверять результат визуально перед публикацией, не гнаться за минимальным весом любой ценой |
| Отсутствие альтернативного текста | Хуже доступность для людей с нарушением зрения и хуже понимание содержимого поисковыми системами | Добавлять короткое текстовое описание к каждому значимому изображению |
Автоматизация против ручной работы
Многие современные системы управления сайтом умеют частично автоматизировать оптимизацию изображений при загрузке — уменьшать разрешение, конвертировать в современный формат, применять базовое сжатие. Это удобно и снимает часть рутины, но не заменяет здравый смысл на входе: если на сайт постоянно загружают неотредактированные фотографии в исходном виде, автоматическая обработка лишь частично компенсирует лишний вес, а не устраняет его полностью. Лучший результат даёт сочетание: разумная подготовка изображений перед загрузкой плюс автоматическая обработка на стороне сайта как дополнительная подстраховка.
Как оптимизация изображений связана с общей скоростью сайта
Изображения — не единственный фактор скорости загрузки, но обычно самый весомый и самый простой в исправлении по сравнению с переработкой кода или сменой хостинга. Если вы только начинаете разбираться с медленным сайтом, разумно начать именно с картинок — эффект будет заметен быстрее всего. Полный разбор остальных факторов скорости и порядок действий по ускорению сайта в целом мы привели в отдельном материале — он логично продолжает тему, если изображения уже приведены в порядок, а сайт всё ещё открывается не так быстро, как хотелось бы.
Итог
Оптимизация изображений — это не про ухудшение картинки ради скорости, а про то, чтобы не тратить ресурсы посетителя на детали, которые он всё равно не увидит на экране. Правильный размер, подходящий формат и разумное сжатие вместе дают в разы более лёгкие страницы без заметной потери визуального качества. Если на вашем сайте накопилось много неоптимизированных изображений или вы готовите новый сайт и хотите сразу сделать всё правильно, мы можем помочь с этим в рамках услуги по ускорению сайта или на этапе создания сайта. Связаться с нами можно через страницу контактов.
