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

Центр ресурсов
‹Вернуться в Центр ресурсов

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

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

В этой статье мы рассмотрим, почему большие изображения могут тянуть ваш сайт вниз. Затем мы рассмотрим, как эффективно сжать ваши медиафайлы, а также дадим несколько фундаментальных советов по оптимизации изображений, которые могут улучшить 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 Image Compression and Optimization

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

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

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

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

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

EWWW Image Optimizer

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

Kraken.io Image Optimizer

И последнее, но не менее важное: 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. Оптимизация изображений занимает очень мало времени и может существенно повлиять на посещаемость вашего сайта.

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

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

Альтернативный текст, иначе известный как ‘alt text ‘или’ alt tag ‘- это атрибут, добавляемый к изображению в HTML. Альтернативный текст помогает поисковым системам понять, о чем ваше изображение, описывая, что оно включает и каково его назначение.

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

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

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

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

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

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

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

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

  • Google XML Sitemaps
  • Yoast SEO
  • All-in-One SEO Pack
  • Карта сайта для всех изображений Udinra

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

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

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

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

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

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

Оцените статью
techsly.ru
Добавить комментарий