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

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


На самом деле существует 20 различных способов оптимизации изображений (если вы включите как SEO, так и оптимизацию скорости). Это даст вам лучшие результаты в GTmetrix / Pingdom, потенциально повысит ваш рейтинг в поиске и сделает загрузку вашего контента намного быстрее. Мне удалось получить 100% -й отчет GTmetrix с загрузкой .5s… оптимизация моих изображений в WordPress была большой частью этого.

Оптимизируйте изображения ДО загрузки – использование такой программы, как Photoshop, для оптимизации изображений перед их загрузкой может сэкономить массу работы. Вы можете изменять размер, сжимать, вырезать данные EXIF, сохранять в правильном формате (например, PNG / JPEG) и писать описательное имя файла (которое будет автоматически использоваться в качестве альтернативного текста при использовании Автоматический плагин Alt Attributes для изображения). Это 6 оптимизаций!

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

Основные инструменты, которые я использую – Я использую GIMP изменить размер / сжать изображения (мой графический редактор по выбору), WP Rocket для моего плагина кеша, Imagify для дальнейшего сжатия без потерь + удаление данных EXIF, оба Cloudflare а также StackPath CDN, Плагин автоматического изображения ALT-атрибутов автоматически использовать имя файла изображения в качестве альтернативного текста, и Оптимальный кеш Gravatar кешировать Gravatars в комментариях. я использую WP Review Pro как мой плагин, Лучший поиск заменить для массового обновления изображений (очень удобно), и GTmetrix как мой инструмент тестирования скорости. Смотрите полный список инструментов.

Contents

1. Найти неоптимизированные изображения

Запустите свой сайт через GTmetrix и вы увидите эти элементы на вкладках Page Speed ​​/ YSlow. Первые пять обычно зависят от страницы, это означает, что GTmetrix будет показывать неоптимизированные изображения только для одной тестируемой страницы. Последние 3 обычно происходят на вашем сайте. Конечно, это всего лишь 7 способов оптимизации изображений, но некоторые из самых важных, поэтому мы будем делать это в первую очередь.

  • Служить масштабированным изображениям: изменить размеры больших изображений до правильных размеров (шаг 2)
  • Укажите размеры изображения: укажите ширину / высоту в HTML или CSS изображения (шаг 3)
  • Оптимизировать изображения – без потерь сжать изображения (шаг 4)
  • Расчесывание изображений с использованием CSS-спрайтов – объединить несколько изображений в 1 изображение (шаг 5)
  • Избегайте перенаправлений URL – не показывать изображения с неправильной версии www или http (s) (шаг 6)
  • Используйте сеть доставки контента – обслуживать изображения / файлы из CDN (шаг 7)
  • Используйте кеширование в браузере – кэшируйте изображения / файлы с помощью вашего плагина кеша (шаг 8)
  • Сделать favicon маленьким и кэшируемым – использовать значок 16x16px и кэшировать его (шаг 9)

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

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

2. Служите масштабированных изображений

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

Подавать-масштабны изображения

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

Изменение размера больших изображений

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

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

Пример:

  • Слайдер изображения: 1900 (ш) х 400 (ч)
  • Карусель изображений: 115 (ч)
  • Виджет изображений: 414 (ш)
  • Изображения в блоге полной ширины: 680 (ш)
  • Рекомендуемые изображения: 250 (ш) х 250 (ч)
  • Yoast Facebook OG изображение: 1200 (ш) х 628 (ч) – шаг 11
  • Yoast Twitter OG изображение 1024 (ш) х 512 (ч) – шаг 11

Прямоугольник шириной 680 пикселей

3. Укажите размеры изображения

Это означает добавление ширины / высоты к HTML или CSS изображения. Визуальный редактор делает это за вас (но виджеты, некоторые конструкторы страниц и пользовательский HTML не делайте). Протестируйте несколько страниц в GTmetrix.

GTmetrix сообщает вам размеры изображения …

Speciy Размеры изображения GTmetrix

Добавьте ширину / высоту в HTML-код изображения …

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

4. Сжатие изображений без потерь

Это элементы «оптимизации изображений» в GTmetrix. Многие программы (например, Photoshop и Gimp) имеют возможность сжатия при экспорте. Хотя это хорошее начало, плагины сжатия изображений обычно получают еще лучшие результаты. я предпочитаю Imagify, Kraken, ShortPixel, или Smush. Известно, что другие плагины визуально снижают качество изображения и могут вызвать ошибки в ваших изображениях..

Сжатие изображений с Imagify

  1. Подписаться на Imagify
  2. Установите Плагин Imagify
  3. Вам будет предложено с инструкциями ниже:
  4. Введите ключ API из своего аккаунта Imagify
  5. Установите уровень сжатия (нормальный, агрессивный, ультра)
  6. Imagif’em all (фото ниже) с помощью большого количества оптимизирует все изображения на вашем сайте
  7. Когда вы достигнете своего лимита, заплатите $ 4.99 или подождите в следующем месяце, чтобы сбросить лимит.

imagify

Проверьте, как изображения выглядят с различными уровнями сжатия …

Представьте себе сравнение компрессии

После регистрации массово оптимизируйте все изображения на вашем сайте …

imagify-WordPress-изображений Оптимизация

Установите параметр для оптимизации изображений при загрузке…

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

5. Объедините изображения в CSS-спрайты

На моей домашней странице вы можете подумать, что видите 21 иконку, но на самом деле это одно изображение. Это CSS спрайт, где вы объединяете несколько изображений в одно изображение. Это уменьшает количество изображений (и запросов), поэтому на моей домашней странице всего 10 запросов. Вместо загрузки 21 изображения, он загружает 1. Для этого вам понадобятся знания CSS, или используйте Генератор спрайтов CSS.

CSS-спрайты

GTmetrix CSS Sprites

Используйте только спрайты CSS для декоративных изображений – вы теряете много тегов alt изображений, когда объединяете 21 изображение в 1. НЕ объединяйте важные изображения в спрайты CSS, если они описывают ваш контент. Что касается меня, скорость моей домашней страницы важнее, чем ее SEO… Я использую отчет GTmetrix моей домашней страницы во многих местах (поэтому я должен держать его в чистоте), и моя домашняя страница, хотите верьте, хотите нет, не нацелена на ключевое слово. Его цель – набросать мои уроки … и быстро загрузить.

6. Избегайте перенаправления URL изображения

Если вы переключились на HTTPS, версии www или начали обслуживать образы из CDN, вы должны массово обновить все ваши изображения (и ссылки), используя Лучший поиск заменить поэтому они подают правильную версию. В противном случае вы можете увидеть свести к минимуму перенаправления или использовать домены без файлов cookie ошибки.

Свернуть перенаправления

Cookie Домены

Используйте плагин Better Search Replace для массового обновления URL-адресов изображений …

Лучший поиск заменить WWW версии

Лучший поиск заменить HTTP против HTTPS

7. Служите изображения с CDN

Это требует изменения URL-адресов изображений, чтобы включить ваши CDN URL

  • URL старого изображения (без CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • URL нового изображения (с CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare против StackPath – Я использую оба Cloudflare а также StackPath так как больше центров обработки данных = более быстрая доставка контента. Cloudflare имеет 200+ дата-центров, StackPath имеет 34+ дата-центров которые в большой степени расположены в Соединенных Штатах (откуда большинство моих посетителей). Cloudflare не назначает вам URL CDN поэтому мы будем использовать CDN StackPath для обслуживания изображений.

StackPath-Data-центры

Шаг 1: Выберите CDN. я использую StackPath (у них есть 30-дневная пробная версия).

Шаг 2: На панели инструментов, нажмите вкладку CDN, затем создать сайт CDN StackPath

StackPath-CDN-Tab

StackPath-CDN-домен

CDN-URL-StackPath

Шаг 3: Скопируйте ваш CDN URL и вставьте его в свой плагин кеша (ниже для WP Rocket)…

WP-Ракетно-CDN

Шаг 4: Замените URL-адреса изображений, чтобы включить ваш CDN-URL (используя Лучший поиск заменить).

Лучший поиск заменить CDN URL

Шаг 5: Проверьте старые URL-адреса изображений, используя Chrome DevTools. Иногда ваш кеш плагин или CDN Enabler заботится об этом, за исключением ссылок в CSS и JavaScript, которые жестко закодированы. Для оставленных ссылок они обычно находятся в файлы (например, CSS или Javascript), которые требуют ручной проверки и замены. Chrome DevTools показывает все домены, которые используются в настоящее время.

Шаг 6: Запустите свой сайт в GTmetrix и «сеть доставки контента» должна быть зеленой в YSlow. У вас не должно быть ошибок в «минимизации перенаправлений» или «использовать домены без файлов cookie»..

CDN GTmetrix YSlow

8. Кэширование изображений

Большинство плагинов кеша имеют опцию для кеширование в браузере, который кэширует изображения. Я использую WP Rocket, который был оценен как плагин кэша # 1 в нескольких опросах Facebook, и у меня есть учебник для этого. Swift Performance как правило, оценивается # 1 бесплатный плагин кэша (у меня тоже есть учебник для этого).

Кэширование браузера

9. Сделайте Favicon маленьким и кэшируемым

Убедитесь, что ваш favicon имеет размер 16x16px, формат favicon.ico и кэшируется с помощью плагина кеша..

10. Удалить данные EXIF

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

Большинство плагинов для оптимизации изображений (включая Imagify, ShortPixel, Kraken, EWWW и Smush) имеют возможность автоматического удаления данных EXIF. Вот настройки для Imagify…

Imagify Удалить данные EXIF

11. Cloudflare Оптимизация изображения

Cloudflare также имеет несколько способов оптимизации изображений. Мираж и польский найдены в вашем Настройки скорости Cloudflare в то время как защита Hotlink находится в вашем Настройки Scrape Shield.

Облачный огонь Мираж (Pro Feature) – уменьшает количество запросов на изображения, загружает изображения с отложенным доступом и улучшает время загрузки изображений на мобильных устройствах с медленными сетевыми подключениями. Вот больше деталей …

  • Изменяет размеры изображений в зависимости от устройства / подключения посетителя. Посетитель с плохим соединением получит уменьшенную версию (более низкое разрешение), пока не вернется к более высокой пропускной способности.
  • Уменьшает количество запросов – вместо того, чтобы отправлять несколько запросов на все изображения на веб-сайте, Mirage объединяет их в один запрос, чтобы посетители могли сразу увидеть изображения.
  • Ленивый загружает изображения (загружает их только после того, как пользователи прокрутят вниз и увидят изображение).

Cloudflare Image Mirage

Cloudflare Польский (Pro Feature) – снимает данные EXIF ​​и сжимает изображения.

Cloudflare Image Польский

Cloudflare Hotlink Protection – запрещает людям копировать ваши изображения и вставлять их на свой веб-сайт, что (так как вы по-прежнему размещаете это изображение) высосет вашу пропускную способность.

Cloudflare Hotlink Protection

12. Ленивая загрузка изображений

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

Вы можете использовать Плагин Lazy Load, Плагин Lazy Load For Videos, или используйте WP Rocket …

WP-Ракетно-Ленивый-Load

13. Сохранить как правильный формат

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

jpg_vs_png

Иллюстрация от Labnol

14. Имена файлов изображений

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

Имена файлов изображений меток

15. Альтернативный текст

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

Добавить Alt Text к изображениям автоматически – использовать Автоматический плагин Alt Attributes для изображения. Теперь, когда вы добавляете изображение, плагин будет добавлять альтернативный текст, который совпадает с именем файла …

альт ="WP-Fastest-Cache-Plugin" ширина ="577" высота ="247" />

Найти пропущенный альтернативный текст – Screaming Frog – это бесплатный инструмент, который показывает вам все изображения, пропущенные альтернативным текстом.

Изображение отсутствует Alt Text - Кричащая лягушка

16. Открыть график (Facebook + Twitter)

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

Поделиться в Фейсбуке

Если вы используете Yoast, перейдите в настройки «Social» и включите Open Graph для Facebook / Twitter…

Yoast социал-Meta-Data

Теперь отредактируйте страницу / сообщение, затем нажмите ссылку «Поделиться» в Yoast, и вы увидите варианты загрузки пользовательских изображений для Facebook (1200 x 628 высот) и Twitter (1024 x 512 высот).

Yoast-социальные медиа-оптимизация

17. Изображения в избранных отрывках

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

3 типа рекомендуемых фрагментов

  • ответы
  • таблицы
  • Списки

Рекомендуемые-Image-Snippets

Как получить избранные фрагменты в Google

  • Таргетинг на ключевое слово, где люди хотят краткий ответ
  • использование Moz Keyword Explorer определить ключевые слова вопроса
  • Используйте функцию «Ответить на публикацию», чтобы найти еще больше ключевых слов.
  • Выберите, должен ли ответ быть абзацем, списком или таблицей
  • Создайте красивую графику (или сделайте фотографию), описывающую ключевое слово
  • Используйте оптимальную длину символа (см. Фото ниже, взятое из Мос)
  • Создавайте основанный на фактах контент с качественными ссылками (ссылки, графика и т. Д.)
  • Целевые ключевые слова, которые уже имеют отобранный фрагмент, но плохо работают
  • Если вы стремитесь к ответу, наведите ключевое слово на точное соответствие
  • Убедитесь, что вы находитесь на 1-й странице для ключевого слова, если нет, улучшите содержание

Оптимальная рекомендуемая длина фрагментов

18. Структурированные данные

Изображения могут быть использованы в структурированные данные (а также бейджи) для следующих типов контента:

Видео Rich Snippet

Рецепт-Rich-Snippets

Продукт Rich Snippet

Какой плагин Rich Snippets я должен использовать?
я использую MyThemeShop’s WP Review Pro (вот страница, на которой я ее использую), которая поддерживает 14 типов данных, включая рецепты и обзоры продуктов. Я использовал WP Rich Snippets, но разработчик отказался от плагина, и он не обновлялся более 2 лет, и Все в одной схеме плагин это просто скучно (у него не хватает опций и стиля). WP Review Pro очень прост в использовании.

19. Стиль изображения

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

  • Заголовки изображений
  • Ссылки на изображения
  • Границы изображения
  • Подписи к изображениям

20. Изменить размер GIF

Так же, как вы изменяете размеры изображений до правильных размеров, размер GIF-файлов также должен быть изменен (используйте GIF GIF).

Изменить размер GIF …

Изменение размера GIF-файлов

Затем сожмите это …

Сжатие GIF

Результат :-)

Оптимизировать GIF для собак

21. Кэш Граватары

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

  • Cache Gravatars (оптимум, Гарри, или FV Gravatar Cache)
  • Отключить Gravatars полностью
  • Установите ваш Gravatar по умолчанию пустым
  • Удалить комментарии, которые не увеличивают ценность
  • Установите для вашего Gravatar по умолчанию пользовательское изображение на вашем сервере
  • Ограничьте изображения Gravatar меньшими размерами (например, 32 пикселя)
  • Paginate comments in WP Отключить показ только 20 комментариев одновременно
  • Если ничего из этого не работает, проверьте Учебник WP Rocket по кешированию Gravatars

Кэш-Gravatar-изображения

22. Избегайте встраивания изображений с внешних сайтов

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

23. Инструменты оптимизации изображения

Избегайте использования плагинов с дублирующими функциями – Imagify, ShortPixel, Kraken, EWWW и Smush в основном делают одно и то же (сжатие без потерь, удаление данных EXIF, изменение размера изображений). WP Rocket имеет опции для отложенной загрузки, кэширования и CDN (и очистки базы данных + локального размещения Google Analytics), чего нет у большинства плагинов кеша, что избавляет вас от использования дополнительных плагинов.

  • Потрясающий скриншот – расширение Chrome для снятия скриншотов.
  • Автоматические Альт Атрибуты Изображения – автоматически вставляет альтернативный текст, используя имя файла изображения.
  • Лучший поиск заменить – использовать его для массового обновления изображений.
  • Cloudflare – бесплатный CDN с 200+ датацентрами, защита от хотлинка, мираж, полировка.
  • Chrome DevTools – показывает используемые домены, если у вас есть ошибки перенаправления GTmetrix.
  • CSS Sprite Generator – бесплатный инструмент для объединения нескольких изображений в 1 CSS-спрайт.
  • EWWW Image Optimizer – сжатие без потерь, удаление EXIF, изменение размера.
  • GifGifs – изменяет размер GIF.
  • GIMP – бесплатное программное обеспечение для редактирования изображений, которое я использую.
  • GTmetrix – показывает, какие изображения необходимо оптимизировать.
  • Imagify – сжатие без потерь, удаление EXIF, изменение размера.
  • Imsanity – изменяет размеры большого изображения, чтобы исправить «показ масштабированных изображений» в GTmetrix.
  • Kraken – сжатие без потерь, удаление EXIF, изменение размера.
  • Ленивый груз – плагин, который задерживает загрузку изображений, пока они не станут видимыми.
  • Ленивая загрузка для видео – плагин, который задерживает загрузку видео, пока они не станут видимыми.
  • Оптимальный кеш Gravatar – кеши граватары (или попробуй Гарри Граватар Кэш).
  • Кричащая лягушка SEO Spider – найти пропущенный альтернативный текст, мета описания и т. Д..
  • ShortPixel – сжатие без потерь, удаление EXIF, изменение размера.
  • Smush – сжатие без потерь, удаление EXIF, изменение размера.
  • StackPath – CDN $ 10 / месяц с 31 дата-центром.
  • Swift Performance Lite – # 1 бесплатный плагин кеша в большинстве опросов Facebook.
  • WP Review – плагин rich snippets (помогает отображать изображения в результатах поиска).
  • WP Rocket – # 1 кеш плагин в большинстве опросов Facebook.
  • ВА Удаление Exif – удаляет ненужные данные из изображений.
  • Увеличить  -Расширение Chrome для получения идеального увеличения при съемке скриншотов.
  • Yoast – включает метаданные Facebook / Twitter, чтобы изображения правильно форматировались при публикации.

Часто задаваемые вопросы

&# X2705; Как исправить ошибки Optimize Image в GTmetrix??

Сжатие без потерь с помощью плагина, такого как ShortPixel, Imagify или Smush. Я использую ShortPixel, потому что он всегда исправляет эту ошибку в GTmetrix.

&# X2705; Как вы исправляете ошибки Serve Scaled Image в GTmetrix??

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

&# X2705; Как исправить ошибку «Указать ошибки в размерах изображения» в GTmetrix?

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

&# X2705; Любые другие способы ускорить загрузку изображений?

Удаление данных EXIF ​​и использование CDN для обслуживания ваших изображений будет иметь наибольшую разницу за пределами рекомендаций GTmetrix..

&# X2705; Какая оптимизация изображения лучше?

Я использую ShortPixel, потому что практически нет потерь в качестве, и это исправляет пункт «Оптимизировать изображения» в GTmetrix.

Что вы думаете?
Ваш отчет GTmetrix выглядит немного лучше? Дай мне знать в комментариях! А если вы хотите получить больше советов, которые помогут вам улучшить результаты / время загрузки, см. Мое полное руководство по скорости WordPress..

ура,
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map