Оптимизация изображений wordpress: Оптимизация изображений WordPress в 2 клика

Содержание:

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

Инструменты для оптимизации изображений

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

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

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

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

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

Перед публикацией картинки на сайте решите три вещи:

• Физический размер изображения (длина и ширина),
• Формат изображения (jpeg, png, webp или другие форматы),
• Размер изображения (в Килобайтах).

С хорошо подобранными параметрами вы можете уменьшить размер картинки в 5-10 раз по сравнению с первоначальным.

Оптимизируйте длину и ширину изображения

Если вам нужно поместить изображение, которое займет 1/3 экрана, используйте картинку нужного размера, например, 400х300 Пикс.

Не публикуйте картинки бóльшего размера, чем это требуется.

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

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

Выберите подходящий формат изображения

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

JPEG — формат, который использует сжатие с потерями (lossy) и не поддерживает прозрачность. В зависимости от степени сжатия, эти картинки можно оптимизировать без потери качества изображения.

PNG — сжатие без потерь (lossless) и поддерживает прозрачность.

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

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

Оптимизируйте размер изображения в Килобайтах

Чем меньше размер изображения в Килобайтах, тем ниже качество картинки.

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

Для картинки размером 400х300 пикселей современные требования Гугл и других сервисов что-то около 20-50 Килобайт.

Инструменты для оптимизации изображений

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

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

Многие онлайн сервисы оптимизации поддерживают массовую оптимизацию изображений. На бесплатных тарифах обычно существует ограничение на количество изображений или на объем.

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

Фотошоп, Иллюстратор и некоторые другие программы Adobe имеют инструмент оптимизации изображений.

Откройте файл и перейдите File — Export — Save for Web.

Если вы хотите сохранить изображение в формате png, выберите PNG-8, выберите количество цветов изображения и метаданные, которые вы хотите оставить в конечном файле:

Если вы будете сохранять в png, то под выбором формата есть настройки модели. Я использую эти настройки, вы можете попробовать другие:

• No Dither
• Diffusion
• Pattern

No Dither хорошо справляется с разными цветами, но плохо с градиентом. Pattern хорошо с градиентом, но хуже с цветами, на некоторых цветах появляются артефакты.

Подберите свою комбинацию для каждого типа изображений.

Если вы хотите сохранить изображение в формате jpg, то выберите JPEG, выберите качество изображения или готовую настройку и метаданные, которые вы хотите оставить в итоговом файле:

Бесплатные альтернативы Фотошопу — программы GIMP и Paint.net.

ImageOptim

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

Альтернатива для Windows — Trimage.

JPEG Mini

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

Вы можете установить триал версию программы на компьютер, или купить плагины для Фотошопа и Лайтрума. После триального периода нужно купить платную версию.

Программа стоит 59$, программа и плагины для Фотошопа и Лайтрума стоят 89$.

Также есть платное подключение по API для разработчиков.

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

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

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

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

Smush Image Compression and Optimization

Плагин создан разработчиком WPMU DEV, регулярно обновляется и имеет более миллиона установок. Оптимизирует jpeg, png и gif форматы. Изображения до 5 Мб оптимизируются бесплатно в любом количестве.

Оптимизирует до 50 изображений за один раз. Автоматически находит изображения, которые замедляют сайт. Плагин может откладывать загрузку изображений до того, как они не появятся в видимой части экрана (lazy load).

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

EWWW Image Optimizer

Другой популярный плагин, регулярно обновляется, имеет более 800.000 установок. Плагин бесплатно оптимизирует изображения на вашем сервере или платно на своем сервере.

Работает с форматами jpg, png и pdf. После оптимизации выбирает наиболее подходящий формат для показа на сайте, — jpg, png или gif.

Плагин может автоматически конвертировать jpg и png изображения в формат webp.

ShortPixel

Относительно новый плагин, ставший популярным. Оптимизирует форматы jpeg, png, gif и pdf на своем облаке.

В бесплатной версии позволяет оптимизировать до 100 изображений в месяц. Если нужно оптимизировать больше изображений, нужно купить одну из платных версий. Можно купить подписку на месяц или сделать единоразовую оплату за 10.000, 30.000, 50.000 или 170.000 изображений.

По этой ссылке вы получите еще 100 бесплатных оптимизаций в месяц каждый месяц.

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

TinyPng

Простой и понятный плагин, регулярно обновляется, имеет более 200.000 установок. Подключается по API к серверу TinyPNG, на котором оптимизируются изображения.

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

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

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

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

TinyPNG

TinyPng — бесплатный web сервис оптимизации изображений, который использует

Перейдите на сайт TinyPNG и загрузите ваши изображения. Сервис оптимизирует картинки и даст вам ссылку на скачивание.

Для разработчиков есть подключение по API для автоматической оптимизации изображений.

Optimizilla

Optimizilla — онлайн сервис оптимизации изображений для сайта. Использует комбинацию алгоритмов оптимизации и lossy сжатия изображений. Уменьшает размер JPEG и PNG форматов до минимально возможного, сохраняя нужный уровень качества изображения.

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

Bulkresizephotos

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

Сервис уменьшает размер и/или объем изображений, и может конвертировать форматы изображений в JPEG, PNG или WEBP.

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

После того, как вы оптимизировали размер и объем изображения и выбрали подходящий формат, назовите готовый файл так, чтобы было понятно, что изображено на картинке. Не называйте файл Untitled.jpeg, Без-названия.png или 01.webp.

Закачайте картинку на сайт и добавьте атрибуты Alt и Description. Эти теги говорят поисковым системам что изображено на картинках. Заполните как минимум поле Alt.

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

Также эти теги помогают пользователям с нарушениями зрения, так как их программы чтения с экрана могут читать им теги Alt и Title.

Заключение

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

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

Если вы начинаете новый сайт, то оно того стоит.

После оптимизации в Фотошопе картинки имеют маленький размер, так что до-оптимизацию на сайте с помощью плагина можно не делать.

Хороший результат у плагинов TinyPNG и ShortPixel. EWWW Image Optimizer хороший плагин, но его сложнее настроить.

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

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

Читайте также:

1. Где брать бесплатные картинки в хорошем качестве для публикации на сайте без нарушения авторских прав
2. SEO для Вордпресс. Подробная инструкция
3. 12 советов для SEO оптимизации Блога

Надеюсь, статья была полезна. Оставляйте комментарии.

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

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

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

Есть очень простое решение данной проблемы для WordPress – просто нужно поставить плагин WP Smush.It. Что он делает? Он автоматически сжимает картинки на сайте в онлайн режиме. Причем практически без потери качества. То есть визуально вы не заметите отличий между изображениями до и после обработки.

Плагин WP Smush.It для оптимизации изображений в WordPress

1. Как всегда сначала нужно скачать плагин WP Smush.It и активировать его.
2. После активации плагина все последующие изображения, загружаемые на сайт, автоматически будут сжиматься.
3. Чтобы сжать уже имеющиеся картинки, нужно перейти в админку WordPress во вкладку “Медиафайлы”:
4. Перейти в режим списка:
5. Отметить галочкой необходимые картинки, которые нужно оптимизировать:
6. Подняться наверх, во вкладке “Действия” выбрать “Bulk Smush.It” -> “Применить”:
7. Нас перебросит на страничку настройки плагина WP Smush.It. Немного пролистав страницу вниз, обнаружим процесс выполнения задачи:
8. Правда легко? Вот такой вот классный и простой в использовании плагин WordPress для оптимизации изображений. Снова перейдем во вкладку “Медиафайлы” и мы там увидим на сколько процентов сжались картинки:
9. Если вас все устраивает (пройдитесь по этим изображениям обязательно, если вдруг вас не устроило, ниже я описал как вернуть на первоначальный вариант) и вы хотите, оптимизировать все картинки, которые имеются у вас на сайте, то перейдите во вкладку “Медиафайлы” -> “WP Smush.It”:
10. Вот здесь вам будет доступна пакетная оптимизация изображений. Просто пролистайте страницу немного ниже и там найдете кнопку “Bulk Smush all my images”, там же увидите количество картинок, которое будет оптимизировано:
11. Кликаем на эту кнопку и ждем. Довольно долго. 500 картинок обрабатываются примерно за полчаса. Просто оставляете эту вкладку открытой. А так на этом все, плагин действительно очень удобный и все максимально автоматизировано.

Небольшие особенности плагина WP Smush.It

• Если вдруг вам не понравились изменения, которые произвел плагин WP Smush.It, вы можете произвести откат. Для этого нужно кликнуть на кнопку “Re-Smush”:
• После активации плагина вы заметите, как изображения дольше по времени будут вставляться на блог. Это нормально, происходит процесс сжатия картинок. Вот этот фактор немного напрягает меня, я привык, что медиафайлы вставлялись моментально.
• Ограничение бесплатной версии: оптимизируются изображения размером не более 1 МБ, если нужно будет больше, то придется покупать Pro версию. У меня таких картинок всего 91 шт. на всем блоге, поэтому я не парюсь по этому поводу:

На сегодня все. Познакомил вас с таким простым в использовании, в тоже время крайне полезным плагином WP Smush.It. Если будут какие-то проблемы/вопросы, пишите в комментариях. С радостью отвечу.

Всего хорошего!

P.s. Вам нужно создать качественный сайт для бизнеса? Тогда создание сайтов в Санкт-Петербурге возможно это то, что вам нужно. Доверьтесь профессионалам.

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

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

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

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

Давайте углубимся в эту тему.

WebP – что за зверь такой?

Что представляет собой файл WebP? WebP – это формат изображений, разработанный Google. Обычно у вас имеются изображения в форматах JPEG (JPG) и PNG. В качестве альтернативы им применяют WebP.

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

К примеру, исследование Google показывает, что изображение WebP в среднем:

• На 25-34% меньше, чем сопоставимое изображение JPEG.
• На 26% меньше, чем сопоставимое изображение PNG.

По этой причине, если вы проанализируете свой сайт в PageSpeed Insights, одной из рекомендаций будет передача изображений в современных форматах, таких как WebP:

Каким образом формат WebP от Google позволяет добиваться такого существенного сокращения размера файлов?

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

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

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

Какие браузеры поддерживают WebP?

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

Изображения WebP поддерживаются следующими популярными браузерами:

• Chrome (десктопный и мобильный)
• Firefox (десктопный и мобильный)
• Edge
• Opera (десктопный и мобильный)

Заметным препятствием на пути внедрения WebP является Safari. На момент написания статьи ни мобильная, ни десктопная версии Safari не поддерживают WebP-изображения. Apple немного поэкспериментировали с поддержкой WebP в Safari в 2016 году, но с тех пор дальнейших действий не последовало.

В Internet Explorer также отсутствует поддержка WebP (но Edge уже имеет ее, поскольку основан на Chromium).

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

Сравнение размеров WebP и JPG, PNG

Согласно тестам Google, изображения WebP:

• На 25-34% меньше, чем сопоставимое изображение JPEG.
• На 26% меньше, чем сопоставимое изображение PNG.

В тестах использовалось свыше 11000 изображений, в том числе:

• Стандартное тестовое изображение «Лена»
• 24 изображения из набора Kodak True Color
• 100 изображений с сайта Tecnick.com
• Случайная выборка, состоящая из более чем 11000 изображений, взятых из Google Image Search

Как использовать WebP изображения на сайте WordPress

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

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

Не переживайте, решение имеется.

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

К примеру, если вы загрузите JPEG-файл на сайт, плагин сделает следующее:

• Конвертирует JPEG в WebP и передаст версию WebP для посетителей, которые пользуются браузерами Chrome, Firefox и т.д.
• Выведет исходный JPEG для посетителей, которые пользуются Safari и другими браузерами без поддержки WebP.

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

Ниже мы рассмотрим некоторые из лучших плагинов для WebP в WordPress.

ShortPixel

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

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

ShortPixel имеет лимитированный бесплатный тариф, который позволяет бесплатно оптимизировать ~ 100 изображений в месяц. Платные тарифы начинаются с $4.99 в месяц за 5000 изображений/кредитов или $9.99 разово за пакет из 10000 кредитов.

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

Вы можете распределить свои кредиты ShortPixel  на неограниченное количество сайтов (все ваши сайты могут использовать тот же самый аккаунт в ShortPixel).

Чтобы использовать ShortPixel  для передачи WebP-изображений в WordPress, вам нужно поставить плагин с WordPress.org и добавить свой API-ключ (который вы получите при регистрации аккаунта в ShortPixel).

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

Чтобы включить изображения WebP, перейдите на вкладку Advanced и:

• Установите флажок напротив WebP Images
• Установите флажок напротив Deliver the WebP versions (появится после того, как вы поставите первый флажок).
• Включите «Using the PICTURE tag syntax».
• Задайте пункт «Only via WordPress hooks selection» (ставится по умолчанию).

Теперь сохраните изменения.

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

Imagify

Imagify – популярный плагин для оптимизации изображений от тех же разработчиков, что и WP Rocket.

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

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

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

Imagify имеет ограниченный бесплатный тариф, который позволяет оптимизировать до 25 Мб в месяц. Платные тарифы начинаются от $4.99 в месяц за 1 Гб или $9.99 за разовый кредит в 1 Гб.

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

Чтобы использовать Imagify для доставки WebP-изображений в WordPress, вам нужно поставить плагин с WordPress.org и добавить API-ключ.

После активации плагина вы можете использовать поле General Settings для выбора уровней сжатия.

Чтобы включить WebP-изображения, прокрутите вниз до секции Optimization и найдите там раздел WebP Format:

• Установите флажок напротив Create webp versions of images
• Установите флажок напротив Display images in webp format…
• Выберите пункт use picture tags
• Если вы работаете с CDN, вы можете указать соответствующий URL в поле «If you use a CDN»

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

Optimole

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

• Он может передавать ваши изображения через свой собственный CDN (на базе Amazon CloudFront).
• Он предлагает адаптивные изображения в реальном времени, что позволяет выводить изображения оптимального размера для каждого посетителя. К примеру, если человек просматривает сайт через небольшой экран, то он получит изображение в более низком разрешении, чем тот, кто просматривает сайт с экрана Retina.

Такой подход используется в разных сервисах оптимизации/управления в реальном времени, как Cloudinary, imgix, KeyCDN Image Processing и т.д.

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

Optimole имеет ограниченный бесплатный тариф, который позволяет передавать изображения ~ 5000 посетителям в месяц. Платные тарифы начинаются от $19 в месяц за ~ 25000 посетителей.

Вам нужно будет установить плагин с WordPress.org и активировать его с помощью API-ключа (дается при регистрации аккаунта Optimole).

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

Настроить другие параметры (уровень сжатия, поведение масштабирования) можно в разделе Media → Optimole → Settings:

Поскольку Optimole осуществляет доставку изображений через свой CDN, вам не придется настраивать какие-либо сложные правила Nginx.

Источник: kinsta.com

Оптимизация изображений с WP Smush (Преимущества, недостатки и альтернативы)

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

Что такое WP Smush?

WP Smush это WordPress плагин, который позволяет вам оптимизировать изображения без потери качества.

Преимущества WP Smush

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

Для оптимизации старых картинок можно перейти в раздел Медиафайлы » WP Smush для оптимизации 50 изображений за раз.

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

Недостатки WP Smush

Разница в производительности будет не такой существенной, как при использовании других способов.

Например, если вы загружаете фотографию размером 3 Мб на свой сайт, то WP Smush сможет уменьшить ее на 10-20% без потери качества. Но картинка все равно будет «весить» от 2,4 to 2,7 Мб, что достаточно много.

WP Smush не позволяет вам контролировать степень оптимизации изображений. Хоть он и уменьшает размер файла, но это не самое лучшее решение.

Альтернативы WP Smush

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

EWWW Image Optimizer

EWWW Image Optimizer это плагин WordPress, который оптимизирует ваши изображения по мере их загрузки. Вы также можете оптимизировать ранее загруженные картинки. Плагин позволяет вам изменять формат файла картинки, и вы можете выбрать именно тот формат, который будет «весить» меньше остальных.

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

Imsanity

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

Можно задать дефолтную степень сжатия для jpeg изображений в WordPress. Плагин также можно использовать для автоматической конвертации форматов изображений из BMP в JPEG, или PNG в JPEG.

Adobe Photoshop

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

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

Также программа покажет предпросмотр изображения и размер итогового файла по мере изменения этих настроек.

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

Заключение

Оптимизацию изображений лучше делать «вне» WordPress.

Если вы будете использовать WP Smush или его альтернативы, вы получите не такие хорошие результаты как в инструментах типа Photoshop, GIMP, JPEGMini, или TinyPNG.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 0.0/5 (0 votes cast)

Как оптимизировать изображения для 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 просто перейдите в Image> Image Size , чтобы вручную настроить размеры и разрешение вашего изображения. Вы также можете перейти в Файл> Экспорт> Сохранить для Интернета , чтобы оптимизировать изображения для загрузки в Интернет:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кэшировать изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как оптимизировать изображения для 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 просто перейдите в Image> Image Size , чтобы вручную настроить размеры и разрешение вашего изображения. Вы также можете перейти в Файл> Экспорт> Сохранить для Интернета , чтобы оптимизировать изображения для загрузки в Интернет:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кэшировать изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оптимизация изображений в WordPress — 6 советов по ускорению вашего сайта

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

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

Оптимизация изображений в WordPress. Совет № 1: выберите правильный тип файла

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

Итак, какой из них использовать? Ну, это зависит от обстоятельств.У обоих вариантов есть достоинства и недостатки, и выбор во многом зависит от сценария.

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

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

Что ж, давайте рассмотрим несколько сценариев, чтобы проверить это.

Этот полноразмерный снимок экрана моей панели управления WordPress был 150 КБ в формате PNG, но 259 КБ в формате JPEG. Помните, что скриншоты обычно являются областью PNG — JPEG примерно на 75% больше.

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

Однако полноразмерная версия этой фотографии, которую я сделал в отпуске, дает противоположные результаты. Фотография в формате JPEG — 1,26 МБ; PNG колоссальные 7,23 МБ. Это означает, что PNG на 550% больше (ага!).

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

2. Изменение размера изображений

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

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

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

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

Полноразмерная версия моей предыдущей фотографии имеет размеры 2592 x 1456 пикселей и 1,26 МБ. Однако давайте посмотрим, насколько уменьшается размер файла при изменении размера изображения до нескольких популярных значений ширины.

Пример оптимизации изображения в WordPress:

• Ширина 1200 пикселей: 394 КБ
• Ширина 1000 пикселей: 298 КБ
• Ширина 800 пикселей: 219kb
• Ширина 600 пикселей: 154 КБ

Как видите, экономия размера действительно ошеломляет!

Чтобы изменить размер изображений для экономии времени, вы можете установить Optimole на свой сайт WordPress, и он будет делать все на автопилоте.Более того, он поставляется с возможностью изменения размера изображения для оптимального отображения , что означает, что изображения загружаются не в полном размере, но они адаптируются к окну просмотра каждого пользователя. Другими словами, Optimole загружает изображение идеального размера независимо от того, какое устройство или размер экрана вы используете .

3. Обрезать изображения

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

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

Обрезка — альтернатива изменению размера. Вместо того, чтобы сжимать все изображение, вы, по сути, обрезаете его по краям — как при использовании ножниц на фотографии. Часть изображения, которую вы пытаетесь показать, становится более заметной, и вы убираете все отвлекающие факторы с фона.

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

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

Обрезанное изображение:

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

4. Более низкое качество изображения (сжатие с потерями)

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

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

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

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

• Высшая оценка: более низкая степень сжатия; более высокое качество; больший размер файла.
• Более низкая оценка: более высокое сжатие; более низкое качество; меньший размер файла.

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

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

Оптимизация изображения в WordPress фотография A:

Фотография B:

Щелкните здесь, чтобы увидеть

Фотография B имеет оценку качества 100.

Трудно заметить разницу, правда? Однако, когда дело доходит до размеров файлов, разница бывает днем ​​и ночью: 418 КБ против 90 КБ.

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

Конечно, это может быть всего 28 КБ, но я бы не хотел, чтобы это было на моем веб-сайте, не так ли?

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

5. Размещайте образы на CDN

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

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

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

Все, что вам нужно сделать, это установить и активировать Optimole. Voilà — ваши изображения будут отображаться в рекордно короткие сроки.

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

6. Ленивая загрузка

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

В конце концов, изображение внизу страницы будет видно намного позже, чем изображение вверху страницы — разве первое изображение не заслуживает приоритета?

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

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

Это тоже совершенно бесплатно.

К вам

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

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

Если у вас есть вопросы по оптимизации изображений, поделитесь ими в разделе комментариев ниже!

Хотите сделать ваш сайт еще быстрее? Не забудьте про наш бесплатный курс электронной почты о том, как ускорить работу WordPress:

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

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

Сократите время загрузки даже на 50-80%

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

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

Почему изображения (такие очень) важны?

Существует множество причин, по которым вы (и должны) использовать изображения в своих сообщениях и статьях:

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

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

Но подождите! Проблема!

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

Задержка загрузки страницы в одну секунду может снизить коэффициент конверсии на 7%

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

У большинства сайтов есть та же проблема — они используют отличные изображения, но способ представления изображения посетителю плохой. Большой размер, плохая оптимизация, неправильный формат, излишне большие размеры (размеры), неотвечающие изображения и неосторожные ошибки SEO — вот некоторые из наиболее распространенных проблем, с которыми сталкивается современный Интернет. 6 пикселей) и попросит браузер уменьшить его до необходимого размера 150 x 150 пикселей.По сути, браузер отображает только 0,0045% исходного изображения!

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

Всегда изменяйте размер (и под изменением я имею в виду уменьшение) изображения до требуемых размеров, а затем загружайте его!

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

Полезные инструменты:

• IrfanView — отличная бесплатная программа для пакетного изменения размера ваших изображений с расширенными параметрами, такими как оптимизация, водяной знак и границы.
• ImageMagick — это усовершенствованный инструмент с открытым исходным кодом, который можно использовать в различных языках программирования и операционных системах.Вы можете написать собственное приложение или просто использовать его через командную строку.
• ImageOptim (Mac) позволяет перетаскивать целые папки и быстро оптимизировать несколько изображений.
• TinyPNG — это онлайн-инструмент для сжатия изображений с API.

2. Используйте правильный формат изображения

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

3. Используйте прогрессивные JPEG

Базовый (нормальный) JPG по сравнению с прогрессивным JPG

Для обычного человека JPEG бывает двух типов — базовый и прогрессивный. Визуально оба одинаковые. Разница в способе загрузки:

• Базовый JPEG имеет только один слой — содержащий все изображение. По запросу все изображение загружается за один раз.
• Progressive JPEG составляют изображение с несколькими слоями.Изображение в прогрессивном формате JPEG загружается слой за слоем, качество которого постепенно увеличивается, что в конечном итоге дает представление без потерь.

IrfanView поддерживает пакетное преобразование с прогрессивным JPEG

Все основные средства изменения размера изображения позволяют сохранять изображения в формате Progressive JPEG.

4. Включить отложенную загрузку

Lazy-Loading — отличный метод для экономии ресурсов , при котором изображение загружается только тогда, когда посетитель прокручивает вниз до рамки просмотра изображения.Рассмотрим статью «15 самых экономичных автомобилей 2014 года». Естественно, в этой статье будет не менее 15 изображений. И независимо от высоты устройства отображения — монитора, планшета или смартфона, вы не сможете уместить все 15 изображений в рамку просмотра. Вы должны прокрутить вниз, чтобы просмотреть все изображения.

При включенной отложенной загрузке изображения будут загружаться только тогда, когда посетитель находится рядом с изображением. Другими словами, изображения начинают загружаться, когда вы прокручиваете их вниз, чтобы просмотреть их. Однако первые несколько изображений загружаются мгновенно, поскольку вы уже находитесь в рамке просмотра.Ленивая загрузка экономит пропускную способность на обоих концах и сокращает время загрузки! Вы можете использовать отложенную загрузку в WordPress с плагином BJ Lazy Load.

5. Добавьте CDN

Использование сети доставки контента (CDN) будет обслуживать изображение с сервера, который физически находится ближе всего к местоположению посетителя. Если посетитель из Индии запрашивает изображение, а сеть CDN имеет POP (точку присутствия или просто сервер) в Токио и Нью-Йорке, изображение будет обслуживаться с сервера, расположенного в Токио.

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

Здесь, в WPExplorer, мы используем Cloudflare, и у нас есть добавленный список рекомендуемых бесплатных сервисов CDN, которые вы, возможно, захотите оформить. Но настроить CDN самостоятельно может быть сложно, и здесь может пригодиться плагин.

Publitio разгрузить носители

Отличным вариантом является плагин Publitio Offload Media, который позволяет хранить файлы мультимедиа в облачном менеджере мультимедиа Publitio.Установив плагин, вы можете легко перенести всю медиатеку со своих серверов и даже оптимизировать качество изображения и видео, когда это сделаете. После перемещения изображения быстро передаются из Publitio CDN. Это освобождает массу места на сервере и действительно может ускорить работу вашего сайта (особенно если у вас бюджетный тарифный план с ограниченным пространством). Есть даже простая кнопка «Синхронизировать сейчас», чтобы автоматически добавлять новые медиафайлы в облако при редактировании новых сообщений. А премиальные планы Publitio включают дополнительные функции для пользовательских CNAME, несколько водяных знаков и даже шифрование видео.

6. Объявите атрибут alt

Атрибут «alt» описывает изображение для поисковой системы. Текст, который вы вводите в это поле, будет отображаться пользователю в случае, если изображение не может быть загружено. Многие люди оставляют эти поля пустыми. Это очень вредно для SEO, и вы теряете трафик. Вы всегда должны стараться включать ключевые слова вашего сайта в тег alt изображений.

7. Оптимизация сжатия изображений

Оптимизированные изображения на 40% светлее обычных изображений.Это сокращает время загрузки и экономит полосу пропускания. Из списка Фредди лучших плагинов для оптимизации изображений WordPress мы рекомендуем WPSmush.it для оптимизации ваших изображений. Kraken.io также является отличным онлайн-вариантом для мгновенного сжатия изображений. Мы все время используем его здесь, в WPExplorer, для оптимизации избранных изображений перед их загрузкой в ​​сообщения и демонстрации тем.

8. Адаптивные изображения

Адаптивный веб-дизайн уже здесь

Даже если ваш сайт адаптивный, это не значит, что ваши изображения адаптируются.Это означает, что изображение заголовка, которое вы используете для 22-дюймового экрана рабочего стола, также передается на 5-дюймовый iPhone. Когда вы загружаете изображение, WordPress изменяет его размер на несколько версий — эскиз, средний, полный размер и т. Д. Это может быть изменено разработчиком. Хорошо закодированная тема будет обслуживать версию изображения среднего размера, тем самым экономя трафик.

Плагин Picturefill.WP заменяет теги изображений новым элементом , который будет обслуживать разные изображения на основе медиа-запросов. Это довольно экспериментально (это означает, что в нем есть ошибки), и его не следует использовать на действующем сайте.

9. Подписи к изображениям

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

10. Имя файла изображения

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

Заключение

Image SEO критически важно для любого веб-сайта — старого или нового.Люди, которые правильно внедряют SEO изображений (временами это может быть довольно обыденно), могут получить значительный объем органического трафика (лучший вид трафика) в долгосрочной перспективе .

У вас есть отличная техника оптимизации? Огонь!

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

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

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

Давайте приступим!

1. EWWW Image Optimizer

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

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

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

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

Основные характеристики:

• Сжимайте файлы изображений при их загрузке на свой веб-сайт
• Оптимизируйте существующие файлы в медиатеке
• Автоматически изменять размер новых изображений
• Включить отложенную загрузку
• Конвертировать изображения в WebP

EWWW Image Optimize для вас, если…

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

Цена: Бесплатно, премиум-версия доступна от 7 долларов в месяц | Дополнительная информация

2. WP Smush

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

Что действительно выделяется в WP Smush, так это его пользовательский интерфейс (UI). Как и в большинстве плагинов WPMU DEV, дисплей изящный и простой для понимания:

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

Этот конкретный плагин поддерживает изображения размером до 5 МБ. Если вы хотите превысить этот лимит, вам нужно будет использовать премиум-версию, которая также позволяет интегрировать сеть доставки контента (CDN) для еще более быстрой загрузки.

Основные характеристики:

• Автоматически оптимизировать файлы изображений (до 5 МБ) после их загрузки
• Сжимайте существующие изображения в медиатеке (до 50 файлов одновременно)
• Удалите метаданные из файлов изображений
• Автоматически изменять размер изображений по мере их загрузки
• Включить отложенную загрузку

WP Smush для вас, если…

… вы редко используете файлы изображений размером более 5 МБ. Этот плагин предлагает самый удобный интерфейс, который вы найдете среди плагинов сжатия изображений WordPress.Мы также протестировали WP Smush с Divi, и оба они представляют собой отличную комбинацию.

Цена: Бесплатно, премиум-версия доступна от 6 долларов в месяц | Дополнительная информация

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

ShortPixel Image Optimizer позволяет автоматически оптимизировать изображения и PDF-файлов, а также изменять размер изображений. Хотя это стандартное предложение, одна новая функция, которую предлагает этот плагин, — это выбор между сжатием с потерями, без потерь и глянцевым сжатием.

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

ShortPixel Image Optimizer также позволяет создавать резервные копии исходных файлов изображений после их оптимизации. Это может помочь вам удалить метаданные с изображений и автоматически изменить их размер после процесса загрузки. Кроме того, этот плагин может автоматически конвертировать PNG-файлы в JPEG, а также оптимизировать изображения Retina и миниатюры.

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

Основные характеристики:

• Автоматически сжимать новые изображения на вашем сайте (до 100 в месяц)
• Использовать массовую оптимизацию для сжатия существующих изображений
• Выбор между сжатием без потерь, с потерями и глянцевым сжатием
• Создавать резервные копии ваших изображений перед сжатием
• Удалить метаданные из файлов изображений
• Автоматически изменять размер изображений
• Преобразование файлов PNG в файлы JPEG
• Оптимизация изображений и эскизов Retina

ShortPixel Image Optimizer для вас, если…

… вы можете работать с лимитом оптимизации 100 изображений в месяц или заплатить за премиум-версию плагина.Что касается функций, ShortPixel Image Optimizer предлагает больше функций, чем большинство плагинов сжатия изображений WordPress.

Цена: Бесплатно, премиум-версия доступна от 4,99 долларов в месяц | Дополнительная информация

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

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

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

Основные характеристики:

• Оптимизируйте изображения при их загрузке в WordPress или в фоновом режиме после их размещения на вашем сервере
• Автоматическое изменение размера изображений

Сжатие изображений JPEG и PNG для вас, если…

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

Цена: Бесплатно с премиальными планами от 25 долларов в год | Дополнительная информация

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

Robin Image Optimizer позволяет оптимизировать изображения WordPress с помощью нескольких сторонних серверных опций. Плагин может помочь вам массово сжимать изображения или оптимизировать новые файлы при их загрузке в WordPress.В любом случае вы можете выбрать, использовать ли бесплатный сервер, ограничивающий размер изображения до 5 МБ, или второй вариант, работающий по кредитной системе (с 300 бесплатными оптимизациями в месяц):

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

Основные характеристики:

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

Robin Image Optimizer для вас, если…

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

Цена: Бесплатно, премиум-версия доступна от 39 долларов в год | Дополнительная информация

6. reSmush.it

Если вы ищете плагин для сжатия изображений WordPress, работающий по принципу plug-and-play, reSmush.it должен быть одним из ваших лучших вариантов. Этот плагин включает автоматическую оптимизацию изображения сразу после того, как вы его активируете, и включает только несколько настроек.Среди них у вас будет возможность изменить качество изображения, включить журналы, сохранить метаданные и не сохранять резервные копии изображений:

reSmush.it также позволяет запланировать оптимизацию изображений для работы в фоновом режиме. Однако важно отметить, что плагин может оптимизировать только файлы размером до 5 МБ. Кроме того, вы можете использовать его без ограничений.

Основные характеристики:

• Автоматически оптимизировать изображения после их загрузки в WordPress
• Запланировать оптимизацию изображения заранее
• Сохранить или удалить метаданные изображения
• Создайте резервные копии ваших изображений перед оптимизацией

reSmush.это для вас, если…

… вы хотите использовать удобный плагин для оптимизации изображений. Единственным недостатком reSmush.it является ограничение на размер файла изображения 5 МБ.

Цена: Бесплатно | Дополнительная информация

7. WP-Optimize

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

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

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

Основные характеристики:

• Автоматически оптимизировать изображения после их загрузки в WordPress
• Сжатие изображений из медиабиблиотеки
• Оптимизируйте базу данных WordPress
• Настройте параметры кеширования своего веб-сайта
• Минимизируйте скрипты своего сайта

WP-Optimize для вас, если…

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

Цена: Бесплатно, премиум-версия доступна от 39 долларов в год | Дополнительная информация

8. Оптимизатор изображения от 10web

Плагин Image Optimizer от 10Web позволяет выбирать между «простым» и «расширенным» режимами настройки. Простой режим позволяет вам выбрать, какой тип сжатия вы хотите применить к изображениям и оптимизировать ли их автоматически.

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

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

Основные характеристики:

• Автоматическая оптимизация изображений после их загрузки (до 100 в месяц)
• Массовая оптимизация изображений в медиатеке
• Изменить размер изображений после их загрузки
• Удалить метаданные из файлов изображений
• Создание резервных копий файлов изображений
• Исключить изображения меньшего размера из оптимизации

Image Optimizer от 10web для вас, если…

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

Цена: Бесплатно, с премиум-версией, доступной как часть услуг 10Web или в комплекте плагинов от 85 $ | Дополнительная информация

Заключение

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

Имея это в виду, нашими лучшими предложениями для плагинов сжатия изображений WordPress являются EWWW Image Optimizer и WP Smush. Оба инструмента предлагают широкий спектр вариантов оптимизации и лишь несколько ограничений в случае с WP Smush. Любой из этих плагинов может быстро помочь вам начать работу с устойчивым долгосрочным оптимизационным решением.

У вас есть вопросы о том, какой плагин сжатия изображений WordPress использовать? Давайте поговорим о них в разделе комментариев ниже!

Изображение предоставлено Андреем Красовицким / shutterstock.com

Подготовка изображений к загрузке — Темы Kadence

Правильная подготовка изображений перед их загрузкой на сайт может иметь решающее значение между четким и профессиональным сайтом или безвкусным и любительским. Простое размещение изображения на вашем сайте без каких-либо предварительных расчетов по размеру или качеству может вызвать самые разные проблемы, включая увеличение времени загрузки и проблемы с макетом. Так важно, чтобы ваши изображения были не только высокого качества, но и надлежащего разрешения.Сегодня мы рассмотрим процесс поиска БЕСПЛАТНЫХ красивых изображений в Интернете, научимся изменять размер фотографий в фоторедакторе и сжимаем фотографии для Интернета. Мы также расскажем о процессе загрузки фотографий и оптимизации ваших миниатюр. Давайте начнем!

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

Рекомендуемые размеры изображений

Как правило, мы рекомендуем загружать изображения размером не менее 1600 x 1600 пикселей, но не более 3000 x 3000 пикселей. Причина в том, что WordPress выводит ваши изображения в формате, который позволяет браузеру выбирать правильный размер в зависимости от места, которое изображение занимает на вашей странице, и качества экрана. Таким образом, только потому, что вы загружаете изображение с разрешением 2000 пикселей, например, большинство зрителей на вашем сайте увидят его в меньшем размере и им не придется загружать такое большое изображение, но вы по-прежнему будете поддерживать экраны более высокого качества и различные варианты макета.

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

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

Найдите изображения, которые вы хотите использовать

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

Обрезать изображение до желаемого соотношения

Если у вас ограничены инструменты, вы можете легко обрезать изображения в Mac Preview, щелкнув и перетащив часть изображения, которую вы хотите обрезать, а затем щелкнув CMND> K, чтобы обрезать изображение. Если вы используете устройство с Windows, вы можете обрезать изображение в Paint.Те из вас, у кого есть доступ к более продвинутым фоторедакторам, таким как Photoshop, должны легко обрезать изображение в приложении.

Изменение размера и сжатие изображений

Опять же, если у вас нет доступа к расширенному фоторедактору, например Photoshop, вы можете использовать Mac Preview или Windows Paint для изменения размеров в пикселях. Перейдите в Инструменты >> Настроить, где вы можете выбрать размеры в пикселях и сохранить. * Помните, что размеры вашего изображения должны быть около 1600×1600 пикселей, но не более 3000×3000 пикселей.

Еще один любимый нами инструмент — imageresize.org. С его помощью вы можете загружать свои изображения массово, изменять их размер и сжимать все одинаково, и все из одного места! Нажмите «Массовое изменение размера» в заголовке, затем загрузите изображения.

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

Загрузите изображения

После загрузки вашего сжатого изображения или изображений загрузите изображения на свой сайт в нужную область.

Оптимизация на месте

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

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

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

Подпишитесь на Shortpixel

Подпишитесь на Imagify

После регистрации найдите область API-интеграции в раскрывающемся меню и скопируйте API:

Скопировав ключ API в буфер обмена, вернитесь к администратору WordPress и поместите API в ShortPixel:

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

Оба плагина имеют массовый оптимизатор, который автоматически оптимизирует все изображения на вашем сайте. В ShortPixel найдите Bulk Optimizer под медиа в вашей административной области.

Оказавшись внутри, установите параметры массовой оптимизации и нажмите кнопку «Начать оптимизацию».Bulk Optimizer сделает свою работу, и ваши изображения будут полностью оптимизированы!

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

Надеемся, это было полезно! Как всегда, не стесняйтесь обращаться к нам с любыми дополнительными вопросами по этой теме.

4 должны иметь плагины для SEO изображений и оптимизации библиотеки в 2021 году

Зачем оптимизировать вашу библиотеку WordPress для поисковых систем?

1.SEO изображений и оптимизация библиотеки увеличит ваш органический трафик.

Предоставлен бесплатный органический трафик

Картинка стоит тысячи слов . Исследования показали, что за этим клише статей с красивыми изображениями получают в среднем на + 90% больше посещений () по сравнению со статьями без изображений. Поэтому вы должны включать изображения на все свои страницы и размещать сообщения.

Пользователи WordPress всегда должны помнить об этих данных при построении своих маркетинговых и SEO-стратегий.

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

Изображения могут также увеличить ваш органический поисковый трафик, если вы потратите время на их оптимизацию для SEO. Действительно, в среднем более 20% трафика Google поступает из изображений Google . Да, более 20%. Это ОГРОМНО! Вот почему вы должны оптимизировать вашу библиотеку WordPress для SEO.

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

2. WordPress упрощает оптимизацию изображений

Массовая оптимизация!

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

Оптимизация библиотек для поисковых систем — это низко висящий плод SEO, и было бы глупо не ухватиться за него.

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

Как оптимизировать библиотеку WordPress для поисковых систем?

Alt, имя, время загрузки и публикация в социальных сетях

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

1. Наличие соответствующих имен файлов и хороших альтернативных текстов для ваших изображений
2. Организация вашей медиабиблиотеки согласованно (внутренняя сетка)
3. Ориентация на время загрузки : Выбор правильного формата, масштаба для SEO, использование адаптивных изображений и уменьшите размер файлов
4. Добавление данных Pinterest, OpenGraph и карт Twitter

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

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

Поисковая оптимизация изображений — это просто, но вам нужны плагины

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

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

Лучшие плагины для SEO изображений и оптимизации библиотек на WordPress

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

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

Они совместимы с основными расширениями и темами WordPress, такими как WooCommerce, Elementor, Divi, Smush или Yoast.

1. Генератор имен изображений и альтернативных текстов для WordPress

ImageSEO — один из лучших плагинов WordPress для SEO изображений и оптимизации библиотек.

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

Однако все плагины WordPress, доступные на Маркете до ImageSEO , не могли обеспечить соответствующее автозаполнение для атрибутов и имен alt.

Речь шла только о написании заголовка страницы в альтернативных текстах и ​​имени файла.

Алгоритмы Google, Bing и Qwant презирают избыточное количество ключевых слов. Это утверждение также применимо к вашим изображениям, и поэтому ImageSEO является революционным. Плагин помогает поисковым системам понимать ваш визуальный контент.

Экономьте время с помощью искусственного интеллекта

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

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

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

2. Real Media Library — Организатор изображений для WordPress

Real Media Library — это замечательный плагин WordPress для работы с вашими медиа. Это позволяет вам организовать ваши изображений в папки .Это очень полезно, когда у вас есть тысячи изображений в вашей библиотеке WordPress.

Пора навести порядок в вашей библиотеке!

Постоянные ссылки и сетка важны для SEO. Real Media Library — идеальный плагин, который поможет вам сделать это с вашими изображениями в WordPress.

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

Гугл должен разбираться в ваших картинках!

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

3. Imagify — Сжатие изображений и медиа для WordPress

”Ускорьте свой веб-сайт с помощью нашего оптимизатора изображений и получите более светлые изображения без потери качества. «

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

Действительно, Google наказывает веб-сайты с тяжелыми изображениями и большим временем загрузки. Плагин позволяет сжимать изображения без потери качества.

Вишенка на торте: вы можете сжимать изображения, но при желании сохраняйте данные EXIF ​​и IPTC.

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

4. Плагин Open Graph для WordPress

ImageSEO имеет специальные функции для Оптимизация в социальных сетях , такие как создание хэштегов для Twitter и Instagram или описание вывода данных и data-pin-media для Pinterest.

Однако эти функции были разработаны только для того, чтобы дополнить то, что делает плагин, разработанный Will Norris .

Плагин Open Graph вставляет данные Open Graph в сообщения и страницы WordPress. Это позволяет вам выбрать миниатюру, которая будет отображаться, когда ваша страница будет опубликована в Facebook или Twitter.