Оптимизация фото сайта: Как оптимизировать картинки на сайте для мобильных

Содержание

Как быстро сжать изображения на сайте

Зачем нужно оптимизировать картинки и как сделать это автоматически.

Текст от нашего партнера — OptiPic.

Ускорение сайта улучшает поведенческие факторы и поднимает конверсию. Для примера — график зависимости конверсии от времени загрузки, который основан на исследовании Walmart:

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

Как оптимизация изображений ускоряет сайт

Страница сайта обычно состоит из:

  • HTML-кода: разметка, верстка, тексты;
  • JavaScript-скриптов с логикой, которая будет выполняться на стороне браузера;
  • CSS-файлов со стилями страницы;
  • видео;
  • изображений.

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

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

Сжатие уменьшает объем изображений на 70-98% без визуальной потери качества:

Что такое оптимизация изображения


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

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

При правильной обработке можно добиться уменьшения файла на 70-98% без видимой потери качества.

В результате оптимизации изображений вы получите

  • Ускорение загрузки страниц;
  • Увеличение конверсии;
  • Увеличение показателей Google Pagespeed Insights;
  • Снижение отказов, улучшение поведенческих факторов на сайте;
  • Улучшенное ранжирование сайта в поисковой выдаче;
  • Снижение нагрузки на хостинг/сервер;
  • Экономию места на диске.

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

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

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

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

Дешевле и быстрее — автоматизировать процесс

Сервис OptiPic.io специально предназначен для решения этой проблемы.
Буквально за две минуты вы сможете подключить свой сайт к системе, которая просканирует весь сайт, найдет и оптимизирует все найденные изображения.

Оптимизация всех изображений на сайте проходит в на полном автопилоте в фоновом режиме. Сервис сам находит на сайте все изображения и оптимизирует их.


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

OptiPic легко подключается к любому сайту практически в 2 клика.
Поддерживаются все CMS и фреймворки, а также самописные сайты на PHP.

Преимущества OptiPic

  • Полная автоматизация.
    Оптимизируются не только уже существующие на сайте изображения, но и добавляемые в дальнейшем новые. Сервис работает сам по себе в фоновом режиме;
  • URL изображений не меняется. Сжатые изображения хранятся на вашем сайте;
  • Простая интеграция с любым сайтом на PHP - даже самописным;
  • Русская техподдержка;
  • Система не имеет каких-либо ограничений на объем или размер изображений;
  • Работает на обычных хостингах, не требуется vps или выделенного сервера;
  • Не требуются навыки системного администрирования и программирования для установки и использования;
  • Бесплатная помощь в подключении;
  • Без ежемесячных платежей.

Оценить эффективность оптимизации можно на сайте OptiPic.io. Это бесплатно и не требует регистрации.

Что такое оптимизация изображений?

От автора: оптимизация изображений – один из простейших способов ускорить сайт и повысить баллы в PageSpeed и YSlow. Несжатые и большие изображения много весят и вынуждают загружать пользователей ненужные данные. Оптимизация изображений снижает общий вес страницы, из-за чего страница грузится быстрее.

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

Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?

стоковый сайт?

камера?

мобильное устройство?

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

поисковик?

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

По большей части, эти изображения весят больше, чем нужно.

Что будет, если использовать неоптимизированные изображения

Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:

Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся

Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!

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

Браузер рендерит масштабированное изображение на странице.

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

Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.

Изображение экспортировалось в максимальном качестве 12/100% — это уровень для печати.

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

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

Что такое оптимизация изображений?

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

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

Разрешение сильно влияет на размер файла

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

Сжатие

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше

Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.

Сжатые изображения хуже по качеству – заметны артефакты и потеря деталей и цветов

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

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

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

Еще больше оптимизации

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

Пользователи не видят метаданные, поэтому их нужно вырезать

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

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

Что будет, если использовать оптимизированные изображения

Уменьшенные и сжатые изображения быстрее загружаются и рендерятся

Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!

HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.

В результате изображения на сайте намного быстрее загружаются и рендерятся.

«Работа с масштабированными изображениями» и адаптивный веб

У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями».

И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»

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

Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.

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

В адаптивном дизайне тоже придется масштабировать изображения

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

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

А как вы оптимизируете изображения?

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

Источник: //gtmetrix.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

как выйти в топ поиска по картинкам — SEO на vc. ru

{"id":74892,"url":"https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam","title":"13 \u043f\u0440\u0438\u0451\u043c\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u043a\u0430\u043a \u0432\u044b\u0439\u0442\u0438 \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c","services":{"facebook":{"url":"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam","short_name":"FB","title":"Facebook","width":600,"height":450},"vkontakte":{"url":"https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam&title=13 \u043f\u0440\u0438\u0451\u043c\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u043a\u0430\u043a \u0432\u044b\u0439\u0442\u0438 \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c","short_name":"VK","title":"\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435","width":600,"height":450},"twitter":{"url":"https:\/\/twitter.

com\/intent\/tweet?url=https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam&text=13 \u043f\u0440\u0438\u0451\u043c\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u043a\u0430\u043a \u0432\u044b\u0439\u0442\u0438 \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c","short_name":"TW","title":"Twitter","width":600,"height":450},"telegram":{"url":"tg:\/\/msg_url?url=https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam&text=13 \u043f\u0440\u0438\u0451\u043c\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u043a\u0430\u043a \u0432\u044b\u0439\u0442\u0438 \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c","short_name":"TG","title":"Telegram","width":600,"height":450},"odnoklassniki":{"url":"http:\/\/connect. ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam","short_name":"OK","title":"\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438","width":600,"height":450},"email":{"url":"mailto:?subject=13 \u043f\u0440\u0438\u0451\u043c\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: \u043a\u0430\u043a \u0432\u044b\u0439\u0442\u0438 \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c&body=https:\/\/vc.ru\/seo\/74892-13-priemov-optimizacii-izobrazheniy-kak-vyyti-v-top-poiska-po-kartinkam","short_name":"Email","title":"\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443","width":600,"height":450}},"isFavorited":false}

19 492 просмотров

16 полезных фишек + чек-лист для проверки — Агентство REFORGE

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

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

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

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

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

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

Согласно статистике сервиса HTTP Archive, в среднем 28% объёма страницы занимает графика. Поэтому если вы хотите сделать ваш сайт удобным и быстрым, то вам стоит заняться оптимизацией картинок.

Соотношение типов файлов
ТипКилобайтПроцент от общего веса
Видео2378,555,31%
Изображения1212,428,19%
JavaScript449,510,45%
Шрифты134,63,13%
CSS98,72,30%
HTML25,70,60%
Остальное0,70,02%

Поисковые системы с недавних пор учитывают насколько хорошо вы работаете с картинками и используют это как один из факторов ранжирования. Вы же не хотите чтобы ваш сайт был на 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

И тут закономерно побеждает 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. Качество сжатия регулировал вручную (если была такая возможность) до уровня видимой потери. Как справился каждый сервис можно увидеть в таблице:

ОригиналJPG 276 кбPNG 20,6 кб
TinyPNG196 кб (-30%)19,2 кб (-7%)
Optimizilla160 кб (-42%)17 кб (-18%)
Kraken.io262 кб (-5%)18,5 кб (-8%)
Imagify.io270 кб (-2%)20,6 кб (0)

Лучше всего в этом тесте себя показала 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>. Он говорит браузеру какую версию загружать под какое разрешение. Синтаксис выглядит так:

<img src=”.../photo.png” srcset=”ptoho-small.png 320w, photo-middle.png 768w, photo-big.png 800w”>

<img src=”.../photo.png” srcset=”ptoho-small.png 320w, photo-middle.png 768w, photo-big.png 800w”>

Логика работы довольно простая. Когда браузер начинает загрузку, он сравнивает соотношение ширины каждой картинки в 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 можно в исходном коде.

Включенный 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. Фотоманипуляции. Можно добавить подложку, какие-то другие элементы (текст, графику, коллаж) и тем самым сделать изображение уникальным для поисковых систем.
После манипуляций фото из предыдущего примера Google счет уникальным

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 сохраняет четкость при любом разрешении и поддерживается всеми современными браузерами. А за счет масшт

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

1. Форматы изображений для загрузки на сайт

Загружайте изображения на сайт в распространенных графических форматах: jpeg, gif, png.

  • Для сохранения качества фотографий, а также рисунков с градиентными заливками, лучше использовать формат jpeg.
  • Для простых рисунков и особенно черно-белой графики, подойдет формат gif. Также форматы gif и png поддерживают прозрачность; то есть, воспользовавшись ими, Вы сможете сохранить рисунок на прозрачном фоне.
  • Формат png представляет собою нечто среднее между jpeg и gif. Он более щадяще, чем gif обрабатывает сложные изображения, и поддерживает прозрачность, в отличие от jpeg. Минусом сохранения изображений в этом формате является большой вес итоговых файлов при удовлетворительном качестве картинки и наоборот, низкое качество картинки при необходимости сохранения ее с малым «весом», т. е., — с сильным сжатием.

2. Размер изображения в пикселях и его «вес» в килобайтах

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

Однако, и сейчас, неправильным будет заставлять пользователя грузить к себе картинки весом по 500-1000 Кб, т.к. для пользователей мобильного интернета, это — потерянные секунды и рубли.

«Вес» картинки тесно (но не линейно) связан с ее размером в пикселях, а также со степенью ее сжатия.

2.1 Оптимальный размер фото для сайта. Каким должен быть размер, в пикселях, изображения для сайта?

Оттолкнувшись от средней ширины текстовой страницы сайта в 700-1000 пкс и предположив, что картинки будут занимать на этой странице не более 2\3 ширины, мы получим, что максимальная ширина картинки не должна превышать 400-600 пкс, ( кроме тех случаев, когда мы собираемся разместить картинку во всю ширину страницы.

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

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

2.2 Оптимальный «вес», в килобайтах, изображения для сайта

Предположим, мы уже уменьшили размер изображения для сайта в каком-либо графическом редакторе до 400-600 пкс по ширине. Следующим шагом будет уменьшение веса изображения. Потому что разница в весе изображений, сохраненных в 100% jpeg ( без сжатия) и в 50% jpeg, может быть «в разы».

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

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

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

Страницы (и любые документы) общим весом более 10Мб, вообще, не индексируются поисковыми системами.

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

3. Имя файла

Для хорошей индексации графического файла, правильным именем файла, с точки зрения seo, будет осмысленное имя, написанное на английском языке или транслитом (только латиница!), не содержащее никаких других символов, кроме букв латинского алфавита, цифр, символов нижнего подчеркивания и тире. Например: prodvijenie-saitov.jpeg

4. Заполнение атрибутов изображений на сайте

Для web-изображений предусмотрено 2 вида атрибутов:

  • Альтернативный текст (alt) – текст, который отображается вместо изображения, если оно само, по любой причине, не подгрузилось на страницу, например: «это — изображение яблока».
  • Всплывающая подсказка (title), которая появляется при наведении курсора на картинку.

Разумеется, оба атрибута должны быть корректно заполнены и отвечать содержимому изображения и\ или страницы. Содержимое тегов может дублироваться.

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

5. Рекомендуемое количество изображений на странице

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


Читать далее

Подготовка материалов к постановке на сайт

Как оптимизировать web-страницу?

Оптимизация картинок для сайта Блог Ивана Кунпана

                                                                                                           

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

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

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

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

Ранее на блоге была опубликована пара статей на эту тему «Как увеличить посещаемость сайта» и «Как поднять посещаемость сайта«, написана также книга «Секреты размещения анонсов на портале Subscribe», поэтому освещать подробности в работе с данным порталом не буду. Материал можно прочитать по указанным выше ссылкам.

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

Итак, для размещения анонса на портале Subscribe, мы готовим уникальный текст анонса на 800 — 1000 знаков, включая пробел (в большинстве групп на портале Subscribe). Далее в текст анонса вставляется картинка – это обязательное условие всех групп.

Картинку удобно вставлять со статьи блога. Копируется ссылка картинки с блога и вставляется в поле «Адрес» окна «Добавить\изменить изображение» (подробно это показано в картинках книги). Именно так и делает большинство блоггеров, а это не есть хорошо. Попробуем разобраться подробнее почему?

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

И если на портале Subscribe будет размещена часть статьи (не уникальный анонс), то эта часть статьи с блога будет проиндексирована первой. Средняя статья на сайтах насчитывает 3000 знаков. И если от неё взять текст в 1000 знаков для анонса, то уникальность статьи на блоге останется 67%. Статью с такой уникальностью поисковые системы точно не проиндексируют.

Кроме того, что такой статьи не будет в индексе поисковых систем, так Яндекс и Google еще примут и санкции к сайту (блогу) за ворованный контент. Вот по этой причине и надо писать для анонсов уникальные тексты, либо ждать индексации статьи поисковыми системами, а после их индексации размещать анонсы на портале Subscribe.

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

Поэтому при подготовке анонса для новостного канала Subscribe, необходимо заготовить 5-6 картинок с Интернета и сохранить их в папке на компьютере. Одну и ту же картинку можно вставлять в 4 – 6 группах. Если размещать в 30 группах один и тот же анонс и одну и ту же картинку, модераторы могут не пропустить часть Ваших анонсов.

Напомню, что картинка из папки компьютера вставляется в том же окне «Добавить\изменить изображение», только делается это через кнопку «Обзор» (подробности в книге).

Такой анонс статьи будет полностью уникальным и никак не повлияет на отрицательную индексацию статьи на блоге, а поможет привести посетителей на блог и ускорит индексацию статьи. Хотелось сказать несколько слов о вставляемой картинке в сатью сайта (блога). Оптимизация картинок WordPress.

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

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

Свои картинки я обрабатываю в программе «OLYMPUS Master» от фотоаппарата (подробности можно посмотреть в статье «Как сделать фотографию для статьи«).

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

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

Для того чтобы сделать картинку статичной в опубликованной статье блога необходимо зайти в админпанель сайта, «Записи», «Все записи». Выбираем нужную статью и нажимаем «Изменить». Открывается статья для редактирования. На картинке к статье нажимаем на всплывающую маленькую картинку (смотрите скрин 1), после чего открывается новое окно.

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

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

В процессе установки картинки в новую статью, эту ссылку надо убирать сразу же.

Если картинку надо открывать, например скрин, то убирать ссылку тогда не надо. Как видите всё легко и просто. Удачи Вам.

P. S. Сейчас в статьях блога я использую исключительно уникальные картинки, провожу их оптимизацию, и могу сказать однозначно, что оптимизация картинок для сайта нужна. О том, как легко и просто сделать уникальную картинку своими руками Вы можете прочитать статью «Уникальные картинки для статей блога» на блоге.

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

Просмотров: 566

6 лучших плагинов для оптимизации изображений WordPress (протестированные и сравненные)

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

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

Шесть плагинов оптимизатора изображений WordPress, которые мы сравним

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

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

Практические тесты с этими шестью плагинами оптимизатора изображений

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

Это немного сложно, так как некоторые плагины оптимизатора изображений WordPress предлагают различные уровни оптимизации. Например, Imagify имеет режимы оптимизации Normal, Aggressive и Ultra.

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

Из-за этих различий трудно провести объективное сравнение. Вот как мы это сделаем:

  • Мы проведем два теста: один для файлов JPG и один для PNG.
  • Мы будем придерживаться настроек по умолчанию для всех плагинов и вообще не изменять размер фотографий.

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

Тестирование каждого оптимизатора изображений WordPress с файлами JPG

Вот наш испытуемый в формате JPG:

Плагин Размер оригинала Размер после оптимизации Процент оптимизации Тип сжатия
ShortPixel 518 КБ 169 КБ 67. 36% С потерей
TinyPNG 518 КБ 248,6 КБ 52% С потерями
Optimole 518 КБ 274 КБ 47% С потерями и без потерь
Imagify 518 КБ 338,7 КБ 34,64% С потерями
EWWW 518 КБ 488,9 КБ 5,7% Без потерь
Smush 518 КБ 493 КБ 4.9% без потерь

При сохранении настроек по умолчанию, ShortPixel является явным победителем, благодаря его сжатию с потерями размер файла уменьшается на ~ 67%. TinyPNG занимает второе место, но немного отстает. И, несмотря на то, что по-прежнему используется сжатие с потерями, Imagify удалось уменьшить изображение только на ~ 34%.

Тестирование каждого оптимизатора изображений WordPress с файлами PNG

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

Плагин Размер оригинала Размер после оптимизации Процент оптимизации Тип сжатия
Optimole 301 КБ 34 КБ 88. 7% С потерями и без потерь
Imagify301 КБ 67 КБ 77,7% С потерями
TinyPNG 301 КБ 79,7 КБ 73,5% С потерями
ShortPixel 301 КБ 90,4 КБ 69,96% С потерями
Smush301 КБ 247 КБ 17,9% Без потерь
EWWW 301 КБ 257.4 КБ 14,6% Без потерь

На этот раз конкуренция более ожесточенная. Теперь плагин Optimole Image Optimization занимает первое место с оптимизацией 88,7%. Imagify, TinyPNG и ShortPixel не отстают.

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

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

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

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

Интерфейс, функции и цены

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

1. Услуга оптимизации изображений от Optimole

Как интерфейс?

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

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

Как функции?

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

Как цены?

Бесплатный план позволяет 5000 посетителей в месяц и неограниченную пропускную способность, что делает его подходящим для личных блогов WordPress. Продаются три других плана по цене от 10,62 доллара в месяц за 25 000 посещений в месяц и неограниченную пропускную способность. CDN также включен в платные планы.

2. Представьте

Как интерфейс?

У

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

Как функции?

При тестировании оптимизации Imagify показал хорошие результаты. Однако это было в настройке оптимизации Aggressive по умолчанию. Вы также можете выбрать Обычный (без потерь) и Ультра (с потерями). Итак, вы можете сжимать изображения больше или меньше, если беспокоитесь о качестве.

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

Как цены?

Цены основаны на фактическом размере загружаемого файла изображения. Для бесплатного плана можно использовать менее 1 ГБ в месяц, но после этого тариф начинается с 4,99 доллара в месяц.

3. Сжатие и оптимизация нечетких изображений

Как интерфейс?

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

Как функции?

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

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

Как цены?

Одним из преимуществ Smush является то, что он позволяет бесплатно оптимизировать неограниченное количество изображений.Есть всего два предостережения:

  • Вы можете использовать сжатие без потерь только в бесплатной версии
  • Размер отдельных изображений не может превышать 1 МБ

Чтобы снять это ограничение и получить сжатие с потерями, вы можете использовать WP Smush Pro. Этот премиум-плагин включен в пакет разработки WPMUDEV за 49 долларов в месяц. Это высокая цена, если вам нужен только этот плагин, но многим разработчикам нравится подписка, так как вы получаете все остальное, что нужно для создания веб-сайтов.

4.EWWW Image Optimizer

Как интерфейс?

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

Как функции?

EWWW предлагает оптимизацию JPG, PNG, GIF и PDF. Есть также варианты сжатия с потерями и без потерь. Основное преимущество заключается в том, что EWWW не имеет ограничений на размер файлов или количество загружаемых изображений.

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

Как цены?

Основной плагин EWWW бесплатный. Вы также можете заплатить за доступ к API, если вы хотите переложить работу на чужой сервер - но в этом нет необходимости.

5.Оптимизатор изображения ShortPixel

Как интерфейс?

Панель управления

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

Как функции?

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

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

  • Оптимизация PDF
  • Поддержка изображений WebP
  • Интеграция Cloudflare, если вы используете CDN

Как цены?

ShortPixel предоставляет 100 бесплатных кредитов на изображения каждый месяц.Если вам нужно больше, планы начинаются с 4,99 доллара США за 5000 кредитов изображений. Для отдельных изображений нет ограничений на размер файла.

6. Сжатие изображений JPEG и PNG с помощью TinyPNG

Как интерфейс?

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

Как функции?

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

Как цены?

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

Какой оптимизатор изображений WordPress выбрать?

  • Optimole - для довольно мощного бесплатного плана и включенного CDN, отложенной загрузки и обеспечения возможности всегда отображать версию изображения, оптимизированную специально для экрана и устройства зрителя.
  • Imagify - Для отличного сжатия, функций и интерфейса.
  • Smush - для неограниченного бесплатного сжатия без потерь ( с максимальным размером 1 МБ для каждого изображения) .
  • EWWW - для бесплатного оптимизатора изображений WordPress и без ограничений по размеру файла. Просто помните, что он работает на вашем собственном сервере.
  • ShortPixel - За лучшую оптимизацию и самый красивый интерфейс.
  • TinyPNG - Для отличной оптимизации и самого простого интерфейса.

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

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%
, просто следуя простым советам.

Smush - Ленивая загрузка изображений, оптимизация и сжатие изображений - плагин WordPress

Оптимизируйте изображения, включайте ленивую загрузку, изменяйте размер, сжимайте и улучшайте скорость страницы Google с помощью невероятно мощного и на 100% бесплатного средства удаления изображений WordPress, созданного суперкомандой WPMU DEV!

И независимо от того, пишете ли вы «оптимизировать» или «оптимизировать», Smush сжимает изображения без видимого падения качества.

Оптимизация изображений - это самый простой способ ускорить загрузку вашего сайта!

Оптимизатор изображения, удостоенный награды

Smush был проверен и испытан номером один по скорости и качеству. Это также отмеченный наградами плагин для оптимизации и сжатия изображений для WordPress.

  • Сжатие без потерь - удаление неиспользуемых данных и сжатие изображений без потери качества изображения.
  • Lazy Load - отложить закадровые изображения щелчком переключателя.
  • Bulk Smush - Оптимизируйте и сжимайте до 50 изображений одним щелчком мыши.
  • Image Resizing - Установите максимальную ширину и высоту, и большие изображения будут уменьшаться по мере сжатия.
  • Обнаружение изображения неправильного размера - быстро найдите изображения, которые замедляют работу вашего сайта.
  • Directory Smush - Оптимизируйте изображения, даже если они не находятся в медиатеке.
  • Автоматическая оптимизация - асинхронно автоматически удаляйте ваши вложения для сверхбыстрого сжатия при загрузке.
  • Без месячных ограничений - Оптимизируйте все свои изображения размером до 5 МБ, бесплатно навсегда (без ежедневных, ежемесячных или годовых ограничений).
  • Gutenberg Block Integration - Просмотр всей статистики Smush прямо в блоках изображений.
  • Multisite Compatible - Предлагает как глобальные, так и индивидуальные настройки мультисайта.
  • Обработка всех ваших файлов - Smush будет обрабатывать файлы PNG, JPEG и GIF для достижения оптимальных результатов.
  • Super Servers - Создавайте изображения без замедления с помощью быстрого и надежного API Smush от WPMU DEV.
  • Convert to WebP (только Pro) - обновление и автоматическое обслуживание изображений в формате Next-Gen WebP.
  • И многое, многое другое!

Изучите канаты с помощью этих практических руководств по Smush

Сжать изображение с сохранением качества изображения

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

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

Сжать любое изображение в любом каталоге

В дополнение к огромному количеству загружаемых медиафайлов, вы можете захотеть сжать изображения, хранящиеся в других папках. Smush теперь позволяет вам сжимать любое изображение в любом каталоге, чтобы вы могли оптимизировать все изображения на вашем сайте, включая изображения NextGEN, изображения, хранящиеся на Amazon S3 с помощью WP Offload Media, и изображения в КАЖДОМ пакете плагинов и тем WordPress!

Совместимость с вашими любимыми темами, компоновщиками страниц и плагинами медиа-библиотеки

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

Обнаружение изображения неправильного размера

Smush включает средство поиска изображений неправильного размера. Активируйте, и ваши изображения будут выделены умными советами по масштабированию изображений. Быстро найдите изображения, которые мешают вам получить идеальную сотню в вашем тесте Google PageSpeed.

Отложить закадровые изображения

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

★★★★★

«Я понятия не имел, что время загрузки моей страницы сокращается из-за изображений. Плагин сократил время работы почти вдвое ». - karlcw

★★★★★

«Я оптимизирую свои фотографии в Photoshop, но Smush делает это так просто - он делает это автоматически. Я могу просто сесть и наслаждаться скоростью ». - helen432

★★★★★

«Smush помог уменьшить общий размер файлов на моем сайте и повысить скорость просмотра. Молодцы ребята!" - pdci

★★★★★

«Это очень дискретно, и меня не беспокоит ключ API или другие дополнительные шаги по установке.Основная панель управления плагином дает мне хорошее представление. В целом это действительно соответствует моим потребностям, и я готов перейти на профессиональную версию, если мои потребности изменятся. Я без колебаний рекомендую его клиентам / друзьям. Так держать!" - таркан_

А как насчет мультисайта?

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

Smush очень прост в использовании - никаких запутанных настроек программного обеспечения для сжатия. Размещайте изображения в своей библиотеке по одному или массово до 50 изображений за раз.Кроме того, настройте auto-smush для асинхронного масштабирования и сжатия некоторых или всех изображений по мере их загрузки - это невероятно быстро.

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

Бесстыдные плагины (ины)

  • Hummingbird - Оптимизация скорости страницы
  • Hustle - всплывающие окна, слайды и подписка на электронную почту
  • SmartCrawl - оптимизатор SEO
  • Defender - Безопасность, мониторинг и защита от взлома
  • Forminator - Конструктор форм, опросов и викторин
  • Beehive - настраиваемые информационные панели Google Analytics

Smush бесплатно позаботится обо всех ваших нуждах в сжатии изображений!

Однако, если вам нужно сжатие с потерями Super Smush, быстрая доставка изображений CDN, преобразование WebP, автоматическое изменение размера, возможность оптимизации (или оптимизации) изображений размером до 32 МБ, массовая оптимизация для всех ваших изображений всего одним щелчком мыши, автоматическое преобразование PNG в JPEG, возможность Smush и создание копий ваших полноразмерных изображений (для их восстановления в любой момент), вы всегда можете сделать следующий шаг с WP Smush Pro.И получите еще больше с ее командой друзей-героев оптимизации WordPress (безопасность, SEO, производительность, поддержка и автоматизация обслуживания), которым доверяют тысячи агентств и фрилансеров, предлагающих услуги по обслуживанию сайтов.

Конфиденциальность

Smush не взаимодействует с конечными пользователями на вашем сайте. Единственный вариант ввода, который есть у Smush, - это подписка на новостную рассылку только для администраторов сайта.

Smush использует стороннюю службу электронной почты (Mailchimp) для отправки информационных писем (Opt-in) администратору сайта.Адрес электронной почты администратора отправляется Mailchimp, а служба устанавливает файл cookie. Mailchimp собирает только информацию администратора.

Smush отправляет изображения на серверы WPMU DEV, чтобы оптимизировать их для использования в Интернете. Это включает передачу данных EXIF. Данные EXIF ​​будут удалены или возвращены как есть. Он не хранится на серверах WPMU DEV.

О нас

WPMU DEV - это премиальный поставщик качественных плагинов, услуг и поддержки WordPress. Узнайте больше здесь:
https: // premium.wpmudev.org/

Не забывайте быть в курсе всего WordPress из ресурса номер один в Интернете:
WPMU DEV Blog

Эй, еще кое-что ... мы надеемся, что вам понравятся наши бесплатные предложения так же, как мы любим делать их для вас!

Контакты и кредиты

Первоначально написано Алексом Дунае из Dialect (dialect.ca, электронная почта «alex» на «dialect dot ca»), 2008-11 гг.

Оптимизация изображений и отложенная загрузка от Optimole - плагин для WordPress

Что делает Optimole таким особенным?

  • Изображения меньшего размера.То же качество
  • Полностью автоматизированный; установить и забыть
  • Поддерживает все типы изображений
  • Поддерживает изображения Retina и WebP
  • Предоставляет изображения из глобальной сети CDN бесплатно
  • Оптимизируется на основе фактического устройства посетителя (больше никаких догадок и оценок ширины)
  • Полная поддержка конструкторов страниц, таких как Elementor
  • Ленивая загрузка без jQuery (лучше)
  • Полнофункциональная бесплатная версия (у нас есть и платные тарифные планы)

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

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

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

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

Как он делает все эти замечательные вещи?
Оптимизация Optimole на основе форматов осуществляется в облаке в индивидуальном порядке. После установки плагина Optimole заменит все URL-адреса ваших изображений на URL-адреса в облаке. Мы не заменяем изображения на вашем сайте, мы сжимаем изображения на лету.
Когда изображение будет запрошено, Optimole применит определенные преобразования, требуемые устройством, и доставит его вашим посетителям.Это означает, что каждое изображение идеально подходит для любого устройства. Окончательный результат будет кэшироваться на месяц, чтобы обеспечить быструю доставку и большую скорость сайта.

Сколько изображений можно оптимизировать?
Используя базовый план, вы сможете оптимизировать неограниченное количество изображений до 5 тысяч посещений в месяц. Все это доставляется из более чем 200 мест по всему миру.
Еще лучше. Бесплатная версия полностью функциональна и включает в себя все следующие замечательные функции:

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

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

Exact Used Size
Optimole будет использовать только одно изображение и изменять его размер, обеспечивая адаптивное изображение, чтобы оно идеально подходило для устройств ваших посетителей. Больше никаких неудобных догадок о возможной ширине экрана.Мгновенно подавать масштабированные изображения.

Поддержка Retina
Optimole может обнаруживать экраны Retina и передавать изображение с идеальным цифровым соотношением пикселей (DPR).

Smart Cropping
Если вы хотите сохранить самую интересную часть изображения; затем вы можете включить интеллектуальную обрезку, чтобы сохранить размер изображения без потери фокуса.

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

Водяные знаки
У кого есть время для добавления водяных знаков? Optimole сделает за вас тяжелую работу. Просто установите его и выберите желаемое место, и Optimole добавит водяной знак ко всем вашим будущим изображениям.

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

Совместимость
Optimole любит компоновщики страниц и предлагает уникальные настройки для решения проблемы замены изображений. Он также полностью совместим с новым редактором блоков в WordPress 5.0

.

CDN
Optimole предоставляет бесплатный доступ к CDN AWS ​​CloudFront с периферийными местоположениями в более чем 200 городах по всему миру.

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

Smooth And Clean
Optimole можно установить за несколько щелчков мышью, а затем оставить в серверной части для выполнения своей работы. Не доволен этим? У Optimole есть чистая деинсталляция, и ваш сайт будет таким же, как до установки Optimole.

Go Pro
Пользователи Premium смогут оптимизировать изображения для более чем 25 000 активных пользователей в месяц. Образы в плане Premium обслуживаются AWS Cloudfront в более чем 200 точках по всему миру.

Версия 2.5.7 (17.12.2020)

Исправления
  • Добавляет стиль iframe для отложенной загрузки, только если iframe используется на текущей странице
  • Улучшение отложенной загрузки CLS web vital
  • Добавлена ​​совместимость с интеллектуальным поиском для Woocommerce
Характеристики
  • Добавляет возможность установить настройки плагина через wp-configconstants
  • Добавляет дополнительные возможности для установки настроек плагина через wp cli

Версия 2.5.6 (2020-10-19)

  • Исправлена ​​регрессия при отложенной загрузке изображения после версии v2.5,5

Версия 2.5.5 (2020-10-19)

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

Версия 2.5.4 (21.09.2020)

  • Исправить совместимость с GiveWP
  • Исправить совместимость с браузером IE

Версия 2.5.3 (07.09.2020)

  • Улучшение совместимости с нативной ленивой загрузкой из WP 5.5

Версия 2.5.2 (2020-09-02)

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

Версия 2.5.1 (2020-08-26)

  • Исправить небольшую ошибку между встроенной совместимостью с отложенной загрузкой и плагинами кеширования
Версия 2.5.0 (25.08.2020)
Характеристики
  • Добавляет возможность отложенной загрузки видео и фреймов
  • Добавляет поддержку встроенной в браузер lazyload
  • Добавляет поддержку классов CSS в фильтры исключения оптимизации.
  • Разрешить локальное обслуживание JS для библиотеки lazyload с помощью настраиваемой константы
Исправления
  • улучшить текст описания настроек
  • улучшить тексты для всплывающего отчета диагностики
  • добавляет совместимость с WordPress 5.5

Версия 2.4.2 (2020-07-20)

  • Характеристики

    • добавляет механизм отладчика для устранения различных проблем с интеграцией плагинов
  • Исправления ошибок

    • Улучшение совместимости с SiteGround Optimizer
    • Улучшение совместимости с Swift Performance
    • Улучшение совместимости с TranslatePress
    • Улучшение совместимости с W3 Total Cache
    • Улучшение совместимости с WP Fastest Cache

Версия 2.4.1 (2020-06-09)

  • Улучшает пользовательский интерфейс настроек для переключателя CSS / JS
  • Улучшено описание настроек для переключателя автомасштабирования.
Версия 2.4.0 (2020-06-08)
Характеристики:
  • Добавляет возможность обслуживания CSS / JS через Optimole.
  • Добавляет возможность обслуживания уменьшенных файлов CSS / JS.
  • Добавляет параметр отключения масштабирования, но сохраняет ленивую загрузку.
Исправления:
  • Оптимизируйте изображения, жестко закодированные в файлах CSS / JS.
  • Улучшить обратную связь с уведомлениями при превышении квоты.

Версия 2.3.1 (2020-04-21)

Исправления ошибок
  • улучшить совместимость AMP, решить проблему, когда мы загружали не-AMP ресурсы в контексте AMP, реквизит @westonruter
  • улучшают отложенную загрузку файлов изображений, отличных от латинского.
Версия 2.3.0 (06.04.2020)
Характеристики
  • Добавляет функцию очистки кэша изображений
Исправления
  • Улучшение совместимости с плагинами для совместного использования Pinterest
  • Улучшена совместимость с именами изображений Unicode.
Версия 2.2.9 (25.02.2020)
  • Исправления ошибок
    • Совместимость с Fusion Builder, удалить замену в режиме редактирования (b16683b)
    • улучшена совместимость с Divi Builder (efdabfe)
Версия 2.2.8 (14.01.2020)
  • Исправления ошибок

    • перехватить URL-адреса изображений, содержащих некоторые символы (ce1c162)
    • совместимость с плагином Sassy Social share (d4224cb)
    • рассматривать URL-адреса изображений, содержащие символы типа ~ (670597e)
    • улучшен эффект перехода LQIP, исправление # 212 (946e16c)
    • предотвратить потерю настроек фильтров после отключения ключа API, исправление # 210 (db431b9)
    • удаляет предварительную загрузку пользовательского логотипа, вызывающую проблемы с дублированием контента (04cad07)
    • тег скрипта полосы в исправлении режимов усилителя # 203 (35f59f3)
  • Характеристики

    • добавляет атрибут data-skip-lazy для пропуска lazyload (8726127)
    • добавляет команды wp-cli для наиболее распространенных операций (577406b)
Версия 2.2.7 (2019-12-17)
  • Исправления ошибок

    • lazyload замена краевого корпуса при наличии изображений noscript (c788c3f)
    • улучшена совместимость с Divi Builder (7d1c469)
    • улучшена совместимость с системой минификации W3TC (bf9f058)
    • улучшена совместимость с WP Migrate DB (02df077)
    • улучшают ленивую загрузку и замену в строках json (b7f67fd)
    • удалено размытие из ленивых заполнителей (2c7d66d)
  • Характеристики

    • добавляет совместимость для бессхемных и относительных URL-адресов изображений (e3886eb)
    • скрыть меню Optimole через константу # 196 (e0268fa)
    • пропустить ленивую загрузку изображений с флагом пропуска-ленивости (4d9219f)
Версия 2.2.6 (2019-12-02)
  • Исправления ошибок

    • совместимость с Edge 15 библиотеки js, исправление # 187 (8e73668)
    • совместимость с Slider Revolution (05c21ce)
    • edge case для optimole не удалось отложить загрузку определенных изображений (0f8de69)
    • поведение обрезки крайних случаев, когда два размера изображения используют разную обрезку (beb8c27)
    • улучшена совместимость с мастер-слайдером (cf57717)
    • правильный поиск в нескольких классах, добавлены тесты (4751edb)
  • Характеристики

    • добавляет фильтр исключения по классам для механизма отложенной загрузки (3ce87e2)
Версия 2.2,5 (2019-11-18)
  • Исправления ошибок

    • наследует нестандартные размеры желаемого кадрирования, добавляет совместимость увеличения (84f7056)
  • Характеристики

    • добавляет совместимость с несколькими плагинами слайдера (d78fd1b)
    • улучшает совместимость с различными конструкторами страниц: Divi, Thrive, Elementor, Beaver (a4391b4)
Версия 2.2.4 (2019-11-05)
  • Исправления ошибок
    • условия уведомления о приближении к пределу (e3530b8)
Версия 2.2.3 (2019-11-05)
  • Исправления ошибок
    • изменить минимальный диапазон ползунка для сжатия на 50 вместо 0 (592c3e2)
    • Описание настройки качества изображения
    • , исправление # 162 (60cbe5e)
    • улучшение описания фонового изображения lazyload fix # 163 (f0f190b)
    • Уведомление об обновлении
    • , когда пользователь приближается к пределу посещений (ff716f7)
Версия 2.2.2 (04.11.2019)
  • Исправления ошибок
    • игнорировать изменение масштаба в GIF и SVG, когда активна отложенная загрузка (d4e63b6)
    • улучшена совместимость с Thrive Architect (55a5952)
    • улучшает вычисляемую ширину / высоту универсального заполнителя, когда размер источника неизвестен (0c3cc3f)
    • подписывают только те URL, для которых не используется домен из белого списка.(7813bf9)
    • префикс на основе сетчатки для использования исходного URL (948c667)
Версия 2.2.1 (21.10.2019)
  • Исправления ошибок
    • gif к описанию настроек видео (063d37b)

Версия 2.2.0 (21.10.2019)

  • Исправления ошибок
    • модифицированные тесты, проверяющие, содержит ли URL-адрес изображение в формате gif (f76f2c9)
    • небольшая опечатка в описании настроек максимальных размеров (4d83dbf)
  • Характеристики
    • добавляет сжатие и преобразование GIF в видеофайлы (mp4 и WebM) (04d9f7d)
    • добавляет gif в список исключений (914cd11)
    • добавляет возможность отложенной загрузки изображений, используемых в качестве фона (c346244)
    • добавляет переключатель для отключения замены изображения bg (3c3997a)

Оптимизация SEO - научитесь оптимизировать для SEO

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

В этом руководстве вы узнаете:

  1. Что такое SEO и почему это важно?
  2. Оптимальные методы исследования ключевых слов для SEO и таргетинга на ключевые слова
  3. Рекомендации по оптимизации на странице

Приступим!

1. Что такое SEO и почему это важно?

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

Хотя концепция SEO относительно проста, у многих новичков в SEO все еще есть вопросы о специфике, например:

  • Как вы «оптимизируете» свой сайт или сайт своей компании для поисковых систем?
  • Как узнать, сколько времени потратить на SEO?
  • Как отличить «хороший» совет по SEO от «плохого» или вредного?

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

Почему вы должны заботиться о SEO?

Ежедневно в Интернете выполняются миллиарды поисковых запросов. Это означает огромное количество конкретного трафика с высокими намерениями.

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

Поисковый запрос типа «Я хочу купить машину» ясно показывает коммерческое намерение.

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

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

Что на самом деле работает для привлечения SEO-трафика из поисковых систем?

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

Google доминирует среди поисковых систем, но не спите на таких сайтах, как Yahoo и Bing

Так как же Google определяет, какие страницы возвращать в ответ на то, что люди ищут? Как получить весь этот ценный трафик на свой сайт?

Алгоритм Google чрезвычайно сложен, но находится на высоком уровне:

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

Алгоритм Google все чаще оценивает дополнительные сигналы ранжирования, чтобы определить, где сайт будет ранжироваться, например:

  • Как люди взаимодействуют с сайтом (находят ли они нужную информацию и остаются на сайте, или они «возвращаются» обратно на страницу поиска и нажимают на другую ссылку? Или они просто игнорируют ваше объявление в результатах поиска и никогда не переходят?)
  • Скорость загрузки сайта и удобство для мобильных устройств
  • Сколько уникального контента на сайте (по сравнению с «тонким» или дублированным, малоценным контентом)

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

2. Оптимальные методы исследования ключевых слов и таргетинга на ключевые слова

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

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

Отслеживание ключевых слов SEO в разные периоды времени

Есть несколько ключевых факторов, которые следует учитывать при определении ключевых слов, на которые вы хотите настроить таргетинг на своем сайте:

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

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

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

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

Возьмите список основных способов, которыми ваши потенциальные клиенты и клиенты описывают то, что вы делаете, и начните вводить их в инструменты подсказки ключевых слов, такие как собственный инструмент подсказки ключевых слов Google или такие инструменты, как инструмент подсказки ключевых слов WordStream:

Бесплатный инструмент подсказки ключевых слов WordStream для SEO

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

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

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

Определение относительной конкуренции ключевого слова может быть довольно сложной задачей. На очень высоком уровне нужно понимать:

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

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

3. Оптимизация страницы для SEO

Когда у вас есть список ключевых слов, следующим шагом будет внедрение целевых ключевых слов в содержание вашего сайта. Каждая страница вашего сайта должна быть ориентирована на основной термин, а также на «корзину» связанных терминов. В своем обзоре идеально оптимизированной страницы Рэнд Фишкин предлагает красивую визуализацию того, как выглядит хорошо (или идеально) оптимизированная страница:

«Идеально оптимизированная страница» (через Moz)

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

Теги заголовка

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

Тег заголовка - это , а не для основного заголовка вашей страницы. Заголовок, который вы видите на странице, обычно представляет собой HTML-элемент h2 (или, возможно, h3). Тег заголовка - это то, что вы можете видеть в самом верху окна браузера, и заполняется исходным кодом вашей страницы в метатеге:

.

Тег заголовка соответствует заголовку обычного результата: Сделайте его интерактивным

Длина тега заголовка, который будет показывать Google, может быть разной (она зависит от пикселей, а не от количества символов), но в целом 55–60 символов - хорошее практическое правило.Если возможно, вы хотите работать со своим основным ключевым словом, и если вы можете сделать это естественным и убедительным образом, добавьте также несколько связанных модификаторов вокруг этого термина. Однако имейте в виду: тег заголовка часто будет тем, что искатель видит в результатах поиска для вашей страницы. Это «заголовок» в обычных результатах поиска, поэтому вы также должны учитывать, насколько кликабельным будет ваш тег заголовка.

Метаописания

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

Вот пример реального метаописания, отображаемого в результатах поиска:

Метаописание = SEO "рекламная копия"

Содержание тела

Само фактическое содержание вашей страницы, конечно, очень важно.Разные типы страниц будут иметь разные «задания» - ваш краеугольный ресурс контента, на который вы хотите, чтобы многие люди ссылались, должен сильно отличаться от вашего контента поддержки, который вы хотите, чтобы ваши пользователи быстро нашли и получили ответ. Тем не менее, Google все больше отдает предпочтение определенным типам контента, и, когда вы создаете любую из страниц своего сайта, следует помнить о нескольких вещах:

  • Толстый и уникальный контент - Магического числа с точки зрения количества слов не существует, и если у вас есть несколько страниц контента на вашем сайте с горсткой или парой сотен слов, вы не потерпите неудачу благодать, но в целом недавние обновления Panda в особенности отдают предпочтение более длинному и уникальному контенту.Если у вас большое количество (представьте тысячи) очень коротких (50–200 слов содержания) страниц или много дублированного контента, где ничего не меняется, кроме тега заголовка страницы и произнесения строки текста, это может вызвать у вас проблемы. Посмотрите на свой сайт в целом: большой процент ваших страниц является тонким, дублированным и малоценным? Если да, попробуйте найти способ «сгладить» эти страницы или проверьте свою аналитику, чтобы увидеть, сколько трафика они получают, и просто исключите их (с помощью метатега noindex) из результатов поиска, чтобы они не отображались Google, что вы пытаетесь завалить их индекс множеством малоценных страниц в попытке повысить их рейтинг.
  • Вовлеченность - Google уделяет все больше внимания показателям взаимодействия и пользовательского опыта. Вы можете повлиять на это, убедившись, что ваш контент отвечает на вопросы, которые задают поисковики, чтобы они могли оставаться на вашей странице и взаимодействовать с вашим контентом. Убедитесь, что ваши страницы загружаются быстро и на них нет элементов дизайна (таких как чрезмерно агрессивная реклама над содержанием), которые могли бы отпугнуть пользователей и отослать их.
  • «Возможность совместного использования» - Не каждый отдельный контент на вашем сайте будет содержать ссылки и делиться им сотни раз.Но точно так же, как вы хотите быть осторожными, чтобы не развертывать большое количество страниц с тонким контентом, вы хотите подумать, кто, вероятно, будет делиться и ссылаться на новые страницы, которые вы создаете на своем сайте , прежде чем вы их откроете. из . Наличие большого количества страниц, на которые вряд ли будут делиться или на которые будут ссылаться, не позиционирует эти страницы для хорошего ранжирования в результатах поиска и не помогает создать хорошее представление о вашем сайте в целом для поисковых систем. .

Альтернативные атрибуты

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

Вы не хотите «набивать ключевые слова» и втискивать основное ключевое слово и все его возможные варианты в свой атрибут alt.На самом деле, если оно не укладывается в описание, не указывайте здесь целевое ключевое слово. Только не пропустите атрибут alt и постарайтесь дать полное и точное описание изображения (представьте, что вы описываете его кому-то, кто его не видит - вот для чего оно!).

Естественно описывая свою тему, вы избегаете фильтров «чрезмерной оптимизации» (другими словами: это не создает впечатление, будто вы пытаетесь обмануть Google, чтобы он ранжировал вашу страницу по целевому ключевому слову), и вы даете у вас будет больше шансов попасть в рейтинг по ценным модифицированным «длинным хвостам» вашей основной темы.

Структура URL

Структура URL-адресов вашего сайта может быть важна как с точки зрения отслеживания (вы можете более легко сегментировать данные в отчетах с помощью сегментированной логической структуры URL-адресов), так и с точки зрения возможности совместного использования (более короткие описательные URL-адреса легче копировать и вставлять и, как правило, по ошибке срезали реже). Еще раз: не старайтесь втиснуть как можно больше ключевых слов; создайте короткий описательный URL.

Более того: если вам не нужно, не меняйте свои URL.Даже если ваши URL-адреса «некрасивые», если вы не чувствуете, что они негативно влияют на пользователей и ваш бизнес в целом, не меняйте их так, чтобы они были больше ориентированы на ключевые слова для «лучшего SEO». Если вам все же нужно изменить структуру URL-адресов, убедитесь, что вы используете правильный (301 постоянный) тип перенаправления. Это распространенная ошибка, которую совершают компании при редизайне своих сайтов.

Схема и разметка

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

Разметка схемы не делает вашу страницу выше в результатах поиска (в настоящее время это не фактор ранжирования). Это действительно дает вашему объявлению некоторую дополнительную «недвижимость» в результатах поиска, как это делают расширения для объявлений AdWords.

В некоторых результатах поиска, если никто другой не использует схему, вы можете получить хорошее преимущество в рейтинге кликов в силу того факта, что ваш сайт показывает такие вещи, как рейтинги, а другие - нет. В других результатах поиска, где все используют схему, отзывы могут быть «ставкой на стол», и вы можете снизить свой CTR, пропустив их:

Сделайте свои обычные результаты более привлекательными, добавив разметку и схему

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

Вы можете узнать больше о схеме и разметке в руководстве WordStream по схеме для SEO.

Дополнительная литература и ресурсы по SEO

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *