Оптимизация изображений на сайте: вес, форматы и отложенная загрузка

Когда сайт грузится медленно, первое, о чём думают, — плохой хостинг. Иногда это правда. Но в подавляющем большинстве случаев, если открыть страницу и посмотреть, что именно она скачивает, картина одна и та же: восемьдесят-девяносто процентов веса — изображения. Фотография товара весом четыре мегабайта, баннер на восемь мегабайт, галерея из тридцати снимков, каждый из которых сделан на хорошую камеру и загружен на сайт как есть.

Разберём, как привести изображения в порядок и почему это самый быстрый способ ускорить сайт.

Почему изображения так важны для скорости

Скорость загрузки влияет на три вещи сразу.

На поведение людей. Человек, ждущий загрузки больше трёх-четырёх секунд, начинает нервничать. На мобильном интернете за городом эта задержка легко превращается в пятнадцать секунд, и посетитель уходит, не увидев ни одного вашего аргумента.

На позиции в поиске. Поисковые системы учитывают скорость как один из факторов. Прямое влияние не решающее, но косвенное — через поведение людей — очень существенное.

На стоимость рекламы. Если вы платите за клики, а часть людей уходит, не дождавшись загрузки, вы платите за впустую.

Изображения — самый крупный по весу тип содержимого на обычном сайте. Стили и скрипты измеряются сотнями килобайт, а неоптимизированные фотографии — мегабайтами. Поэтому работа с ними даёт наибольший эффект при наименьших усилиях.

Главная ошибка: размер, который никто не видит

Начинать нужно не со сжатия, а с размера в пикселях.

Типичная ситуация: фотограф отснял объекты, снимки в исходном разрешении — четыре тысячи на три тысячи точек. Их загрузили на сайт. В галерее эти фотографии показываются как миниатюры двести на сто пятьдесят точек, а при увеличении — не больше тысячи двухсот в ширину.

Что происходит на самом деле: браузер скачивает файл в полном разрешении, весом несколько мегабайт, а потом уменьшает его для отображения. Пользователь видит картинку размером с почтовую марку, но заплатил за неё полным трафиком и полным временем ожидания.

Правило простое: изображение должно храниться в том размере, в котором оно реально показывается. Ну или чуть больше — с запасом на экраны с высокой плотностью точек, но это запас в два раза, а не в двадцать.

Практические ориентиры для обычного сайта: большая картинка на всю ширину — от тысячи двухсот до тысячи девятисот точек по ширине; изображение внутри текста — от шестисот до девятисот; миниатюра в каталоге — от трёхсот до шестисот; иконка — сто-двести.

Уменьшение фотографии с четырёх тысяч точек до тысячи двухсот сокращает вес примерно в десять раз. Ни одно сжатие такого эффекта не даст.

Форматы: чем и когда пользоваться

После приведения размера в порядок наступает очередь формата.

Формат для фотографий с плавными переходами — тот, что традиционно используется для снимков. Он сжимает с потерями, зато очень эффективно. Подходит для фотографий объектов, людей, интерьеров, товаров. Не подходит для изображений с резкими границами и текстом — появляются заметные искажения вокруг контуров.

Формат для графики с прозрачностью и чёткими линиями — логотипы, схемы, скриншоты, иконки, любые изображения с плоскими цветами. Сжимает без потерь, поэтому для фотографий даёт огромный вес и применять его к снимкам не стоит.

Векторный формат — идеальный вариант для логотипов, иконок и простых схем. Файл описывает не точки, а линии и фигуры, поэтому весит копейки и остаётся идеально чётким на любом экране и при любом увеличении. Если у вас есть логотип в векторе, на сайте должен стоять именно он.

Современные форматы сжатия. За последние годы появились форматы, которые дают тот же визуальный результат при весе на двадцать-тридцать процентов меньше. Наиболее распространённый из них — ВебПи. Он поддерживается всеми актуальными браузерами и заметно экономит трафик. Более новые варианты дают ещё лучшее сжатие, но поддерживаются пока хуже.

Разумный подход: хранить изображение в современном формате, а для старых браузеров отдавать обычный вариант. Большинство современных систем управления сайтом умеет делать это автоматически.

Анимация. Старый анимированный формат картинок весит чудовищно много. Короткое видео вместо анимированной картинки весит в разы меньше при лучшем качестве.

Сжатие: где граница разумного

После правильного размера и формата остаётся сжатие — уменьшение веса за счёт качества.

Здесь важно понимать: разница между качеством девяносто пять процентов и восемьдесят процентов на глаз практически не видна, а вес отличается вдвое. Дальнейшее снижение уже заметно — появляются размытые области и артефакты вокруг контуров.

Практический ориентир: уровень качества восемьдесят-восемьдесят пять для фотографий на сайте. Для миниатюр можно опускаться и ниже, там детали всё равно не видны.

Отдельно стоит убирать служебные данные, которые камера записывает в файл: модель камеры, настройки съёмки, координаты места съёмки. Для сайта они бесполезны, а вес добавляют — иногда десятки килобайт на файл.

Целевые ориентиры по весу: большая фотография на всю ширину — до двухсот-трёхсот килобайт; изображение в тексте — до ста; миниатюра — до тридцати; иконка — единицы килобайт.

Если у вас страница, на которой висит шесть фотографий по два мегабайта, приведение их к этим ориентирам сократит вес страницы с двенадцати мегабайт до полутора. Разница во времени загрузки на мобильном интернете — секунды.

Отложенная загрузка

Даже правильно подготовленные изображения не нужно загружать все сразу.

Идея отложенной загрузки простая: браузер скачивает только те картинки, которые видны на экране прямо сейчас. Остальные подгружаются по мере прокрутки. Если на странице сорок фотографий, а человек посмотрел первые пять и ушёл, вы сэкономили тридцать пять загрузок.

Сегодня это реализуется одним атрибутом в разметке — никаких сложных скриптов не нужно, поддержка есть во всех современных браузерах.

Важная тонкость: отложенную загрузку нельзя применять к изображениям на первом экране. Главная картинка вверху страницы, логотип — они должны загружаться сразу, иначе человек видит пустое место в первые секунды, а это ухудшает восприятие скорости.

Вторая тонкость: под каждое изображение нужно заранее зарезервировать место, указав размеры. Иначе при подгрузке содержимое страницы будет прыгать — крайне раздражающий эффект, когда вы уже начали читать, а текст уехал вниз.

Что ещё стоит сделать

Разные изображения для разных экранов. Отдавать телефону ту же картинку шириной тысяча девятьсот точек, что и большому монитору, — расточительство. Современная разметка позволяет описать несколько вариантов, и браузер сам выберет подходящий. Для сайтов с большим количеством мобильного трафика это даёт существенную экономию.

Кэширование. Настройка на стороне сервера, при которой браузер сохраняет уже загруженные картинки и при повторном визите не скачивает их заново. Настраивается один раз, работает постоянно.

Сеть доставки содержимого. Если у вас посетители из разных регионов, изображения можно раздавать с серверов, расположенных ближе к пользователю. Для большинства локальных сайтов это избыточно, для крупных проектов — заметный выигрыш.

Автоматическая обработка при загрузке. Самое важное с точки зрения долгой перспективы. Если система управления сайтом сама уменьшает и сжимает загружаемые изображения, проблема перестаёт возвращаться. Иначе через полгода контент-менеджер снова зальёт двадцать снимков по четыре мегабайта, и всё придётся делать заново.

Изображения и поиск

Помимо скорости, у изображений есть ещё одна функция: они сами по себе приводят трафик через поиск по картинкам. Для товарных сайтов и всего, что связано с визуальным выбором, это заметный источник посетителей.

Что для этого нужно.

Осмысленное имя файла. Не набор цифр, а понятное описание латиницей.

Заполненный альтернативный текст. Короткое описание того, что изображено. Он же показывается, если картинка не загрузилась, и он же читается программами для незрячих пользователей. Писать нужно по-человечески: «монтаж приточной установки в квартире», а не перечисление ключевых слов через запятую.

Подпись под изображением. Не обязательна, но помогает и человеку, и поиску понять контекст.

Свои фотографии, а не из фотобанка. Уникальные изображения имеют шансы в поиске по картинкам; стоковые — практически нет, потому что тот же файл стоит ещё на тысяче сайтов.

Частые ошибки

Загружать снимки прямо с камеры. Самая массовая и самая дорогая ошибка. Один такой файл может весить больше, чем вся остальная страница.

Использовать формат для графики там, где нужен формат для фотографий. Скриншот, сохранённый правильно, весит пятьдесят килобайт; фотография, сохранённая в том же формате, — восемь мегабайт.

Растягивать маленькое изображение. Обратная крайность: картинку шириной триста точек показывают на всю ширину экрана, и она выглядит мыльной. Экономия веса здесь не оправдывает потерю впечатления.

Ставить отложенную загрузку на всё подряд. Включая изображения первого экрана, из-за чего страница выглядит пустой в момент открытия.

Не резервировать место под изображения. Содержимое прыгает при загрузке, человек теряет строку, которую читал.

Оптимизировать один раз и забыть. Через полгода на сайте снова полсотни тяжёлых файлов, потому что никто не настроил автоматическую обработку.

Гнаться за баллами в измерителях скорости. Стремление получить идеальную оценку иногда приводит к ухудшению качества картинок до неприемлемого уровня. Сайт для людей, а не для отчёта.

Забывать про альтернативный текст. Он бесплатный, занимает минуту и приносит пользу сразу по нескольким направлениям.

Как проверить, что у вас происходит

Самый простой способ — открыть страницу и посмотреть, сколько она весит целиком. Это видно в инструментах разработчика любого браузера, во вкладке с сетевыми запросами: там перечислены все загруженные файлы с их размерами, отсортировать можно по весу.

Обычно достаточно одного взгляда, чтобы понять масштаб проблемы. Если в списке видны файлы по два-три мегабайта — вопрос решён, работать надо с ними.

Второй способ — сервисы измерения скорости, которые дают оценку и список рекомендаций. Они полезны, но к их баллам стоит относиться спокойно: цель не в том, чтобы получить сто из ста, а в том, чтобы страница открывалась быстро на обычном телефоне при обычном интернете.

Третий способ, самый честный, — открыть свой сайт с телефона, отключив быстрый интернет и оставив мобильный. Ощущения обычно очень отрезвляющие.

С чего начать, если картинок много

Когда на сайте несколько тысяч изображений, перебирать их вручную бессмысленно. Разумный порядок такой.

Сначала найдите самые тяжёлые файлы. Обычно выясняется, что основной вес создают несколько десятков картинок, а не вся библиотека. Замена этих нескольких десятков решает большую часть проблемы.

Затем займитесь самыми посещаемыми страницами. Главная, основные страницы услуг, популярные разделы каталога. Эффект от их ускорения почувствуют больше всего людей.

После этого настройте автоматическую обработку новых загрузок, чтобы проблема не возвращалась.

И только потом, если есть время и желание, проходите по остальному архиву пакетной обработкой.

Такой порядок даёт девяносто процентов результата за десять процентов усилий. Попытка начать с полной переработки всех изображений обычно заканчивается тем, что работа бросается на середине.

Что в итоге

Оптимизация изображений — редкий случай, когда небольшая техническая работа даёт быстрый и хорошо заметный результат. Приведение размеров в порядок, разумное сжатие, современный формат и отложенная загрузка вместе легко сокращают вес страниц в пять-десять раз.

Главное — не превратить это в разовую акцию. Если изображения не обрабатываются автоматически при загрузке, через несколько месяцев всё вернётся к исходному состоянию. Настройка автоматической обработки на стороне сайта важнее, чем однократная чистка галереи.

И ещё: не стоит впадать в другую крайность и ухудшать качество фотографий ради цифр в отчётах. На сайте, где визуальное впечатление продаёт, размытая картинка стоит дороже, чем лишняя секунда загрузки.

Если хотите понять, что тормозит именно ваш сайт, сколько весят ваши страницы и что можно исправить в первую очередь, — специалисты компании «Сайты Профессионально» проведут бесплатную диагностику скорости, посмотрят, как обрабатываются изображения на вашей платформе, и предложат решение, которое будет работать без вашего постоянного участия. Мы девятнадцать лет занимаемся сайтами и умеем отличать ситуацию, где достаточно почистить картинки, от ситуации, где проблема глубже.