Иногда на сайтах можно встретить картинки большого размера, например, 3000×2000 пикселей, отображающиеся в меньшем размере, например, 150×100. Это называется масштабированные изображения, и они существенно замедляют загрузку сайта и «отжирают» мобильный трафик пользователей. Изображения составляют от трети до половины «веса» страницы сайта. Почти всегда сайт «тяжелый» из-за «тяжелых» изображений. Техники оптимизации изображений — наиболее важные и наиболее сложные составляющие методики ускорения сайта.
Откуда берутся масштабированные изображения
Причин для появления масштабированных изображений довольно много. И почти всегда — это ошибки веб-разработчиков, не учитывающие реального поведения страниц сайта на устройствах посетителей. Если одно и то же изображение должно использоваться в нескольких местах на сайте, и размеры изображения в этих местах различаются, то возникает большое искушение — ничего с исходным изображением не предпринимать, но в коде страниц сделать его масштабированным. Это требует существенно меньше усилий, чем подготовка всех вариантов изображения для всех возможных случаев. А иногда веб-разработчики даже не знают, что использование масштабированных изображений вредит сайту.
Второй распространенной причиной является, по сути, неплохая практика создания галерей изображений. Когда исходные изображения уменьшают (масштабируют) в коде страниц сайта, а при клике или наведении они показываются в полном размере. В этом случае пользователь не загружает 2 варианта изображения на одной и той же странице (уменьшенную и полноразмерную версии), и вроде должен быстрее загружать страницы сайта. Но такая практика тоже является ошибочной: посетитель сайта может ждать единственное — полноразмерное — изображение существенное время, и общее впечатление от сайта будет испорчено.
Если полноразмерное изображение на странице, по умолчанию, не показывается (требуется некоторое действие от посетителя — клик или движение мышкой), то загружать его сразу для пользователя является ошибкой. Правильным поведением будет создание также двух версий изображения, и подключение загрузки полноразмерных версий изображения сразу после окончания загрузки страницы (чтобы пользователь увидел их максимально оперативно при взаимодействии, но это не сказалось на первоначальной скорости загрузки сайта).
Как определить масштабированные изображения
Не все браузеры позволяют «в 1 клик» определить, используются изображения в натуральных или масштабированных размерах на сайте, но если вы используете Firefox, то правый клик по изображения, далее «Информация об изображении» покажет исходное изображение, используемое на странице сайта, — и можно будет понять, масштабированное оно или нет (если размеры изображения совпадают с его размерами на странице сайта, то оно не масштабированное).
Косвенным признаком наличия масштабированны изображений на сайте могут быть советы от Google PageSpeed Insights: если в рекомендациях избыточный размер изображений очень велик (например, превышает 1 Мб), то наверняка на сайте используются масштабированные изображения (обычно это единственная причина, по которой изображения в 5-10 раз больше, чем реально нужно).
Вы также можете определить, масштабированное изображение или нет, скопировав его адрес и открыв в новом окне браузера. Если размер изображения совпадает с его размеров на странице, то оно не масштабированное.
Как исправить масштабированные изображения
С одной стороны, алгоритм исправления проблемы прост: нужно найти все источники вызова масштабированных изображений и их исправить, обычно их число не превышает дюжины. С другой стороны, каждое место подключения масштабированного изображения может быть сложным в исправлении: например, сторонний плагин галереи, которых их загружает, может, в принципе, не предполагать использование натуральных размеров изображений.
Уже существует огромное количество автоматизированных инструментов для максимально быстрой интеграции масштабирование изображений на стороне сервера (чтобы исключить их масштабирование на стороне браузера). Например, можно воспользоваться проектом phpThumb (или его производными), модулем для nginx — http_image_filter_module, или необходимыми классами на серверном языке программирования. В любом случае, задача на исправление ошибок масштабирование изображений должна быть поставлена разработчику сайта.
Если ваш сайт уже подключен к Айри.рф, то вы можете решить описанную проблему одной настройкой — «Правильные размеры изображений» — в блоке «Настройки ускорения». При включении этой настройки на стороне пользователя сайта (в браузере) все изображения будут проанализированы, и если фактические размеры изображения больше используемых на странице, то изображение будет автоматически отмасштабировано в облаке Айри до нужных размеров.