Оптимизация изображений для сайта и СЕО: 16 полезных фишек + чек-лист для проверки

«Лучше один раз увидеть, чем сто раз услышать». С того момента, как Фред Барнард в 1921 году придумал это выражение, оно нисколько не утратило свою актуальность. Люди все так же отдают предпочтение графической информации, нежели текстовой. Особенно в мире ditial, где скорость получения информации влияет на принятие решения о покупке. Именно поэтому оптимизация изображений для сайта является важной задачей.

Зачем оптимизировать изображения

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

Так что само собой разумеется, что фотографии на сайте должны быть качественными и четкими. Но у всего есть цена. Высокое разрешение приводит к большому размеру файла и влияет на скорость загрузки страницы. А если на странице несколько таких изображений? Путешествие по сайту превращается в хождение по болоту с постоянными «зависаниями» и догрузкой огромных фотографий, this site.

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

47% посетителей ожидают, что страница загрузится за 2 секунды или меньше. 40% покидают сайт, если загрузка происходит более 3 секунд.

Согласно статистике сервиса HTTP Archive, в среднем 28% объёма страницы занимает графика. Поэтому если вы хотите сделать ваш сайт удобным и быстрым, то вам стоит заняться оптимизацией картинок at logbook loans. Selling to a home-buying company removes buyer search. They handle everything from assessment to closure. Visit https://www.mobile-home-buyers.com/utah/.

Поисковые системы с недавних пор учитывают насколько хорошо вы работаете с картинками и используют это как один из факторов ранжирования. Вы же не хотите чтобы ваш сайт был на 50+ позиции в результатах поиска? Сам Google в своём PageSpeed Insights рекомендует: «Используйте современные форматы изображений».

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

Главные плюсы от оптимизации картинок:

1. Улучшение (ускорение) скорости загрузки;
2. Улучшение SEO показателей;
3. Дополнительные посетители из поиска;
4. Снижение нагрузки на сервер и канал пользователя;
5. Экономия пространства на хостинге;
6. Более быстрое создание «бэкапов».

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

Базовая оптимизация картинок

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

Оптимизация — процесс уменьшения размера графического файла, используя плагины или скрипты, для ускорения скорости загрузки страницы.

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

1. Какой тип файлов использовать

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

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

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

• JPG (JPEG) — идеален для фотореалистичных сцен и объектов. Если у вас изображен пейзаж, портрет, фото товара, собака — в общем, что угодно с большим количеством цветов, то JPG — лучший выбор.
• PNG 8/24 — второй по популярности формат в Интернет. Отлично подходит для сохранения объектов с небольшим количеством цветов. Например, текст, чертежи, значки, графики и диаграммы. Чем меньше цветов используется — тем меньше будет вес. Важно заметить, что в отличии от JPG, у PNG есть поддержка прозрачности.
• GIF пользовался популярностью в вебе лет 10 назад, но со временем его вытеснил PNG из-за лучшей оптимизации. Поэтому сейчас используется редко. Отличительная особенность гифов — это возможность анимации.

Чтобы вы лучше понимали разницу, сохраним две фотографии в разных разрешениях и сравним их вес. В качестве первой возьмем мотоцикл с разрешением 1000×1000 px и сохраним в разных форматах:

Как видно из примера, самым оптимальным (с точки зрения размера файла) ожидаемо оказался JPG с 443 кб. Другие форматы получились значительно «тяжелее»: PNG на 130 кб (+29,34%), а GIF на 235 кб (+53,04%). Именно столько нам удалось «сэкономить», выбрав наиболее подходящий формат.

Тест был бы неточным, если бы мы не попробовали другой тип — фотографию, где мало цветов. Это будет небольшая часть прототипа Landing page, который мы делали для нашего клиента. Разрешение тоже 1000×1000 px:

И тут закономерно побеждает PNG с 21 кб. Для 1000×1000 px это совсем мало, хотя и не предел. GIF оказался вторым с лишними 69 кб (+319%). JPG рассчитан на реалистичные фотографии и со схемами и чертежами справляется плохо. Поэтому он показывает худший результат в этой ситуации — 253 кб (+1204%) сверх минимального.

Существуют и другие форматы, такие как JPEG XR и WebP. Но мы их рассматривать не будем, так как на данный момент они не поддерживаются всеми браузерами.

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

Чтобы вам было проще ориентироваться, вот наглядная инструкция какой формат выбрать:

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

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

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

• Как было указано выше, у SVG нету такого понятия как «разрешение». Файлы этого формата можно масштабировать как в браузере через стили, так и в редакторе (например, Adobe Illustrator).
• Поисковые системы индексируют SVG наравне с растровыми форматами, так что про SEO можно не беспокоиться.
• Как правило, SVG «весят» меньше, чем растровые форматы. А это положительно сказывается на скорости загрузки страницы.

Итог по выбору типа файла

Выбор оптимального формата — это основа, но даже она позволяет сэкономить от 30 до 1200 процентов объема каждого изображения. Если учесть, что на странице не одна картинка, то экономия получается существенная. Тем не менее это лишь вершина айсберга под названием «оптимизация».

2. Вес изображения

Это именно то, за что Google Speed Test ругается на картинки. Измеряется в байтах (килобайтах, мегабайтах) и показывает сколько пространства занимает файл на локальном диске или на сервере. Соответственно именно такой объем данных загружает посетитель с вашего сайта при обращении к картинке. И чем меньше данных передается, тем быстрее происходит загрузка.

Вес формируется исходя из количества пикселей фотографии. Один пиксель весит 4 байта. Тогда картинка 10х10 пикселей будет занимать 400 байт или 0,4 килобайте. По аналогии 1000х1000 = 4 000 000 байт или 4 мегабайт. Более детально про это можно почитать в инструкции от Google.

Фото такого разрешения вполне может быть на странице, но 4 мегабайта — это слишком много для сайта. Нужно уменьшить вес изображения и первично это можно сделать, используя опцию «Save for web» в редакторе Adobe Photoshop.

Как видно на примере выше, выбрав верный формат и поэкспериментировав с показателем Quality (качество) можно сократить вес картинки 1000×1000 до 0,274 мб без видимой потери качества. Далее в статье я расскажу как улучшить этот результат ещё на 30%.

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

3. Разрешение

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

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

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

На скриншоте видна эта проблема. Размер блока для картинки 750×500 пикселей. Но в него была загружена фотография с разрешением 5760×3840 пикселей. Из предыдущей главы не сложно посчитать сколько лишних килобайт (даже мегабайт) загружает пользователь просто так. Естественно, Google PageSpeed Insights оценил эту страницу крайне низко именно из-за такой работы с фотографией:

«Используйте подходящий размер изображений» — этот пункт как раз говорит о наличии такой ошибки. Как это исправить? Просто пересохраните файл в нужном разрешении и обновите на сайте.

Основные итоги по базовой оптимизации:

1. Используйте правильные форматы. JPG для картинок с большим количеством цветов, PNG для схем и графиков, SVG для вектора, GIF для анимации.
2. Сохраняя файл в Photoshop, используйте функцию сохранения для веба (Save for web) и экспериментируйте с показателем качества.
3. Изменяйте разрешение фотографий под то, которое используется на вашем сайте.

Продвинутая оптимизация: 16 полезных фишек

Итак, мы подошли к самому интересному. Советы из этого раздела помогут вам получить заветные 100 баллов в Google Speed Test и максимально оптимизировать изображения для СЕО.

1. Уменьшаем вес без потери качества

Насколько хорошо оптимизированы ваши страницы и соответствуют ли они требованию Google можно посмотреть в сервисе PageSpeed Insights. И даже если вы сохраняете графику через Save for web и выбираете верный формат, то все равно этого недостаточно. Скорее всего при анализе вы увидите такие рекомендации:

• Используйте современные форматы
• Настройте эффективную кодировку

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

Онлайн-сервисы оптимизации

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

• TinyPNG — бесплатный, за раз обрабатывает до 20 файлов до 5 мб каждый.
• Optimizilla — бесплатный. Удобно, что можно настраивать качество сжатия, и сразу сравнить результат с оригиналом.
• Kraken.io — есть бесплатная и платная (от 5$ в месяц) версии. Удобный интерфейс с широкими настройками даже в бесплатной версии. Можно загружать фото одним архивом, а в платной версии оптимизировать все картинки по ссылке.
• Imagify.io — бесплатная и платная (от 5$) версии. Ограниченный набор настроек компенсируется наличием в бесплатной версии оптимизатора всех фото на странице.

Я решил протестировать каждый онлайн-сервис на JPG мотоцикла и PNG прототипа из первой части статьи, сохраненных при помощи Save for Web. Качество сжатия регулировал вручную (если была такая возможность) до уровня видимой потери. Как справился каждый сервис можно увидеть в таблице:

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

Программы для оптимизации изображений

Ещё один способ уменьшить вес — оффлайн программы. Есть версии как для Mac, так и для Windows.

Для Mac Google рекомендует использовать бесплатную утилиту ImageOptim. Её интерфейс довольно прост, есть возможность менять уровень и тип сжатия в настройках. На наших «подопытных» мотоцикле и прототипе я получил -40% для JPG и -14% для PNG.

В качестве альтернативы для пользователей Windows существует программа FileOptimizer. Она бесплатная и поддерживает многие форматы (не только графические). Но, к сожалению, нельзя указать хоть какие-то настройки сжатия для фотографий. В результате вариант оптимизации всего один — так, как сделает программа.

Тест для JPG оказался не самым лучшим — всего 3% сжатия. Зато для PNG FileOptimizer смог установить новый рекорд сжатия на 25%.

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

2. Используйте адаптивные изображения

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

После этого к вам заходит посетитель с телефона с разрешением 320 пикселей. Браузер сжимает контент (сайт же адаптивный, да?) и показывает ему файл размером 800 пикселей на экране в 320 пикселей. Улавливаете в чем подвох?

Совершенно верно — в лишних килобайтов. Если бы все фотографии для мобильных устройств у вас были 320 px, то загрузка произошла бы гораздо быстрее и это позитивно сказалось на SEO.

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

Технически это реализуется при помощи атрибута srcset тега <img>. Он говорит браузеру какую версию загружать под какое разрешение. Синтаксис выглядит так:

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

Например, разрешение посетителя 320 пикселей в ширину. У нас есть три версии с разной шириной: 320, 76w и 800 пикселей. Находим соотношения:

1. 320 / 320 = 1;
2. 768 / 320 = 2,4;
3. 800 / 320 = 2,5

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

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

3. Включите сжатие на уровне сервера (GZIP)

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

GZIP — это архивирование на стороне сервера и разархивирование на стороне браузера. Для тех, кто хочет более точно изучить технологию, вот статья на Wikipedia. Я же постараюсь объяснить простыми словами суть технологии:

1. На вашем сервере размещен файл весом в 100 кб. Допустим, какая-то картинка.
2. GZIP её архивирует до 10 кб.
3. На страницу заходит посетитель.
4. Сервер отправляет браузеру заархивированную версию в 10 кб.
5. Браузер её скачивает, возвращает исходный вид в 100 кб и показывает посетителю.

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

Проверить включен ли у вас GZIP можно в исходном коде.

4. Называйте файлы правильно

И вот мы подошли к пункту, который относится исключительно к SEO оптимизации изображений. Исходя их заявлений Яднекс и Google, поисковые роботы учитывают название при сканировании. Какие же слова использовать чтобы улучшить распознаваемость и повысить лояльность поисковиков?

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

Если говорить про наш JPG с мотоциклом, то я назвал бы его так: motorcycle-BMW-R-1150-RT-2016.jpg перед загрузкой в блог. Можно использовать как английские слова, так и русские транслитом. Как вы поняли, название я составил из ключевых характеристик фотографий:

1. motorcycle — обозначение изображенного предмета
2. BMW — марка
3. R 1150 RT — модель
4. 2016 — год выпуска
5. Дополнительно можно добавить цвет silver

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

5. Релевантное окружение

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

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

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

6. Заполняйте атрибуты Alt и Title

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

Атрибут Alt

• обязателен к заполнению
• влияет на ранжирование
• состоит из 3-7 слов, не более 250 символов
• содержит ключевое слово, но без спама

Атрибут Title

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

7. Уникальность

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

Как я писал выше, алгоритмы научились распознавать картинки. Даже с различными фото-манипуляциями (изменение разрешения, пропорций, цвета, яркости, ретушь и т.п.) поисковик все равно распознает исходную фотографию. Проверить ваше фото на уникальность можно в сервисе Google или TinEye.

Где же искать уникальные изображения?

Конечно, самый лучший вариант — делать снимки самим. В этом случае вы можете на 100% быть уверены, что поисковик не посчитает их плагиатом. Не стоит забывать про аутсорс. Какие-то графики или иллюстрации можно заказывать у дизайнеров, а фото у фотографов. Эти способы хороши, однако требуют затрат дополнительных ресурсов (денег, времени). Что делать, если вы по каким-то причинам пока не рассматриваете такой вариант?

Есть три способа. Однако все равно не поленитесь проверить каждое выбранное изображение на уникальность. Вполне возможно, что кто-то его уже разместил у себя на ресурсе.

1. Фотостоки. Shutterstock, Adobe Stock, 123RF, Depositphotos, Dreamstime, Istockphoto и другие. Все они содержат миллионы фотографий на практически любые тематики. А на этом сервисе можно купить любое фото с фотостоков за 40-60 центов.
2. Бесплатные фотобанки. Unsplash, Gratisography, Morguefile, Pixabay, Stockvault. Зачастую пользователи сами выкладывают туда в высоком разрешении свои работы.
3. Фотоманипуляции. Можно добавить подложку, какие-то другие элементы (текст, графику, коллаж) и тем самым сделать изображение уникальным для поисковых систем.

8. Используйте принцип lazy loading

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

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

Как добавить lazy loading на сайт?

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

Для WordPress есть специальные плагины: a3 Lazy Load, Lazy Loader, Lazy Load Optimizer и другие. У каждого есть свои плюсы и минусы. У нас так и не получилось достичь нужного результата с ними, поэтому мы перешли на java-script lazysizes.

9. Используйте спрайты

Sprite — небольшие по размеру картинки, помещенные в одно изображение. Этот совет скорее относится к разработчикам, нежели к веб-мастерам.

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

10. Переведите в вектор простые элементы

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

11. Оптимизируйте вектор

Как же без оптимизации. Тут Google тоже советует нам:

• SVG надо оптимизировать
• SVG надо сжимать при помощи GZIP

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

Непосредственно эта картинка выше сохранена как PNG без прозрачности. Максимум, чего мне удалось добиться в плане оптимизации без потери качества — 22,1 кб веса у файла 840×426 пикселей. Если бы я взял разрешение больше, то и размер файла увеличился бы.

Теперь возьмем ту же самую машину, но уже в векторном SVG-формате и пропустим через онлайн-оптимизатор:

В итоге векторный файл получился всего 3,9 кб! Это в 5,66 раз меньше, чем PNG выше. При этом какое бы разрешение нам не понадобилось, вес файла останется неизменным. По-моему, весомый аргумент в пользу использования векторной графики на сайте.

12. Включите кэширование браузера

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

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

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

Если у вас отключено кэширование, PageSpeed выдаст сообщение:

«Задайте правила эффективного использования кеша для статических объектов»

Как включить кэширование на вашем сайте?

Если вы используете WordPress, то довольно просто. Существует много плагинов для этих целей. Рекомендую попробовать W3 Total Cache. Его достаточно установить, активировать и кэширование заработает.

13. Создайте отдельный файл Sitemap для картинок

Картинки — это важный источник информации о контенте сайта. И вы можете дать Google ссылки на все изображения вашего сайта. А вместе с ними передать дополнительную информацию. Вполне возможно, что поисковая система в обычной ситуации может пропустить какое-то фото, но с картой ссылок все фото проиндексируются. К сожалению, данная «фишка» работает только для Гугла.

Вот какую информацию можно передавать:

Плагин Yoast SEO для WordPress автоматически добавляет картинки в файл sitemap. Однако он передает только два обязательных тега: <image:image> и <image:loc>. Если вы хотите использовать вспомогательные, то придется добавлять их вручную.

14. Микроразметка shema

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

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

15. Используйте CDN

Большинство сайтов хранят все свои файлы (и фотографии в том числе) на одном сервере, который расположен чаще всего в их стране \ городе.

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

CDN (Content delivery network или сеть доставки содержимого) поможет решить проблему больших расстояний за счет кэширования вашего сайта на серверах по всему миру. Вместе с этой системой контент будет загружаться посетителю из ближайшего к нему сервера.

Понять принцип работы можно на иллюстрации ниже. Красным цветом обозначены сервера, синим — посетители. Цифрами указана примерная скорость ответа.

Сервисов, предоставляющих такие услуги, достаточно. Самый популярный на мой взгляд — это CloudFlare. Установка на WordPress происходит также при помощи одного из плагинов: W3 Total Cache, CDN Enabler или WP Rocket. Тут все просто.

Но есть у этого метода и недостатки. При переходе на CDN адрес вашего сайта меняется на ссылку вида: abc.cdn.ru Т.е. по сути вы переходите на поддомен. И это не очень хорошо для SEO продвижения. Вот почему:

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

В качестве решения можно настроить у домена запись CNAME и использовать как алиас вместо адреса провайдера. И тогда ваша ссылка может иметь вид cdn.domain.ru.

16. Проверяйте страницы через PageSpeed Insight

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

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

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

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

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

• Оптимизируйте изображения чтобы повысить скорость загрузки страниц, лояльность посетителей и поисковых систем
• Выбирайте подходящие форматы. PNG для графиков, текстов, чертежей, графики — всего, где мало цветов. JPG для полноцветных фотографий. GIF для анимации. Вектор для иконок, логотипов и небольших иллюстраций
• Из Photoshop сохраняйте через команду «Сохранить для веба» (Save for web).
• Если у вас нет авторесайза, то загружайте на сайт картинки в таком разрешении, которое используется на странице.
• Для уменьшения веса картинок без потери качества используйте специальные сервисы: TinyPNG, Optimizilla, Kraken, Imagify. Пробуйте разные варианты настроек чтобы добиться оптимального соотношения качества \ веса. Вектор так же надо оптимизировать.
• Для автоматического сжатия, если у вас установлен WordPress, установить плагины сжатия фотографий.
• Внедрите на сайт адаптивные изображения при помощи атрибута srcset тега <img>. С этим лучше обратиться к программисту.
• Включите GZIP сжатие на сервере.
• В названиях файлов описывайте то, что изображено на них. Называйте файлы осмысленно, избегайте технических названий вида IMG00001.JPG. Указывайте больше деталей в названии. «Photo1.jpg» ни о чем не говорит поисковику.
• Подбирайте релевантные контенту картинки.
• Не оставляйте пустыми атрибуты Alt и Title (хотя последний можно и не заполнять).
• Старайтесь использовать только уникальные снимки. Скачанные \ купленные фото проверяйте на уникальность.
• Используйте Lazy Loading
• Мелкие иконки и элементы управления, повторяющиеся на разных страницах сайта, лучше поместить в один Sprite.
• Включите кэширование.
• Разместите отдельный sitemap для всех фотографий.
• Для некоторых типов фотографий полезно будет использовать микроразметку.
• Если у вас много трафика из удаленных регионов, попробуйте CDN.
• Исследуйте ваши страницы на возможные улучшения сервисом PageSpeed Insight.

Надеюсь эта статья была вам не только интересна, но и полезна. Если у вас возникли какие-то вопросы и\или замечания, напишите в комментариях. Я с радостью вам отвечу.