Вход / Попробовать бесплатно
Выход / Проекты
Почему мы
ЮлияЮлия
· 9 мин
14

Руководство по оптимизации изображений от А до Я

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

Поэтому сегодня разберем:

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

Работа с изображениями для оптимизации страницы

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

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

Формат

От формата напрямую зависит, какого размера будет картинка — не по ширине/высоте, а по «весу». Самые распространенные — gif, png и jpeg. Именно они используются в 90% случаев для всего графического контента в интернете. Давайте их сравним.

GIF

  • Качество при сжатии: не теряется.
  • Анимация: доступна.
  • Прозрачность: доступна.
  • Поддержка: всеми браузерами.
  • Вес: небольшой, обычно до 1 Мб.

Пример:
gif

JPEG

  • Качество при сжатии: теряется.
  • Анимация: нет.
  • Прозрачность: нет.
  • Поддержка: всеми браузерами.
  • Вес: небольшой, обычно до 1 Мб.

Пример:

jpeg example

PNG

  • Качество при сжатии: не теряется.
  • Анимация: нет.
  • Прозрачность: доступна.
  • Поддержка: всеми браузерами.
  • Вес: большой, обычно до 2 Мб.

Пример:

png example

Как выбрать формат

  1. Если изображение должно быть анимированным — выбирайте GIF. Цветовая палитра формата состоит всего из 256 цветов — это мало для полноценной детализации и реалистичности отображения, зато он самый простой для создания анимированных изображений.
  2. Если важно сохранить все мелкие элементы в высоком разрешении, чтобы картинка была детализированной — выбирайте PNG. В нем не используется сжатие с потерей данных, поэтому изображение получается максимально реалистичным, но и весит больше.
  3. Если нужно оптимизировать обычную фотографию/скриншот/подобные картинки — выбирайте JPEG. Это самый простой вариант, в котором доступно сжатие с потерями и без потерь, что помогает уменьшить размер файла.

Сжатие

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

Есть 2 вида сжатия:

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

Инструменты для сжатия

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

Jpegtran

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

Для просмотра всех команд нужно нужно запустить Командную строку, перейти в папку с программой и выполнить команду jpegtran.exe /?.

Imagemagick

Imagemagick — еще один «фотошоп для командной строки». Позволяет работать с PNG, JPEG, GIF, HEIC, TIFF, DPX, EXR, WebP, Postscript, PDF и SVG. Может удалять метаданные, менять степень сжатия, размер и выполнять другие задачи.

Все команды можно посмотреть на сайте Imagemagick, вкладка Command-line Options.

PNGquant

PNGquant — третья консольная утилита для lossy-сжатия, которая подойдет для работы с PNG. Позволяет преобразовывать PNG с 24 и 32 битами/пиксель в 8-битные палитровые изображения. По утверждению разработчиков, позволяет уменьшать размер файла на 70%, сохраняя альфа-прозрачность. При этом при сжатии на 40-50% разница в качестве заметна, но только при сравнении было-стало. Функционал гораздо скромнее, чем у предыдущих вариантов, но для обработки PNG его будет достаточно.

Список команд указан на главной странице официального сайта.

JPEGmini

JPEGmini — это самостоятельная программа на компьютер, а JPEGmini Pro выпускается как плагин для Lightroom и расширение для Adobe Photoshop. Особенности:

  • сжимают изображения на 80% без потери разрешения;
  • JPEGmini работает с файлами до 28 Мп;
  • JPEGmini pro и JPEGmini Server — до 60 Мп.

TinyPNG

TinyPNG — тоже облачный инструмент, работает только с PNG, как очевидно из названия. Особенности:

  • преобразовывает 24-битные изображения в 8-битные;
  • сжимает файлы до 70% с минимально заметной визуально потерей качества;
  • можно загружать пакетно до 20 файлов для обработки;
  • допустимые размеры файла — до 5 Мб;
  • есть API;

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

Технические хаки

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

Спрайты

Суть состоит в том, чтобы «склеить» максимальное количество картинок в одну и таким образом сократить количество обращений к серверу.
sprites

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

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

Алгоритм настройки:

  1. Для группировки подходят только однотипные картинки идентичного формата. Поэтому шаг 1 — разделить все изображения по типам: GIF, PNG8, PNG24, JPEG.
  2. Объединить несколько изображений, используя прозрачный фон.
  3. В CSS используем для сгруппированных элементов одно изображение. Для конкретного элемента выбираем из него нужную часть при помощи  background-position — это свойство задает позицию фонового изображения относительно того элемента, для которого оно указано.

CDN

Суть: когда с сайта поступает одновременно много запросов на каждый элемент страницы, сервер может «лечь отдохнуть» из-за перегрузки. Сеть доставки (и дистрибуции) контента (CDN) — это способ, как уменьшить количество запросов на сервер.

Представим, как идет запрос с сайта на сервер. Сайт — это точка А, а сервер — точка В. Запрос идет напрямую.

cdn

При помощи CDN на пути от А к В появляется точка С — наше промежуточное звено, узел CDN для кэширования данных.
cache

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

Работа по оптимизации изображений

Оптимизация непосредственно изображения нужна для правильного «восприятия» элемента поисковыми системами и помощи пользователям. С этой целью используются HTML-элементы — атрибуты Alt и Title. Оптимизация картинок влияет на ранжирование изображений и может повышать посещаемость ресурса на 5-10%. Главное про эти атрибуты — в FAQ ниже.

FAQ по Title

Что такое тег Title?

Атрибут <img>, заголовок картинки, который описывает изображение.

Где он находится?

В теге изображения:

<img title=«используемый тайтл» src=»название-изображения.png» alt=»используемый атрибут альт»>

Тайтл виден для пользователя при наведении курсора.

faq title

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

Как правильно указывать атрибут Title?

  1. Оптимальный размер — до 250 символов. Технических ограничений нет, но учитывайте, что 2-3 строки тайтла будут мешать просмотру.
  2. Должен быть уникальным и не дублировать Title самой страницы, Alt-тег, подзаголовки Н1, Н2 и т.д.
  3. Хорошо, если всплывающая подсказка реально будет содержать интересную информацию, которую захочется читать пользователю: какие-либо тонкости, объяснения нюансов и т.д.

FAQ по Alt

Что такое тег Alt?

Это атрибут атрибут тега <img> в HTML, который устанавливает альтернативный текст для изображений, «объясняет» его, но более кратко, чем это сделано в Title.

Где он находится?

В теге изображения:

<img title=»используемый тайтл» src=»название-изображения.png» alt=»используемый атрибут альт»>

Виден для пользователя до загрузки картинки. Картинка с прописанным тегом Alt:

alt example

 

 

Зачем нужен?

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

Как работает?

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

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

Чем и насколько важен для SEO?

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

Как правильно указывать атрибут Alt?

  1. Конкретизируйте. Одна из целей атрибута — текстовое объяснение картинки пользователям, которые ее не видят. Объясните им, что они должна понять по изображению.
  2. Сокращайте. Идеальный размер — до 125 символов.
  3. Используйте ключи, релевантные содержанию страницы и смыслу картинки.
  4. Не спамьте. Атрибут Alt — это не keywords, где можно через запятую написать пару ключей для поисковых роботов.
  5. Не используйте слова «картинка», «изображение», «фотография» и т.д. Сам тег предполагает, что это изображение, не нужно дополнительно это указывать.
  6. Если описать картинку кратко нельзя, используйте тег longdesc=»» — он позволяет делать более подробные описания и указывать адрес файла с аннотацией к изображению.
  7. Не забудьте про дополнительные элементы. Если форма обратной связи на сайте использует картинку для кнопки «отправить» — сделайте соответствующий атрибут. Аналогично со всеми картинками, которые используются для кнопок типа «Найти», «Зарегистрироваться», «Корзина» и так далее.

Что делать, если изображение не имеет смысла (как элементы дизайна)?

В норме такие изображения должны быть в CSS, а не в HTML. Если исправить это по любой из причин нельзя, не заполняйте тег.

А можно пример?

Нужно!

Если на картинке реальный физический предмет — описать его проще всего.

Пример 1.

cat example

Слабо: <img src=»image.png» alt=»кошка»>

Нормально: <img src=»image.png» alt=»кошка потягивается»>

Хорошо: <img src=»image.png» alt=»кошка потягивается лежа»>

Это было просто. А что делать с изображениями, где нет конкретного предмета, который можно описать?

Пример 2.

moggie

Слабо: <img src=»image.png» alt=»moggie»>

Нормально: <img src=»image.png» alt=»анализ сайта moggie»>

Хорошо: <img src=»image.png» alt=»отчет по анализу сайта moggie»>

Сделать аудит сайта

Какие тонкости в оптимизации страниц и изображений на них знаете вы? Делитесь опытом в комментариях.

ПОДЕЛИТЬСЯ

КОММЕНТАРИИ

Send this to a friend