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

Обновление к статье

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

Возможности сервиса:

• Сжатие изображений
• Изменение размера
• Обрезка изображений
• Конвертация изображений в другой формат
• Редактор фото
• Наложение водяного знака
• Генератор мемов
• Вращение изображения
• Преобразование страниц HTML в изображения

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

JPEGmini онлайн

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

В окне сервиса нажмите на кнопку «Press to Upload Photos» для добавления фотографии, или перетащите изображение в специальную форму. Сервис имеет лаконичный интерфейс, нет никаких настроек.

После завершения обработки в JPEGmini, в окне сервиса отображается оригинальный размер файла, размер файла после сжатия, степень компрессии (у разных файлов разное сжатие). Поддерживается преобразование файла размером до 10 MB.

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

Любой, кто когда-либо нажимал кнопку «Сохранить как» в 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-файлов. Давайте посмотрим, почему оптимизация графики так важна.

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

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

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

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

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

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

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

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

Плагины для WordPress

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

Для WordPress вполне можно использовать различные плагины. Среди наиболее популярных – несколько. Рассмотрим их более детально.

EWWW Image Optimizer

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

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

WP Smush

О многом говорит тот факт, что данный плагин устанавливали пользователи более 400 000 раз. Такая популярность вполне логична. Ведь инструмент сжимает фото партиями, а также в тот момент, когда они загружаются на сайт. Бесплатная версия плагина позволяет подряд обрабатывать до пятидесяти картинок в различных форматах.

Optimus

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

Обратите внимание, для данного инструмента имеются ограничения по размеру – 100 кВ

Программы и офлайн сервисы для оптимизации картинок

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

PNGGauntlet. Программа, занимающая мало места на компьютере. С её помощью удаётся оптимизировать картинки в формате PNG. Кроме того, конвертируются графические файлы JPG, GIF, BMP, TIFF в PNG.

Ashampoo Photo Commander Free. Простая и бесплатная прога с доступом оптимизации и корректирования изображения. Всего за 1 минуту удастся создать красивый коллаж или календарь.

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

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

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

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

Paint.Net. Полноценный аналог MS Paint, который штатно встраивается во все компьютеры. В отличие от примитивного инструмента, в этом графическом редакторе от Microsoft удастся профессионально работать. Целиком бесплатная утилита, но требует установки Microsoft Net Framework 2.0.

OptiPNG. Компьютерная программа, позволяющая уменьшать файлы PNG и другие форматы путём компрессии. Фишка — именно эту прогу рекомендует инструментарий Google Page Speed.

Как оптимизировать изображения для сайта

Перед публикацией картинки на сайте решите три вещи:

• Физический размер изображения (длина и ширина),
• Формат изображения (jpeg, png, webp или другие форматы),
• Размер изображения (в Килобайтах).

С хорошо подобранными параметрами вы можете уменьшить размер картинки в 5-10 раз по сравнению с первоначальным.

Оптимизируйте длину и ширину изображения

Если вам нужно поместить изображение, которое займет 1/3 экрана, используйте картинку нужного размера, например, 400х300 Пикс.

Не публикуйте картинки бóльшего размера, чем это требуется.

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

В зависимости от ваших настроек адаптивности, вместо оригинального размера может использоваться меньший размер.

Выберите подходящий формат изображения

Существует несколько форматов изображений, которые используются для публикации изображений в интернете. Самые популярные — JPEG и PNG.

JPEG — формат, который использует сжатие с потерями (lossy) и не поддерживает прозрачность. В зависимости от степени сжатия, эти картинки можно оптимизировать без потери качества изображения.

PNG — сжатие без потерь (lossless) и поддерживает прозрачность.

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

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

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

Чем меньше размер изображения в Килобайтах, тем ниже качество картинки.

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

Для картинки размером 400х300 пикселей современные требования Гугл и других сервисов что-то около 20-50 Килобайт.

Изменение масштабов изображений

WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.

Пример кода отзывчивых изображений srcset

Медиа-библиотека WordPress создает миниатюры на основе ваших установок. Но при этом она сохраняет оригинальные изображения без изменений. Чтобы изменить размер изображений, не сохраняя оригинальные, можно воспользоваться бесплатным плагином Imsanity.

Настройка медиафайлов в WordPress

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

Проверка изображений в SE Ranking

В SE Ranking вы можете проверить изображения с помощью инструментов «Анализ сайта» и «SEO-проверка страницы». 

Секция «Изображения» в подразделе «Отчет об ошибках» определит, если на сайте есть картинки слишком большого размера или с незаполненным текстом alt:

Кроме этого, в «Анализе сайта» есть подраздел «Найденные ресурсы», где можно просмотреть URL-адреса каждого изображения, код ответа сервера, размер и скорость загрузки:

«SEO-проверка страницы» также определяет проблемы с заполнением атрибута alt и имени файла, а также анализирует уникальность изображений:

С помощью SE Ranking вы также можете проверить, какие спецэлементы  сайт получил в выдаче Google — ведь большинство из них так или иначе связаны с картинками. Для этого анализируйте колонку «Элементы поиска» в таблице «Позиций».

Почему SEO-оптимизация изображений важна?

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

К слову, сервис Яндекс.Картинки является вторым сервисом Яндекса по посещаемости после web-поиска. Он содержит в себе около 10 миллиардов документов и ежедневно предоставляет более чем 5 миллионам пользователей доступ к проиндексированным графическим материалам.

SEO-оптимизация изображений — это достаточна простая для понимания работа, которая поможет вашему сайту:

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

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

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

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

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

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

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

Hands-on tests with these six image optimizer plugins

To find the best image optimization plugin for WordPress we have to put these tools to the test. We wanted to see how effectively each plugin could optimize the same image.

This gets a bit tricky, since some of the WordPress image optimizer plugins offer varying levels of optimization. For instance, Imagify has Normal, Aggressive, and Ultra optimization modes.

In addition, some of the optimizers provide automated resizing tools, which can cut down the file size drastically.

Because of those differences, it’s hard to come up with an objective comparison. Here’s how we’re going to do it:

• We’ll run two tests: one for JPG files and one for PNGs.
• We’ll stick with the default settings for all plugins and not resize the photos at all.

Though it’s not a perfect comparison, by sticking with the default settings, we’re trying to emulate the experience for a casual user. By that, we mean that the average user would typically install the image compression plugin and not mess with too many default settings.

Testing each WordPress image optimizer with JPG files

Here’s our JPG test subject:

Plugin	Original Size	Size After Optimization	Optimization Percentage	Type of Compression
ShortPixel	518 KB	169 KB	67.36%	Lossy
TinyPNG	518 KB	248.6 KB	52%	Lossy
Optimole	518 KB	274 KB	47%	Lossy and Lossless
Imagify	518 KB	338.7 KB	34.64%	Lossy
EWWW	518 KB	488.9 KB	5.7%	Lossless
Smush	518 KB	493 KB	4.9%	Lossless

Sticking with default settings, ShortPixel is the clear winner, coming in with a ~67% reduction in file size using its lossy compression. TinyPNG gets second place, but it’s a good bit further back. And despite still using lossy compression, Imagify only managed to shrink the image by ~34%.

Testing each WordPress image optimizer with PNG files

Here’s the PNG test image:

Plugin	Original Size	Size After Optimization	Optimization Percentage	Type of Compression
Optimole	301 KB	34 KB	88.7%	Lossy and Lossless
Imagify	301 KB	67 KB	77.7%	Lossy
TinyPNG	301 KB	79.7 KB	73.5%	Lossy
ShortPixel	301 KB	90.4 KB	69.96%	Lossy
Smush	301 KB	247 KB	17.9%	Lossless
EWWW	301 KB	257.4 KB	14.6%	Lossless

This time, the competition is more fierce. Now, the Optimole Image Optimization plugin takes the top spot with 88.7% optimization. Imagify, TinyPNG and ShortPixel are not far behind.

As you may notice, those are the same plugins we saw perform well in the JPG test. Does that mean they’re definitely better? No. But it shows that they’re preset to perform the best, which in my mind is a huge factor.

If the average user can’t accomplish a 70% compression rating without upgrading to premium or switching around settings, I’d put a plugin like that at the bottom of my list.

So, after two real-world optimization tests, the winners are Imagify, ShortPixel, Optimole, and TinyPNG. 

Note: You may see that the image degradation is more prevalent with extreme optimization settings. For instance, I actually noticed a clear difference in how the PNG looked through Optimole – since by default that plugin gets more aggressive with its file shrinking.

Smush Image Compression and Optimization

How’s the interface?

Smush has a beautiful interface with proactive elements that ask if you’d like to optimize both old photos and new ones. The main advantage of Smush is the amount of information provided about your images and how much space you’ve saved.

How are the features?

Resizing and optimization are both included with new and old pictures. The bulk optimize tool is great for when you have several pictures.

In the free version, you can only bulk optimize 50 old images at a time, so you might need to click the button a few times if you have lots of images.

How’s the pricing?

One of the benefits of Smush is that it lets you optimize unlimited images for free. There are just two caveats:

• You can only use lossless compression in the free version
• Individual images cannot exceed 5MB

To remove that limit and get lossy compression, you can use WP Smush Pro. This premium plugin is included with the WPMUDEV development package for $82.50 per month. That’s a steep price if you only need this plugin, but many developers love the subscription since you get everything else you need for building websites.

Для чего нужна оптимизация изображений

Одним из показателей успешности сайта, является его скорость загрузки. Для этого вебмастера применяют целый комплекс мер, одним из которых является сжатие всех картинок с веб-площадки. Для чего же сжимать картинки? Предположим, вы вбиваете в поисковик фразу по которой найдено много сайтов с нужной информацией. Вы кликаете на любой сайт из списка, и… он долго, очень медленно начинается грузиться. Знакома такая картина? Уверен, что у большинства не хватит терпения дождаться пока он загрузится, и сайт попросту закрывают. А сам владелец этого сайта потом удивляется, почему посетители не посещают его детище, вроде и тексты уникальные, и в поисковиках все страницы проиндексированы.

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

Работать с такими сервисами очень просто. Вы загружаете на их сервер картинку (или несколько), которые нужно сжать, кликаете на кнопочку, и ждёте несколько секунд, после чего появляется эта же картинка, но уже оптимизированная (сжатая), притом же ее качество ничем не хуже оригинала.

А сейчас я покажу несколько, а вернее 8 таких сервисов, из которых вы сможете выбрать любой, что вам понравится. Для эксперимента я возьму вот эту картинку в формате jpg, размером 640х480 и весом 125кб и посмотрим, как ее будут сжимать те или иные сервисы.

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

Настройка lazy loading изображений

Есть ещё один способ ускорения сайтов при помощи оптимизации изображений. Это настройка отложенной или ленивой (lazy) загрузки. Такую функцию использует очень много сайтов. 

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

Когда стоит настраивать отложенную загрузку? 

• Если у вас на сайте много изображений.
• Когда картинки — основной контент.
• Когда сайт грузится очень медленно.
• Процент посетителей с мобильных устройств больше 50.

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

Как Яндекс и Google индексируют картинки?

Изображение в HTML-коде любого документа выглядит подобным образом:

<img src="https://naked-seo.ru/wp-content/uploads/2018/09/images-seo-optimization.jpg" alt="SEO-оптимизация изображений" title="SEO-оптимизация изображений и картинок для сайта">

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

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

• Текст. Самым значимым сигналом для определения содержимого изображения является текст. Описание изображения и атрибуты очень важны, так как на основании их и ближайшего текста около картинки, микроразметки поисковый алгоритм понимает суть контента, и использует эти данные в дальнейшем для определения уникальности изображения и необходимости добавления его в выдачу.
• Искажения. Поисковые системы давно научились определять разного рода кропы, ресайзы, вращения, искажения и модификации изображений. Данные манипуляции не помогут Вам повысить уникальность картинок, поэтому следует использовать данные приемы только в целях дизайна.
• Пользовательская составляющая. При ранжировании изображений в выдаче учитываются пользовательские запросы и опыт взаимодействия с картинками. Алгоритм является самообучаемым и учитывает интерес пользователей, количество кликов и их поведение в отношении тех или иных документов. Другими словами, чем популярнее изображение, чем больше пользователей в сети им делятся и проявляют к нему интерес, тем выше вероятность что изображение не только попадет в выдачу, но и займет там более высокие позиции по соответствующим запросам.
• Время. Время обнаружения изображения поисковым роботом не является решающим сигналом в определении оригинальности. Данный показатель учитывается, но является гораздо более слабым по отношению к тексту и пользовательским интересам.
• Соответствие текста и изображения. Поисковые системы определяют содержание изображения на основе текста, далее сравнивают текст вашего изображения с текстом всех дублирующихся изображений в сети до определенной степени схожести. Далее на основе всех текстовых данных всех дубликатов определяются наиболее релевантные слова для конкретного изображения, и опираясь на наибольшее текстовое соответствие выборке определяется релевантный вариант ключевого запроса, наиболее часто встречающийся во всех дубликатах. Наибольшее соответствие этому запросу повышает вероятность попадания именно вашего изображения в выдачу.
• Качество, размер. Вполне логично, что поисковые системы добавляют в выдачу наиболее качественные изображения с наибольшим размером. Однако, чтобы не создавать избыточной потери трафика для пользователей учитываются изображения в среднем до 4-6 мб.
• Водяной знак. Наличие water mark не влияет на оценку изображения. Поисковые системы с высокой степенью точности умеют определять дубликаты даже при наличии водяных знаков.

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

Если вам интересно подробнее узнать о алгоритме работы поискового робота картинок Яндекс, советуем вам посмотреть данное видео:

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

Рекомендации

• Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
• Используйте векторные изображения, где это только возможно.
• Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
• Используйте эффекты CSS3 как можно чаще.
• Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
• Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
• Уменьшайте глубину цвета для использования меньшей цветовой палитры.
• Используйте сжатие с потерей качества, где только возможно.
• Экспериментируйте для поиска наилучших установок для каждого формата.
• Используйте GIF, если вам нужна анимация.
• Используйте формат PNG, если вам требуется высокая детализация и разрешение.
• Используйте формат JPG для фотографий общего вида и скриншотов.
• Автоматизируйте процесс оптимизации изображений.
• Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.

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

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

Наталья Кайдаавтор-переводчик статьи «How to Optimize Images for Web and Performance»

Выводы

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

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

• графические файлы должны быть доступны для поисковых роботов (в файле robots.txt папки с изображениями не должны закрываться от индексации);
• привлекать внешние ссылки для наиболее ценных изображений;
• обеспечить уникальность графических материалов.

Дополнительную информацию можно найти в справочниках поисковых систем:

Выводы

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

• Сохранять файлы с картинками сразу же в правильном корректном формате, том, который хорошо индексируется поисковиками.
• На страницах ресурса всегда указывать размер отражаемой части фото.
• Размещать исключительно полезный и обязательно уникальный контент.
• Применять для сжатия фотографий современный инструментарий.
• Картинки всегда оптимизировать посредством тега alt.
• Добавить для фотографий карту веб-сайта.
• Использовать микроданные для фото.
• Загружать только те картинки, которые тесно связаны с контентом по смыслу.

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