Как стать автором
Обновить
0

Чеклист оптимизации изображений

Время на прочтение 6 мин
Количество просмотров 9.9K
Автор оригинала: Tammy Everts
Все мы знаем знаменитое выражение «Content is king». Но, если говорить более конкретно, нужно уточнить, что в Интернете важнее всего изображения (как копирайтеру, мне сложно говорить эти слова, но это действительно так).

Как пользователи интернета, мы жаждем изображений — чем больше, тем лучше. Но, как разработчики, создатели контента и владельцы сайтов, мы впадаем в тоску из-за проблем с изображениями. По последним данным HTTP Archive, средняя страница весит 1795 КБ, из которых 56% (1000 KB) занимают изображения. Это делает изображения, наверное, наиболее благодатной почвой для улучшения скорости загрузки страниц. И это — то, почему мы в Radware так много времени вкладываем в оптимизацию изображений.

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


Изображение взято с сайта litmus.com



Качественнее, лучше, больше. Все мы подсознательно любим изображения.



Добавление новых или увеличение имеющихся изображений — это проверенный способ повышения конверсии:



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

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



Ранее в этом году, Radware сделал несколько увлекательных (по крайней мере для меня) исследований того, как люди реагируют на различные варианты изображений, совершая покупки. Также, мы дополнительно опросили 742 участника исследования о том, что они думают об изображениях в интернете. Вот что нам ответили…

Когда вы начинаете работать с сайтом?




Чувствовали ли вы когда-нибудь разочарованными, когда загрузка изображений занимала слишком много времени?




Результаты некоторых других наших исследований:

  • Около одной трети респондентов утверждают, что они обращают внимание на то, как быстро загружаются изображения. Только 1 из 10 думают, что это не имет значения.
  • Около половины утверждают, что то, как быстро загружаются изображения, влияет на ощущение от посещения страницы. Также, 4 из 10 человек утверждают, что им не нравится, когда изображения загружаются медленно.
  • Женщины чаще, чем мужчины, ожидают загрузки изображений до начала взаимодействия со страницей.


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

8 вещей, которые вы должны делать (если вы еще не делаете их) для ускорения загрузки изображений



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

1. Сжатие изображений


Сжатие изображений — это способ увеличения скорости загрузки изображений, который минимизирует размер графического файла (в байтах) без ухудшения качества изображения до неприемлемого уровня. Несмотря на это, мы обнаружили, что 43% из 100 лучших ретейловых страниц не сжимают изображения.

Сокращение размера изображений имеет следующие преимущества:

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


2. Выбор правильного формата изображений


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

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

  • Фото — JPEG, PNG-24 (PNG-24 — на самом деле не лучший выбор для фото, скорее, он больше подходит для скриншотов и других изображений с текстом. Прим. переводчика)
  • Несколько цветов — GIF, PNG-8
  • Несколько цветов с прозрачностью — GIF, PNG-8
  • Множество цветов с прозрачностью — PNG-24
  • Векторные изображения — SVG


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

3. Пара слов о WebP


Это касается как сжатия, так и формата. WebP (о котором вы можете прочитать больше в блоге Google Dev) — это новейший формат изображений, который предлагает сжатие как с потерями, так и без потерь для изображений в интернете. В Radware мы экспериментировали с форматом — который мы называли PerfectImage — который принимает сжатое с потерями изображение WebP и ухудшает его до тех пор, пока его индекс структурного сходства (SSIM) не достигнет 0.985 по сравнению с оригиналом.

4. Спрайты


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

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


Этот принцип кажется очень простым, но удивительно, как много раз я анализировал страницы, которые загружают основное содержимое в последнюю очередь. Владельцы сайтов должны быть осведомлены о проблемах юзабилити из-за задержки отображения содержимого: по данным этого eyetracking исследования группы Нильсена Нормана, пользователь, у которого страница отображается мгновенно, 20% от времени её просмотра находится в пределах функциональной области страницы, в то время как пользователь, у которого изображения загружаются 8 секунд, тратит только 1% времени от просмотра, глядя на рекомендуемые места на странице.



6. Отложить загрузку второстепенных изображений (очевидное следствие пункта 5)


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

7. Автоматическая предзагрузка изображений


Разница с обычной предварительной загрузкой браузера в том, что автоматическая предзагрузка изображений это мощная техника повышения производительности, когда все пути пользователя по сайту наблюдаются и записываются. Основываясь на огромном количестве накопленных данных, «движок» автоматической предзагрузки может предсказать, куда пользователь скорее всего перейдёт, основываясь на посещении предыдущих страниц и на том, на какой странице он сейчас находится. «Движок» загружает ресурсы (например, изображения) тех страниц, которые пользователь скорее всего посетит следующими, в кэш браузера, что позволяет скоратить время загрузки на 70%.

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

8. Повышение ценности загружаемого контента


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

Напоследок



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

С наилучшими пожеланиям, команда проекта Generate.Club.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
А вы уже оптимизируете изображения?
11.24% Да, использую все перечисленные методы 20
67.98% Да, использую некоторые из перечисленных методов 121
20.79% Нет, просто заливаю картинки в первом попавшемся формате 37
Проголосовали 178 пользователей. Воздержались 63 пользователя.
Теги:
Хабы:
+11
Комментарии 25
Комментарии Комментарии 25

Публикации

Информация

Сайт
generate.club
Дата регистрации
Дата основания
Численность
2–10 человек
Местоположение
Россия

Истории