Оптимизация изображений — полное руководство

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

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

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

Обзор типов графических файлов, которые можно встретить в сети

Любой, кто когда-либо нажимал кнопку «Сохранить как» в Photoshop, может отметить, что в мире существует великое множество графических форматов. Но, когда дело доходит до публикации изображений в сети, мы имеем дело с фиксированным набором доступных опций.

Все множество потенциальных изображений можно разделить на две категории:

1. Векторная графика: математически сгенерированные из базовых геометрических фигур, таких как точки, линии и кривые, изображения.
2. Растровая графика: изображения, состоящие из прямоугольной сетки пикселей.

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

Векторные изображения

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

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

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

Это привело к довольно странной практике, когда дизайнеры, создающие ассеты для веб-сайта в таких вектор-дружественных редакторах, как Adobe Illustrator или Sketch, вынуждены экспортировать множество размеров и не векторных форматов для использования online.

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

Растровые изображения

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

GIF

Созданный в 1987 году, GIF-формат (формат для обмена изображениями) – это ветеран в мире интернет-изображений. Его отличает малый размер, лимитированная цветовая палитра – 256 цветов и поддержка прозрачности, что сделало этот формат рабочей лошадкой на заре интернета и популярным решением для изображений содержащих текст и/или области плоского цвета.

Несмотря на то, что GIF-формат опять стал популярен с появлением анимированных гифок, он проигрывают формату PNG.

JPEG

JPEG стал мировым стандартом для отображения фотографий онлайн с первого дня своего существования,  и его продолжают использоваться в сети повсеместно в более чем 70% случаев.

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

PNG

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

8-битный формат – это замена GIF-файлам, благодаря их малому размеру, в то время как 24-битные и 32-битные варианты потенциально способны заменить JPEG-файлы.

WebP

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

Проект WebP от Google способен изменить существующую картину интернет-бытия, предложив новый графический стандарт, способный уменьшить файловый размер на 25% Естественно, что сейчас этот формат поддерживается преимущественно в Chrome, но пройдет время, и он будет использоваться глобально.

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

Когда нужно оптимизировать

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

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

К сожалению, ответ – это жесткое «нет». Очевидно, что скорость загрузки наиболее актуальна для мобильной сферы.

Новая мобильная реальность

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

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

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

Пользователи предпочитают быстрые страницы

Исследования, проведенные на HTTP Archive, показывают, что изображения – это вторая после Javascript-отягощения причина того, что страница начинает весить в районе 1.25MB, а это далеко от веса 5K, который представляет собой актуальный вызов наших дней. 73% пользователей мобильного интернета жалуется на то, что вместо ожидаемых 2 секунд, страница загружается не меньше семи.

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

Перегрузка графикой может влиять на ранжирование сайта поисковыми машинами

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

Ваша страница должна загружаться за пару секунд или меньше: лишние 200K, содержащиеся в «шапке» сайта, могут лишить вас посетителей мобильного интернета.

Медленная загрузка страниц способна лишить вас части прибыли

Соедините два предыдущих пункта, и вы получите идеальный  рецепт медленного банкротства. Исследование на Strangeloop показывает, что каждая вторая задержка в загрузке страницы ведет к потере конверсии равной 7% или более.

Контроль размера на ранних порах

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

В зависимости от вашей камеры, они могут достигать размера 7,360 x 4,912 пикселей и весить более чем 30mb. Для веб-пространства очень важно сразу же уменьшить этих исполинов.

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

Если финансы поют романсы, то есть такие бесплатные альтернативы как, Paint для Windows и Preview для Mac, которые отлично справляются с поставленной задачей.

Если вы ищите, что-то посложнее, но все еще не готовы расстаться с деньгами, то Gimp предлагает вам бесплатное, кроссплатформенное решение с открытым исходным кодом для стационарного компьютера. Также доступны такие онлай-опции, как Pixlr и Fotoflexer.

Если говорить о прочих программах, то на ура с этой задачей справляются Pixelmator для Mac,   IrfanView для Windows и, конечно же, Photoshop.

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

Работайте только с копией изображения, так как с ней можно вволю поэкспериментировать.

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

Обрезка изображения

Следующим важным шагом станем обрезка изображения: мы должны снять с изображения весь визуальный «жирок», благодаря чему оно станет более легким и эффектным

Подготавливаем графику для Retina-дисплеев

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

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

Это значит, что вам нужны две версии вашего изображения: одно с обычными требованиями к количеству пикселей и другое, пригодное для «ретины», например, JPEG в размерах 350px x 350px и его вторая версия — 700px x 700px.

В WordPress вы можете управлять этими двумя версиями, используя собственное решение, применив Retina.js, или просто установив один из плагинов: WP Retina 2x или Simple WP Retina.

Сжатие ваших изображений

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

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

В отличие от файлов в формате PNG или  GIF, JPEG’и сжимаются с потерями, что говорит о том, что мы можем добиться хороших результатов, уменьшая размер файла. Минус заключается в том, что вам нужно тщательно просматривать результаты конверсии на предмет присутствия нежелательных визуальных артефактов, как на картинке ниже.

Мы должны соблюсти баланс между приемлемым качеством картинки и минимальным размером файла. Тут стоит заметить, что файлы в формате PNG и GIF также можно выгодно сжать. Данный пример с TinyPNG  показывает, что сжимать такие файлы тоже имеет смысл:

Инструменты для сжатия изображений

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

Если вы используете один из ранее упомянутых оффлайн-редакторов, то вы просто можете просто выбрать встроенную опцию в «сохранить как» списке. Также есть большое количество оффлайн-софта для двух главных платформ. Главные опции – это ImageOptim для Mac или  Trimage для Mac и  Windows.

И наконец, есть множество онлайн-решений, включая TinyPNG и Kraken на лидирующих позициях. Кроме того, вы можете воспользоваться инструментом  WP Smush от WPMU или замечательным плагином EWWW Image Optimizer.

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

Естественно SEO-оптимизация изображений не менее важна, чем их грамотное отображение, так что перейдем к основам.

• Названия файлов: используйте описательные названия файлов, которые содержат ваши ключевые слова, а не сгенерированные названия. Например, “зеленый-детский-велосипед.jpg” , вместо“BX8A132E.JPEG”.
• Alt-теги: снабжайте каждое изображение кратким не спам alt-тегом, что позволит улучшить и SEO, и его доступность. Например, “alt= детский зеленый велосипед, вид сбоку”.

Оптимизация вне WordPress

Вся оптимизация может быть не так полезна, если сайт отображается некорректно по каким-то причинам извне. Этот вопрос важный и емкий, но вот с чего можно начать:

• Инструменты тестирования скорости сайта: проверьте производительность вашего сайта, используя стандартные инструменты замера скорости.
• Сервер/хостинг: проверьте вашего хостинг провайдера и убедитесь в том, что ваш сервер оптимизирован для WordPress.

Вы также можете использовать всю мощь сетей доставки контента, например, Cloudflare или Photon от  WordPress.

Оптимизируем изображения в конвейерном режиме

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

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

1. Убедитесь в том, что вы выбрали правильный формат изображений. Всегда выбирайте правильный формат!
2. Обрежьте ваши изображения и измените их размер, таким образом, чтоб у них был минимальный вес, и они максимально хорошо смотрелись.
3. Работайте на будущее ваших статей: создавайте изображения не только для обычных, но и для retina-дисплеев.
4. Сожмите изображения
5. Потратьте немного времени на SEO-оптимизацию изображений, что в долгосрочной перспективе позволит увеличить трафик.
6. Используйте всю мощь CDN для максимально быстрой доставки файлов.

В итоге

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

Источник