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

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

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

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

Читать : Полное SEO-руководство по WordPress

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

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

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

: Оптимальное соотношение цены и ресурсов

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

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

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

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

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

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

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

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

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

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

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

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

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

Чаще всего результаты не очень хорошие.

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

Adobe Photoshop — это стандартный редактор изображений, который используется для создания, проектирования и редактирования растровых изображений, а также для добавления эффектов, теней и текстур к существующим проектам.

Формат JPEG

JPEG — это растровый формат с потерями, который расшифровывается как Joint Photographic Experts Group, техническая группа, которая его разработала. 

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

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

Вы должны использовать JPEG, когда…

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

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

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

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

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

Пришло время сократить раздувание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Можете воспользоваться сервисом : https://www.iloveimg.com/ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть много способов добиться кэширования с помощью кодирования, плагинов и других инструментов .

Подробнее в статье : Кэширование wordpress 5 лучших плагинов .

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

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

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

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

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

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

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

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

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

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

Подробности в посте : Как добавить атрибуты alt и title в WordPress

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

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

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

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

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

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

Читать : Как правильно использовать теги заголовков в WordPress

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

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

Узнай подробнее : Как создать карту сайта в WordPress

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

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