Эта статья предназначена для тех, у кого пока нет своего сайта, и для владельцев сайтов, которые хотят повысить их юзабилити и поднять свой сайт в результатах поиска.
Оптимизация изображений для SEO
Оптимизация изображений — это сжатие изображений до приемлемых размеров для ускорения их загрузки при просмотре страницы, а также проставления ALT атрибутов изображений, добавления подписи к изображению (при необходимости) и описания изображения (description).
Для чего оптимизировать изображения?
На сегодняшний день изображения являются одним из наиболее важных элементов современных веб-сайтов. Сайт без изображений скучно смотреть. Изображения являются очень важной маркетинговой составляющей.
- У пользователя включается зрительное восприятие, как дополнение к смыслу прочитанного.
- Включается зрительная память, и появляется стимул вернуться к той или иной картинке.
- Количество возвратов на сайт является одним из показателей, положительно влияющих на ранжирование сайта.
- На многих картинках присутствует текст поверх изображений, это способствует лучшему пониманию пользователем смысла статьи или страницы сайта.
- Любая картинка, как и медиафайл, просто привлекает внимание пользователя и, в конечном счёте, поисковика, поскольку современные поисковики учитывают фактор удобства пользователя.
Оптимизация картинки для пользователя и для SEO сайта
Известны три фактора, влияющие на восприятие картинки пользователем, а, следовательно, поисковиком:
- Грамотно заполнены ALT атрибуты.
- Сжатие картинки до приемлемых размеров увеличивает скорость загрузки картинки в режиме реального времени.
- Размещение текстовой информации на самой картинке поверх изображения.
Более подробно об этих 3-х факторах:
Заполнение ALT атрибутов, добавление подписи к изображению (при необходимости) и описание изображения (description).
Известно, что современные поисковики “видят” картинку как набор символов или точек (пикселей) на экране, расположенных в определённом порядке и имеющих свою цветовую гамму. Это если говорить о растровом изображении форматов картинки JPG, JPEG, PNG, GIF. Если говорить о векторной картинке типа SVG, то поисковик видит её как текст.
ALT атрибуты помогают поисковику понять смысл изображённого на картинке. То есть отвечают на вопрос: “Что изображено на картинке, и к какой теме её отнести”. В общем понимании это весьма сопоставимо с атрибутом title самой страницы. О том, что такое title для страницы, более подробно можно прочитать здесь
А раз так, то очевидно, что их заполнение (что многие забывают сделать или просто не умеют) очень положительно влияет на SEO страницы (более подробно о SEO) как для увеличения веса самой страницы, так и для того, чтобы поисковик мог поместить вашу картинку в
Google картинки по соответствующему запросу пользователя.
Проиллюстрируем сказанное на примере CMS в WordPress. В разделе “Медиафайлы” мы можем увидеть следующую картину:
Постоянная ссылка – это имя, под которым файл вашего изображения хранится.
- ALT атрибуты – они не видны пользователю, но видны поисковику. Изначально их придумали для слабовидящих людей. Т.е. если вы используете “Шрифт Брайля”, то сможете их прочитать (как и разметку страницы h1-h6), но обычные пользователи их не видят на экране. Также они присутствуют и в HTML коде страницы, поэтому их наличие или отсутствие легко обнаружить.
- Подпись – это подпись под картинкой, которая может быть видимой или невидимой, на неё поисковики обращают меньше внимания, поскольку ALT чаще всего дублирует подпись.
- Описание изображения – вот эта часть не видна пользователям совсем, но её прекрасно видят поисковики. Считается, что это description изображения, поэтому грамотное заполнение этого тега может играть большую роль в SEO продвижении как картинки, так и самой страницы, связанной с этим изображением.
Сжатие картинки до приемлемых размеров увеличивает скорость загрузки картинки в режиме реального времени.
После того как мы разобрались с тем, как правильно описать картинки вашего сайта, разберёмся, как правильно их выложить на сайт, чтобы ваша страница не грузилась долго для пользователей, у которых, возможно, не такой качественный и скоростной интернет, как у вас.
Растровые (см. выше) файлы изображений обычно имеют большой размер, и каждое изображение, которое вы загружаете на свой сайт, будет влиять на время загрузки сайта. Это так просто: если на вашем веб-сайте загружено больше байтов, загрузка займет больше времени.
Бывают случаи, когда даже WordPress говорит вам, что загруженный файл превышает разрешенный лимит.
Что даёт сжатие картинки:
- Более легкий сайт, меньше места на сервере и большая пропускная способность.
- Более легкие изображения занимают меньше места на вашем сервере и уменьшают объем передаваемых данных, когда посетитель просматривает ваш сайт.
- Более высокую производительность. Когда ваш сайт легче, скорость загрузки становится намного лучше. Если перед оптимизацией изображений загрузка сайта занимала несколько секунд, то после она может занять миллисекунды.
- Если пользователю нужно дожидаться загрузки контента, он, вероятно, покинет ваш сайт, прежде чем даже увидит его. Кроме того, быстрый веб-сайт выглядит более профессионально в глазах пользователей.
- Улучшение SEO. Поскольку более быстрый веб-сайт может ранжироваться выше в результатах Google, хорошая общая производительность также улучшает SEO вашего сайта.
Уменьшить размер файла перед загрузкой
Размер файла изображения зависит, в основном, от его разрешения, качества и формата файла. Изменяя их, вы сможете значительно уменьшить размер ваших изображений.
Разрешение
Первое, что вам нужно сделать, это убедиться, что изображение, которое вы собираетесь использовать, максимально соответствует размеру места, где оно будет размещено.
Вы не хотите загружать меньшее изображение, чем вам нужно, потому что оно будет пикселизировано при увеличении. И вы не хотите загружать гораздо большее изображение, потому что вы можете сэкономить вес, если вы уменьшите его размеры.
Cейчас телефоны имеют качество более 8К (Ultra HD), разрешение не менее 7680х4320 пикселей, минимум 33 миллиона активных пикселей, а профессиональные фотографии превышают это качество. Такой объём будет очень плохо грузиться, особенно при плохом интернете, и точно не выдержит никакой CMS.
Большой размер экрана обычно использует сейчас 1920px в ширину, только 4к – около 4 000px в ширину. Большинство экранов использует размер 1366 x 768 пикселей, который является наиболее распространенным. Вывод: нет смысла показывать качество, которое никто не сможет увидеть, ибо увидеть качество 8к можно только на очень большом экране, не менее 1 метра в ширину.
Если вы планируете использовать изображение полной ширины, изменение его размера до чего-то между 1400 и 1600px станет хорошим балансом между сохранением его большого размера и одновременным облегчением.
Просто уменьшив размеры изображения, вы уже уменьшите его вес.
Если оригинальная версия изображения 4000х3000 пикселей, то весит она 5 МБ, что очень много.
Если мы просто уменьшим его до 1400×933, его вес автоматически упадет до 140KB, что составляет около 6% от первоначального размера.
Качество
После настройки разрешения изображения необходимо уменьшить его качество, чтобы оно стало еще легче.
Тут, конечно, можно возразить: “Зачем я буду ухудшать качество?” В данном случае речь идёт только про ухудшение качества маленькой картинки где-то в глубине страницы у вас на сайте. Заметить это ухудшение на экране 1920 px будет невозможно, тем более что увеличивать размер изображения, как правило, на сайте не планируется.
В основных приложениях для дизайна или редактирования фотографий качество изображения может быть уменьшено со 100% до 0%. Сколько вы фактически уменьшите, будет зависеть от:
- Самого изображения — если это изображение с большим количеством деталей и цветов или если оно имеет меньше графической информации. При снижении качества изображение с большим количеством деталей будет выглядеть хуже, чем изображение с меньшим количеством деталей.
- Цель изображения — если вы собираетесь использовать его на веб-сайте фотографа, вы можете пожертвовать размером, но вместо этого получить более качественное изображение. Или, если вы собираетесь использовать изображение в большом главном разделе, качество может быть более важным, чем в том случае, когда вы используете изображение в меньшем размере.
Многие обычно использую степень качества около 30% — 50%.
Формат файла
Для уменьшения объёма изображения можно пользоваться разными форматами изображений. Наиболее распространенными форматами в интернете являются JPEG (или JPG), PNG и GIF.
JPEG — это формат, который сжимает изображение и тем самым приводит к более легкому изображению.
PNG чаще всего используется, когда вам нужно, чтобы изображение имело прозрачный фон, который JPEG не позволяет. Он создает изображения более высокого качества (потому что не сжимает их, как JPEG), но и более тяжелые файлы. Поэтому он в основном используется в меньших количествах и для небольших изображений.
Наконец, GIF рекомендуется для анимированных изображений.
В заключение, использование JPEG будет лучшим выбором в большинстве случаев. Используйте PNG, только когда вам нужно изображение с прозрачным фоном.
Инструменты
1- Использование графических редакторов как фактор оптимизации изображения для SEO
Можно использовать такое программное обеспечение как Photoshop, но оно платное, а для уменьшения размеров и перевода из одного формата в другой вполне хватит и бесплатного программного обеспечения с открытым кодом.
Например, XnView . Эта бесплатная программа конвертирует растровые изображения из одного формата в другой, а также изменяет качество изображения, о чём мы писали выше. Причём конвертация из формата в формат происходит на этапе сохранения изображения. Проверить вес вашего изображения можно прямо в проводнике Windows в разделе “свойство”.
2 - Использование онлайн-инструмента.
Существует множество онлайн-инструментов, позволяющих загружать изображение и скачивать его оптимизированную версию.
Например, ReduceImages — бесплатный инструмент, который позволяет изменять разрешение, качество и формат файла любого загружаемого изображения.
3 - Если вы используете WordPress
Для него разработано несколько плагинов, как бесплатных, так и платных, для сжатия изображений. Например, TinyPng , который позволяет сжимать не только изображения формата PNG, но и JPEG. Плагин является условно платным, т.е. до 1000 изображений можно сжать бесплатно, а за большее количество придётся заплатить.
В любом случае, рекомендуем пользоваться плагинами сжатия даже после уменьшения размеров изображения первыми двумя способами. WordPress и Tiny сразу покажут вам процент уменьшения изображения.
4 - Размещение изображения на CDN.
CDN означает сеть доставки контента. Размещение ваших изображений на CDN означает настройку CDN для их обслуживания вместо того, чтобы иметь свой собственный сервер для этого.
CDN — это сети, расположенные по всему миру, с мощными веб-серверами, которые заботятся о загрузке файлов вашего сайта для пользователя, используя ближайший к нему сервер, с географической точки зрения.
Например, если пользователь из Южной Америки заходит на ваш сайт, CDN будет обслуживать его с помощью сервера, расположенного ближе к нему, а не с помощью того, который находится в Европе. Таким образом, данные вашего сайта перемещаются на меньшие расстояния, что влияет на скорость загрузки.
Это довольно дорогостоящий способ, и он необходим только для очень больших сайтов, которые часто смотрят в других странах и на разных часовых поясах.
5 - Использовать плагины КЭШ.
Существует много плагинов для кэширования контента в WordPress. Функции и возможности у всех разные. Наиболее продвинутым мы считаем плагин WP-FastestCache, который предлагает множество функций оптимизации контента целиком, таких как сжатие картинок, использование ленивой загрузки.
Логика ленивой загрузки в том, чтобы загрузить изображения на вашем сайте, прежде чем они должны появиться в окне просмотра браузера. Или проще: прямо перед тем, как пользователь увидит их.
При ленивой загрузке изображение в нижней части вашего сайта будет загружаться, как только пользователь приблизится к нижней части вашего сайта, а не при загрузке сайта.
Если одновременно загружается меньше изображений, это означает огромную экономию пропускной способности и лучшую производительность. Изображения будут загружаться только при необходимости.
Это не единственная функция этого плагина.
Заключение
Оптимизация изображений необходима для использования на любом современном сайте.
Она повысит производительность вашего сайта, SEO и создаст лучший пользовательский опыт.
