SEO - Оптимизация изображений

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

Согласно HTTP-архиву, 60% данных представляют собой изображения, состоящие из JPEG, PNG и GIF. По состоянию на начало 2018 года, на изображения приходилось 1.7 Mb содержимого, загруженного на страницу сайта среднего размера в 3.0 Mb. Чем больше сжато изображение, тем меньше пропускной способности канала занимает скачивание и тем быстрее браузер сможет показать страницу пользователю.

Прежде всего задайте себе вопрос: действительно ли это изображение необходимо? Хороший дизайн должен быть простым и не ухудшать производительность. Лучшего всего просто удалить ненужное изображение, поскольку оно весит гораздо больше байтов по сравнению с HTML, CSS, JavaScript и другими ресурсами на странице. При этом одно изображение в нужном месте может заменить длинный текст, поэтому вам нужно самостоятельно найти баланс и принять правильное решение.

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

https://calendar.perfplanet.com/2014/images-are-king-an-image-optimization-checklist-foreveryone-in-your-organization/

Естественно, что это должны быть не “котики” и “собачки”, а совершенно необходимые и тщательно продуманные изображения. Вот ряд примеров из статьи, приведенной выше:

  1. Интернет-магазин DueMaternity.com повысил коэфициент конверсии на 27%, когда они изменили обычные двумерные изображения товаров на трехмерные вращающиеся изображения.
  2. В тесте А/Б своей целевой страницы Medalia Art обнаружила, что замена изображения картин известных художников на фотографии самих художников увеличивает коэффициент конверсии более чем на 95%.
  3. Skinner Auctions провела тест А/Б, где они увеличили размер изображений в своем онлайн-каталоге на 28%. Более крупное изображение привело к тому, что на 63% больше посетителей начали процесс оформления заказа.
  4. Компания Dell также провела А/Б тестирование. Они добавили крупные фотографии на целевых страницах. При этом они отметили уменьшение числа отказов на 27%и увеличение продаж на 36%.

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

благодаря CSS-эффектам (градиентам, теням и т.д.) и CSS-анимации вы можете создать ресурсы, которые четко выглядят при любом разрешении и масштабе, и весят гораздо меньше, чем изображения;

Веб-шрифты позволяют использовать красивые надписи, сохраняя возможность выбирать и искать текст, а также менять его размер. Благодаря этому работа с вашим ресурсом станет еще удобнее.

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

Конечно, веб-шрифтам также требуется оптимизация, но они помогут избежать вышеперечисленных проблем. Для отображения текста всегда выбирайте именно их. Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них некоторые браузеры поддерживают новые форматы WebP и JPEG XR, для которых доступно большее сжатие и дополнительные возможности:

  1. Изображение должно быть анимированным? Тогда выбирайте формат GIF. Цветовая палитра GIF состоит всего из 256 цветов. Этого недостаточно для большинства изображений. Кроме того, формат PNG-8 лучше сжимает изображения с маленькой палитрой. Таким образом, выбирайте GIF только если вам требуется анимация.
  2. Нужно сохранить все мелкие детали в самом высоком разрешении? Используйте PNG. В формате PNG не применяется сжатие с потерей данных, не считая выбора размера палитры. Благодаря этому изображение сохраняется в самом высоком качестве, но весит гораздо больше, чем файлы других форматов. Используйте этот формат только там, где это необходимо.
  3. Если изображение состоит из геометрических фигур, конвертируйте его в векторный (SVG) формат!
  4. Избегайте текста в изображениях. Его нельзя выбрать, найти или увеличить. Если текст необходим для создания дизайна, используйте веб-шрифты.
  5. Вы оптимизируете фотографию, скриншот или изображение похожего типа? Используйте JPEG. В JPEG используется комбинация сжатия с потерями и без потерь для уменьшения размера файла. Чтобы выбрать лучшее сочетание качества и размера изображения, попробуйте установить несколько уровней качества JPEG.

Немного про JPEG. Так как это формат с потерей данных, то с увеличением уровня компрессии, качество и размер изображения будут снижаться.

Так, на левом изображении, где уровень качества равен 100, размер изображения составит 275 КБ. На правом изображении уже заметны артефакты - там уровень качества выставлен в 10, при этом размер изображения равен 19 КБ - т.е. сжатие более чем в 10 раз.

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

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

Формат изображения JPEG имеет несколько режимов сжатия. Три самых популярных режима - базовый (последовательный), прогрессивный (Progressive JPEG) и формат сжатия без потерь.

JPEG с базовым сжатием кодируются и декодируются относительно простым способом: сверху вниз. На медленных сетях загрузка будет происходить следующим образом:

Прогрессивные JPEG загружаются от размытого до резкого. Для этого прогрессивные JPEG делят изображение на несколько “проходов”. Первый проход показывает изображение в размытом или низком качестве, а последующие улучшают качество изображения.

Оптимизация без потерь JPEG может быть достигнута путем удаления данных EXIF, добавленных цифровыми камерами или редакторами, оптимизации таблиц Хаффмана изображения или повторного сжатия изображения.

Возможность PJPEGs предлагать “предварительный просмотр” изображения с низким разрешением изображения при загрузке повышает воспринимаемую пользователем производительность. Посетители могут почувствовать, что изображение быстрее загружается по сравнению с адаптивными изображениями.

При медленных соединениях 3G это позволяет пользователям видеть (примерно) то, что находится в изображении уже при получении части файла. Прогрессивный формат сжатия (PJPEG) лучше работает на крупных изображениях. При этом экономия может составлять 2-10% от базового формата сжатия. Существуют еще некоторые настройки сжатия JPEG, но с ними вам предстоит разобраться самостоятельно.

Итак, выбрав подходящий формат и его настройки для всех изображений, вы можете рассмотреть и добавить дополнительный вариант в WebP и JPEG XR. Это относительно новые форматы, которые пока не поддерживаются во всех браузерах. Однако с их помощью можно значительно уменьшить размер файла. Например, WebP сжимает изображение на 30% лучше, чем JPEG.

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

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

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

Неплохая программулька по оптимизации изображений доступна здесь:

https://imageoptim.com/versions.html

Ранее я еще рекомендовал онлайн-софт для пакетного сжатия изображений:

https://kraken.io/web-interface

В целом, таких сервисов десятки.

Как понять, нужно мне производить оптимизацию изображений или пусть все остается как есть? Да очень просто - запустите тест:

https://www.webpagetest.org/

Посмотрите раздел “Сжатие изображений в отчете”.

Здесь будут отображаться изображения, которые могут быть сжаты более эффективно, и общая экономия на размере файла.

Найдено 21 изображение общим размером 5 Mb, которое можно ужать при определенных условиях до 631Kb - т.е. экономия составит около 87%. Ну и ниже будут приведены примеры обработки всех изображений.

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

Теперь исключительно мобильная заморочка с экранами повышенной плотности.

Понакупят всяких яблок и ходят, требуют картинки им выдать повышенной плотности. Бывают 2-х кратная плотность, как на скрине, а бывает что и трехкратная плотность. А так как у меня их нет, то они получают 404 ошибку. Что это такое вообще и как с этим жить дальше?

В данном случае происходит запрос на предоставление изображения на основе размера/плотности экрана с использованием < picture >/ < img srcset >.

Очень удобно, когда браузер способен выбирать, какой формат изображения отображать с помощью тега < picture >.

Тег < picture > использует несколько < source >-элементов и с одним тегом < img >, который является фактическим DOM-элементом, содержащим ссылки на изображения. Браузер циклически перебирает эти ссылки на изображения и отображает нужную картинку при совпадении условий. Если тег < picture > не поддерживается браузером, то будет отображена картинка в теге < img >.

Атрибут srcset расширяет функциональные возможности элемента img. Благодаря ему вам будет проще назначать изображения с учетом параметра устройства. Как и в случае с img-set (функция CSS), атрибут srcset позволяет браузеру выбирать наиболее подходящее изображение в зависимости от характеристик устройства.

Например, использовать изображения 2х на экране 2х и, потенциально, изображения 1х на устройстве 2х при ограниченной пропускной способности сети:

Если браузер не поддерживает атрибут srcset, по умолчанию файл с изображением импортируется с помощью атрибута src. Вот почему так важно включать изображение 1х, которое может отображаться на любых устройствах, независимо от их свойств. Если браузер поддерживает атрибут srcset, вы можете определять список источников изображений и условий (через запятую) до поступления запроса. В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства.

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

Если вы хотите, чтобы изображения менялись в зависимости от характеристик устройства (эффект art direction), воспользуйтесь элементом picture. Элемент picture задает декларативное решение для обеспечения нескольких версий одного изображения в зависимости от различных характеристик устройства: размера, разрешения, назначения и т.д.

Используйте элемент picture если у источника изображения несколько вариантов плотности пикселей, а также если в рамках отзывчивого веб-дизайна для некоторых типов экрана назначаются изображения с различающимися характеристиками. Как и в случае с video, вы можете указать несколько элементов source и назначать разные файлы изображений для разных медиазапросов или форматов изображений.

В приведенном выше примере при ширине браузера не менее 800 пикселей будет использован формат head.jpg или head-2x.jpg (в зависимости от разрешения экрана устройства). Если ширина браузера от 450 до 800 пикселей, применяются форматы head-small.jpg или head-small-2x.jpg (также в зависимости от разрешения экрана устройства). Если речь идет о ширине экрана менее 450 пикселей и устройстве с нисходящей совместимостью, элемент picture поддерживаться не будет. В этом случае для вывода изображения на экран браузер использует элемент img (он должен быть включен).

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

Не нужно указывать фиксированные размеры изображения и плотность пикселей. Вместо этого вы можете определять размер обрабатываемого изображения, добавив дескриптор width. Это позволит браузеру автоматически вычислить оптимальную плотность пикселей и выбрать корректное изображение для загрузки.

Выше приведено изображение, которое занимает половину ширины области просмотра (sizes=”50vw”) и зависит от ширины браузера и его соотношения логических и физических пикселей. В результате браузер может выбрать изображение, которое будет корректно отображаться в окне любого размера.

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

В приведенном выше примере атрибут sizes определяет размеры изображения с помощью различных медиазапросов. Если размер окна браузера превышает 600 пикселей, изображение будет занимать 25% области просмотра. При размере браузера от 500 до 600 пикселей это значение увеличивается до 50%, а при размере меньше 500 пикселей изображение становится полноэкранным.

Поехали дальше. Существует мнение, что спрайты (CSS-спрайтинг) увеличивают скорость загрузки, сокращают число обращений к серверу и т.д. Это очень старая техника и представляет собой объединение нескольких изображений в одно - так называемый лист спрайта. вот как отдельные изображения выводятся на экран: фоновое изображение настраивается только для одного элемента (лист спрайта), а затем корректируется таким образом, чтобы на экране отображалась только нужная часть фона.

Использование спрайтов началось чуть ли не с основания WEB, так что это проверенная и отработанная технология, применяемая на большинстве коммерческих сайтов. Однако все это было справедливо в эпоху HTTP/1.0 и HTTP/1.1. Если ваш сервер настроен на новый протокол HTTP/2, то скорее всего использование спрайтов не даст особого преимущества из-за доступности параллельной загрузки изображений. В целом, экспериментируйте, тестируйте и пробуйте. Следующий путь оптимизации - использование отложенных изображений (ленивая загрузка, Lazy Loading).

Данная техника полезна для “некритических” изображений, как правило расположенных ниже уровня сгиба. Отложенная загрузка может значительно ускорить работу длинных веб-страниц с большим количеством изображений. При этом загрузка происходит по мере необходимости или после загрузки и вывода на экран базового контента. Эта техника не только повышает эффективность работы веб-сайта, но и используется для создания страниц с неограниченной постраничной прокруткой. Ленивая загрузка не поддерживается браузером - для ее работы необходима JavaScript-библиотека.

Преимущества ленивой загрузки таковы:

- Сокращение числа запросов к серверу, количества передаваемых данных с сервера. Особенно это полезно для мобильных устройств, так как минимизирует потребление трафика.
- Улучшенная скорость загрузки. Уменьшение общего времени загрузки страницы на тяжелом веб-сайте с нескольких секунд до практически мгновенной загрузки, до времени первого взаимодействия с сайтом (еще одна метрика, которая показывает когда пользователь может приступить к работе с сайтом).

Но есть и ряд ограничений. Например, необходимо избегать “ленивой” загрузки для видимой части экрана, т.е. над уровнем сгиба.

Для интеграции “ленивой” загрузки на сайт есть ряд плагинов и расширений для большинства распространенных CMS.

Можно использовать и отдельные библиотеки, например:

https://github.com/aFarkas/lazysizes

Никаких особых настроек не требуется, достаточно подключить библиотеку на страницу

И можно приступать к работе. Пример ленивой загрузки обычного изображения:

“Ленивая” загрузка адаптивного варианта изображения

Обратите внимание, что здесь в data-src загружается image2.jpg, который является временным заполнителем места для картинки. Ну и пример ленивой загрузки видео

Еще больше разнообразных вариантов ленивой загрузки можно посмотреть здесь:

http://afarkas.github.io/lazysizes/#examples

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



Copyright 2018 SEO-MOB.ru