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

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

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

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

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

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

Медленный веб-сайт — это проблема, потому что он может оттолкнуть пользователей. На самом деле, страницы, загрузка которых занимает пять секунд или более, в среднем на 90% увеличивают вероятность отказа пользователя (ухода после просмотра только одной страницы).

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

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

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

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

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

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

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

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

Форматы файлов изображений

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

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

Когда использовать JPEG

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

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

Когда использовать PNG

Файлы PNG также полезны для веб-контента, как и файлы JPEG, но по-другому. Например, поскольку PNG могут иметь прозрачный фон, они более универсальны и удобны для разработки веб-графики.

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

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

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

Многие сайты пытаются предоставить большие немасштабированные изображения и полагаются на браузер, чтобы изменить их размер, что приводит к использованию дополнительных ресурсов и снижению скорости сайта. Если естественный размер изображения 820×820 пикселей, а браузер отображает его как 400×400 пикселей… это 32 400 ненужных пикселей!

Четкость и скорость загрузки страницы во многом зависят от устройства, на котором отображается изображение (мобильное, настольное и т. д.). Например, изображение в формате 4k может хорошо смотреться на вашем 27-дюймовом мониторе.

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

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

• Сохраняйте файлы изображений размером менее пары сотен килобайт, сохраняя их как «оптимизированные для Интернета» файлы JPEG или PNG.
• Веб-стандарт для изображений составляет 72 точки на дюйм (dpi), что может быть достигнуто путем сохранения изображений в указанном выше формате.

Вы можете использовать Photoshop, Lightroom или аналогичный редактор, чтобы уменьшить размер изображения примерно до 1500 пикселей или меньше по ширине. В Photoshop просто выберите «Изображение» > «Размер изображения» , чтобы вручную настроить размеры и разрешение изображения. Вы также можете выбрать «Файл» > «Экспорт» > «Сохранить для Интернета» , чтобы оптимизировать изображения для загрузки в Интернет:

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

Если вы работаете с Lightroom, выберите «Файл» > «Экспорт» , чтобы вручную настроить размер изображения при его экспорте:

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

Сжатие изображения

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

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

Сжатие с потерями и без потерь

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

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

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

Плагины сжатия изображений

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

Smush Сжатие и оптимизация изображений

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

Оптимизатор изображений ShortPixel

Плагин ShortPixel Image Optimizer сжимает все прошлые и будущие изображения и PDF-файлы, загруженные в вашу медиатеку. Плагин обеспечивает сжатие как с потерями, так и без потерь для большинства типов файлов. Если вы фотограф, вы можете выбрать глянцевое сжатие JPEG, в котором используется высококачественный алгоритм оптимизации с потерями.

Сжатие изображений JPEG и PNG

Хотите просто оптимизировать JPEG и PNG? Этот плагин использует сервисы сжатия изображений TinyJPG и TinyPNG, чтобы помочь вам в сжатии изображений. В среднем изображения JPEG сжимаются на 40–60 процентов, а изображения PNG — на 50–80 процентов без видимой потери качества.

EWWW Оптимизатор изображений

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

Оптимизатор изображений Kraken.io

И последнее, но не менее важное: Kraken.io Image Optimizer также удобен для оптимизации как новых, так и существующих медиафайлов. Он поддерживает сжатие без потерь и «интеллектуальное» сжатие с потерями, что упрощает получение высококачественных изображений с файлами меньшего размера.

Популярное изображение

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

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

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

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

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

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

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

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

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

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

Самый простой способ добавить ленивую загрузку на ваш сайт — использовать плагин, такой как Lazy Load.

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

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

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

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

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

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

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

Избегайте перенаправления URL-адреса изображения

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

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

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

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

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

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

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

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

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

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

Кроме того, вы также можете добавить замещающий текст к изображению, посетив «Мультимедиа» > «Библиотека» и выбрав нужное изображение. Затем просто добавьте замещающий текст в поле «Альтернативный текст» для этого изображения.

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

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

Создание файлов Sitemap для изображений в формате XML

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

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

В WordPress следующие плагины могут помочь вам создать карту сайта:

• XML-карты сайта Google
• Йост SEO
• SEO-пакет «все в одном»
• Udinra Карта сайта для всех изображений

Для веб-сайтов, отличных от WordPress, также есть инструменты, которые могут помочь в создании карты сайта, включая Screaming Frog, Dynomapper и другие. Создав карту сайта, вы захотите отправить ее через инструменты Google для веб-мастеров.

Размещение изображений и подписи

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

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

Оптимизируйте свой сайт WordPress с помощью WP Engine

Оптимизация изображений охватывает многое, когда речь идет об улучшении вашего сайта. Оптимизация может помочь улучшить взаимодействие с пользователем и удержать время загрузки ниже этой пятисекундной отметки. Здесь, в WP Engine, мы понимаем ценность, которую оптимизация изображений приносит вашему сайту. Вот почему мы предлагаем специализированные управляемые среды хостинга WordPress. Это означает, что у вас всегда под рукой будет экспертная поддержка, комплексные инструменты и ресурсы для оптимизации!