Как сжать изображения WordPress Плагин EWWW Image Optimizer


Содержание материала:

Оптимизируем изображения| Плагин WordPress EWWW Image Optimizer

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

Ничего скачивать не нужно, достаточно вбить название плагина на вкладке «добавить новый».

Для чего нужен этот плагин? Для увеличения скорости загрузки станиц блога.

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

Вес страницы сайта, в свою очередь, зависит от количества и качества контента.

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

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

Установка плагина займет минимум времени. Для этого посмотрите видео. Настраивать плагин не нужно. После установки он готов к работе.

В левой колонке нажимаем вкладку «медиафайлы» — «не оптимизированные».

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

Время сжатия изображений зависит от количества изображений на блоге.

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

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

Посмотрите небольшое видео по данной теме.

На этом у меня все. Пользуйтесь плагином и оптимизируйте изображения. Подписывайтесь на новости. Если непонятно жду ваши вопросы.

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

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

Что значит оптимизировать изображения?

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

Преимущества оптимизации изображений

Согласно HTTP Archive , изображения занимают в среднем 21% от общего размера веб-страницы . Процесс оптимизации изображений является самым простым способом повышения производительности сайта. Но при этом большинство владельцев пренебрегают им.

Среднее количество байт на страницу (кБ)

Преимущества оптимизации графического контента:

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

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

Основная задача оптимизации – это получение баланс между наименьшим размером файла и приемлемым качеством изображения . Одним из распространенных способов является простое сжатие файлов перед их загрузкой в WordPress. Для этого используют Adobe Photoshop или Affinity Photo. А также плагины, которые мы подробно рассмотрим ниже.

Выбор правильного формата файла

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

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

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

Качество сжатия против размера

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

Примечание : Объем оригинального изображения составляет 2,06 Мб.

Низкая степень сжатия (высокое качество) JPG – 590 Кб

Высокая степень сжатия (низкое качество) JPG – 68 Кб

Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.

Применим к изображению среднюю степень сжатия. В результате мы получили хорошее качество при размере файла в 151 Кб. Это почти в четыре раза меньше размера оригинальной фотографии. Для обеспечения наилучшей производительности сайта изображения в формате PNG не должны весить более 100 Кб.

Средняя степень сжатия (отличное качество) JPG – 151 Кб

Оптимизация с потерями и без потерь

Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.

Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim .

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

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

Существует множество инструментов и программ для оптимизации изображений. Лично мы – большие поклонники Affinity Photo .

Сжатие фотографии в Affinity Photo

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

  • Adobe Photoshop
  • Gimp
  • Paint.NET
  • GIFsicle
  • JPEGtran
  • JPEG Mini
  • OptiPNG
  • pngquant
  • FileOptimizer
  • ImageOptim
  • ImageResize.org

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

WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.

Пример кода отзывчивых изображений srcset

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

Настройка медиафайлов в WordPress

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

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

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

Но не стоит полностью полагаться на плагины. Например, не следует загружать изображения размером более 2 Мб в медиа-библиотеку WordPress. Это приведет к быстрому расходованию дискового пространства, предоставляемого хостингом.

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

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

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

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

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

Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.

Optimole

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

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

EWWW Image Optimizer Cloud — облачный плагин для оптимизации изображений

EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений

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

Плагин EWWW IO позволяет конвертировать изображения в форматы нового поколения, такие как WebP или подобрать наилучший формат для изображения. Стоимость сжатия начинается от 0,003 доллара за изображение.

Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми преимуществами CDN.

Optimus Image Optimizer

Плагин Optimus Image Optimizer

Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.

WP Smush

Плагин WP Smush

Плагин WP Smush сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.

  • Плагин совместим с WP All Import и WPML.
  • Оптимизация изображений выполняется с помощью сжатия без потерь.
  • У Smush есть функция автоматической установки ширины и высоты для всех изображений.

Compress JPEG & PNG images

Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.

ImageRecycle

ImageRecycle- плагин для оптимизации изображений и PDF-файлов

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

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

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

Несжатые файлы JPG

Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.

Тест скорости передачи данных несжатых файлов JPG

Сжатые файлы JPG

Затем мы сжали файлы JPG с помощью WordPress-плагина Imagify, используя «агрессивные» установки. Взгляните на новые сжатые файлы JPG , которые все еще выглядят прекрасно. После этого мы провели пять тестов, используя Pingdom, и выбрали среднее значение. В результате общее время загрузки сократилось до 476 мс, а размер страницы уменьшился до 2,9 Мб. Общее время загрузки уменьшилось на 54,88%, а размер страницы — на 80,27% .

Тест на скорость передачи данных сжатых файлов JPG

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

Использование формата SVG

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

  • Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
  • Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
  • SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.

Файл JPG (оптимизированный размер: 81,4 Кб)

Файл PNG (оптимизированный размер: 85,1 Кб)

Файл SVG (оптимизированный размер: 6.1 Кб)

Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.

Рекомендации

  • Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
  • Используйте векторные изображения, где это только возможно.
  • Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
  • Используйте эффекты CSS3 как можно чаще.
  • Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
  • Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
  • Уменьшайте глубину цвета для использования меньшей цветовой палитры.
  • Используйте сжатие с потерей качества, где только возможно.
  • Экспериментируйте для поиска наилучших установок для каждого формата.
  • Используйте GIF, если вам нужна анимация.
  • Используйте формат PNG, если вам требуется высокая детализация и разрешение.
  • Используйте формат JPG для фотографий общего вида и скриншотов.
  • Автоматизируйте процесс оптимизации изображений.
  • Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.
Топ-пост этого месяца:  Как узнать название шаблона wordpress

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

Данная публикация представляет собой перевод статьи « How to Optimize Images for Web and Performance » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

Набор плагинов для сжатия изображений и SEO.

Вы оптимизировали изображения? Какой вы выбрали плагин оптимизации? Расскажите нам в комментариях ниже.

WP Smush.it

WP Smush.it позволяет сжимать изображения индивидуально через менеджер WordPress медиа или в других разделах WordPress.
Этот плагин работает путем удаления метаданных из JPEG файлов, оптимизации сжатия JPEG, превращая некоторые файлы GIF в индексированных формате PNG и зачистки неиспользуемая цвета из индексированных изображений.

Производительность инструмента сайта GTmetrix.com также рекомендует WP Smush.it как один из лучших по оптимизации для сайтов WordPress.

EWWW Image Optimizer

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

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

CW Image Optimizer

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

Этот плагин основан на WP Smush.it, хотя в отличие от плагина WPMU DEV который использует службу компании Yahoo! Inc Smush.it, оптимизатор использует инструменты оптимизации изображений в Linux littleutils. Это означает, что ваши изображения не будут храниться на сервере.

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

Imsanity

Imsanity — это бесплатный плагин автоматически изменяет размер изображения на более «вменяемой» размера.

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

Hammy

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

Hammy работает только для изображений в рамках статей и страниц.

PB Responsive Images

PB Responsive Images автоматически переформатирует все ваши фото в сжатый формат, стандартов w3.org.

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

SEO Friendly Images

SEO Friendly Images редактирует все ваши изображения с правильной ALT и TITLE атрибуты, чтобы помочь оптимизировать ваши изображения для поисковой выдачи. Если Ваши изображения не имеют описания и названия, то плагин добавит описание заданной темой.
Стоит ли использовать ALT и TITLE атрибуты? Ну да. Атрибут ALT описывает ваши изображения для поисковых систем, в то время TITLE автоматически появляется во всплывающей подсказке при наведении указателя мыши на изображение.

Media File Renamer

Media File Renamer позволяет переименовывать файлы мультимедии, обновляя их названия. Он также автоматически обновляет свои ссылки в статьях.

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

Lazy Load

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

Плагин использует jQuery.sonar только для загрузки изображений. Этот плагин представляет собой объединение кода, написанного на VIP команды WordPress.com на Automattic, по реорганизации команды TechCrunch 2011, и Джейк Goldman от WordPress консалтинговой 10up.

BJ Lazy Load

BJ Lazy Load позволяет автоматически загрузить выбранные изображения, в том числе статьи изображений и миниатюр, Gravatar изображений и фреймы и заменить все содержание или заполнить.

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

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

Посмотрите ещё статьи:

Поделись мнением о статье «10 лучших плагинов для оптимизации изображения WordPress» , предложи свой вариант в комментариях! Спасибо!

8 комментариев на «“10 лучших плагинов для оптимизации изображения WordPress”»

Интересно все таки вывод…описание плагинов есть…а в каких случаях лучше какой использовать…сухой вывод в описании…

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

Плагины отличные, но самый лучший плагин WordPress для сжатия изображений WP Smush 2.0.6.1 версия PRO на русском языке здесь http://studio-paint.eu/wp-smushit.zip. Оптимизация автоматически при загрузке, пакетное и выборочное сжатие, резервное копирование оригинала. JPG, GIF (насчет PNG не скажу, у меня их нет).
Сам им пользуюсь, у меня WP версия 4.2, пока претензий нет 🙂

Согласен, отличный плагин, кстати на данном сайте он тоже установлен.

Ссылке можно доверять?

у вас на сайте подключено 5 скриптов гугл аналитикса…. 4 из которых некорректные

Хочу поделиться своим опытом 2020 года. Решил оптимизировать изображения на сайтах, которые я поддерживаю. Купил платный плагин EWWW Image optimizer. Закинул в него $100, посчитал
что должно хватить с запасом. Включил оптимизацию. Процесс на первом сайте дошел до 40% и заглох. Я начал разбираться, оказывается деньги закончились. Плагин берет деньги не только за оптимизацию кожного thumbnail. А у меня их по десять штук на одно изображения. Поставил WP Smush, бесплатную версию. Оптимизирует за бесплатно 50 изображений, а потом нужно кнопку клацнуть в админке. Почитал я исходники, и написал скрипт который сам кнопку клацает. И так оптимизировал все изображения. Зашел в Google Pagespeed, а он все равно показывает, что изображения не оптимизированы. Если до этого было на 30-40% больше нормы, то после на 10-15%.
Решил я все изображения выгрузить по ftp и оптимизировать консолью с помощью кодека Mozilla MozJpeg. Пробовал несколько раз, пока не добился того что Google Pagespeed перестал примахиваться к изображениям. Но качество изображений стало очень плохое. У упущу все эмоции и перейду дальше.

После изучения темы в интернете оказалось что в сентябре 2020 года Google Pagespeed поменял алгоритм, теперь он хочет чтобы все изображения были меньше webp q75 + 9%. Webp в среднем сжимает на 40% больше чем Jpeg. То есть добиться такого размера от Jpeg и сберечь качество изображения нереально. То есть свалу нет, придется использовать Webp. Но Webp поддерживается только Chrom и Opera. Firefox и Safari их не понимают. Просто пере конвертировать изображения в Webp не поможет. Но есть такой трюк. Можно создать по два файла для каждого изображения.
Нормальный и wepb. И выдавать браузерам поддерживающим webp — webp, а не поддерживающим — нормальный файл. Выбор файла выполняется Apache mod_rewrite. Нужно в .htaccess добавить такой код.

RewriteEngine On
RewriteCond % image/webp
RewriteCond % .*(jpe?g|png|gif)$
RewriteCond %/$1.webp -f
RewriteRule (.*) $1.webp [T=image/webp,E=accept:1]

Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

Для генерации webp файлов нашел бесплатный плагин Opti MozJpeg Guetzli WebP. Он очень интересно сделан, чтобы не устанавливать кодеки изображений на сервер (а у меня хостинг и туда они и не поставляться) можно скачать с сайта плагина виртуальную машину для Oracle Virtual Box. В ней стоит Linux, ssh сервер и кодеки изображений (MozJpeg, Guetzli, WebP). Нужно запустить виртуальную машину у себя на компе, подключить плагин к ней по ssh. И плагин будет по ssh ганять изображения и оптимизировать их в виртуальной машине. То есть я как бы сам для себя облако. Вот этим немного извратным способом я таки оптимизировал изображения и создал для них webp дубликаты. Google Pagespeed полностью снял все претензии к изображениям.

Игорь, спасибо большое за интересный материал!

Я ранее использовал pagespeed от Google, когда он ещё работал на оптимизацию сайтов пользователей. Там включал оптимизацию изображений, но, насколько я помню, даже на сайте с оптимизированными им же изображениям тестировщик pagespeed всё равно ругался на некоторые из них. Но на качестве изображений не экономил. В том же pagespeed включал возможность сжатия в webp, но через некоторое время выключил, ибо работало-то везде нормально, а вот с индексированеим картинок начались проблемы.
НУ а сейчас просто забил на оптимизацию изображений. 🙂 Ибо проектов много, статьи добавляются и получается слишком много времени придётся потратить на ещё одну оптимизационную задачу, которая не является первостепенной даже в плане pagespeed.

10 плагинов WordPress для оптимизации изображений

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

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

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

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

EWWW Image optimizer

WP smush

Optimus — оптимизация изображений на WordPress

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

CW image optimizer

SEO Friendly Images

SEO Friendly Images — плагин, который занимается SEO оптимизацией на вашем веб-сайте. Он использует название и альтернативный текст ваших изображений. Если текста нет, то плагин его придумывает сам.
Чтобы инструмент работал правильно, его нужно как следует настроить. После полной настройки, плагин будет экономить вам много времени, так как возьмёт названия и альтернативные тексты изображений на себя.
SEO Friendly Images не уменьшит размер ваших картинок, но оптимизирует их с точки зрения SEO.

Lazy load

Это ещё один хороший оптимизатор изображений. Плагин Lazy load отличается тем, что загружает изображения только тогда, когда они находятся в поле зрении пользователя.
Его не нужно настраивать, все что требуется — это установить. Для загрузки изображений используется jquery.sonar.

Compress JPEG and PNG images

ShortPixel Image Optimizer

ShortPixel — хороший инструмент сжатия изображений. Способен значительно ускорить загрузку сайта за счет уменьшения веса картинок. При этом не влияет на их качество. Плагин работает по API, а значит, что генерация изображений происходит на серверах ShortPixel.
Чтобы плагин заработал, нужно пройти регистрацию и получить свой API. Бесплатно можно оптимизировать 100 изображений в месяц.

BJ Lazy Load

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

Prizm Image

Как заявляют разработчики, плагин позволяет уменьшить размер изображения до 70%. Сохраняет при этом разрешение и качество.
Однако не все так красиво. Плагин Работает по API стороннего сервиса. 1000 изображений в месяц можно обрабатывать бесплатно. А далее нужно платить. Тарифные планы стартуют от 5$.

Оптимизация изображений WordPress с помощью Robin image optimizer

Table of Contents

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

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

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

А что было раньше?

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

Со временем интернет-сообщество выработало несколько упрощенных идей по оптимизации изображений:

Уменьшение разрешение изображения прямо на сайте при помощи языка PHP (библиотека PHP-GD). В погоне за скоростью загрузки сайта, вебмастера уменьшали разрешение изображения очень сильно, буквально на грани восприятия, вот еще чуть чуть и уже непонятно что изображено, придется всматриваться чтобы понять детали.

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

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

Тестирование через сервис Google Page Speed

Итак, как же проверить оптимизированы ли изображения на вашем сайте и на сколько быстро сайт загружается у пользователя? Для этого есть сервисы тестирования загрузки сайта. Мы используем Google Page Speed. В этой статье мы рассмотрим только оптимизацию изображений. Вот результаты тестирования загрузки мобильной версии нашего тестового сайта:

На снимке видно, что по мнению Google, изображения на сайте можно оптимизировать еще на 17% и это позволит уменьшить размер изображения на 22 килобайта.

Оптимизация изображений WordPress с помощью Robin Image Optimizer

Существует 2 варианта использования Robin image optimizer. В качестве многофункционального плагина Clearfy. Либо если вам нужна только одна функция по оптимизации изображений, мы можем предложить воспользоваться отдельным плагином Robin image optimizer (аддон Clearfy)

Топ-пост этого месяца:  Библиотека jQuery UI эффекты

Clearfy. Установка плагина с функциями оптимизации изображений:

Затем в разделе “Плагины” вы увидите уведомление с предложением установить Robin image optimizer. Нажмите на кнопку Установить=>Включить

Зайдите в Настройки=>Clearfy меню

Затем перейдите в раздел “Оптимизация изображений”. Это и будет вашей рабочей зоной

Robin image optimizer. Плагин является отдельным и самостоятельным аддоном к плагину Clearfy. Его можно найти в репозитории WordPress. Установка:

  1. Заходим в список плагинов=>Добавить новый, затем выбираем и скачиваем Robin image optimizer=>Активировать
  2. Далее заходим в раздел Настройки=>Robin image optimizer

Рабочая зона плагина Robin Image Optimizer.

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

Оптимизировать все изображения на стартовой странице плагина Clearfy можно с помощью кнопки “Запустить”.

или в разделе Image Optimizer в навигационном меню Clearfy.

Если на вашем сайте нет изображений более 4 мегабайт, то можете смело нажать “Запустить”, чтобы оптимизировать все изображения. В ином случае вам нужно включить опцию “Изменение размера больших изображений” в разделе Image Optimizer в основных настройках. После нажатия кнопки ВКЛ.

Если вас не устроило по каким-то причинам качество оптимизированных изображений, вы всегда можете восстановить оригинальные изображения из резервной копии в разделе Image Optimizer – Основные настройки:

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

  1. Автоматическая оптимизация изображений WordPress при загрузке, расположена в том же разделе Image optimizer – Основные настройки.
  2. Кнопка включить оптимизацию по расписанию, расположена в том же разделе Image optimizer – Основные настройки. В данном случае, оптимизация изображений будет происходить через выбранный в настройках, интервал времени. Такой сценарий может быть полезен для сильнонагруженных сайтов, где загрузка изображений происходит в большом количестве в определенные периоды времени. И чтобы в эти периоды снизить нагрузку на сайт, можно включить именно оптимизацию по расписанию.
  3. Оптимизация каждого изображения в отдельности. В случае если на вашем сайте достаточно мало изображений, и вы решили не оптимизировать все имеющиеся изображения на сайте, хранящиеся в библиотеке медиафайлов, то можно оптимизировать каждое изображение в отдельности, с помощью кнопки “Оптимизировать”. Она находится в блоке справа при открытии изображения в библиотеке медиафайлов сайта:

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

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

Изменение оставшихся настроек (описаны ниже), следует вносить если вы являетесь опытным пользователем wordpress.

Режимы сжатия

Есть 3 режима сжатия изображений: нормальный, средний, высокий.

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

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

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

Журнал ошибок

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

Управление резервными копиями

Если происходит оптимизации изображений WordPress с помощью плагина, то Clearfy делает резервную копию оригиналов изображений, чтобы при необходимости у вас оставалась возможность восстановления оригиналов изображений . В случае если восстанавливать оригиналы не нужно, есть кнопка “Очистить резервные копии”.

Оставлять данные EXIF

EXIF – это информация, хранящаяся в фотографиях: модель камеры, скорость затвора, компенсация экспозиции, ISO, GPS и т. д. По умолчанию плагин удаляет расширенные данные EXIF. Если ваш проект посвящён фотографии и вам нужно отображать эти данные, то включите эту опцию.

Выбор сервера оптимизации

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

  • Сервер 1. Предназначен для оптимизации изображений размером не более 5 Мб. Если объем какой-либо картинки будет превышать это значение, то файл не будет обработан системой и не сожмется.
  • Сервер 2. Работает аналогично серверу №1, только размер файлов данном случае не должен быть больше 1 Мб.
  • Сервер 3. Размер изображений для оптимизации неограничен.

Но это не значит, что если размер одной из ваших фотографий больше 1 Мб, то вы должны использовать только Сервер №1. Можно использовать и Сервер №3. Или если у вас картинка занимает 500 Кб памяти (то есть не превышает 1 Мб), то вам запрещено использовать Сервер №2. Такое количество вариантов сделано для того, чтобы в случае отказа одного сервера вы могли подключить к другому.

Оптимизировать миниатюры

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

Заключение

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

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

Здравствуйте!
Pagespeed жалуется на изображениям по 2-м причинам:
1) нужно сжать изображения (Optimize images)
2) нужно вывести изображения нужного размера, вместо полного (Serve scaled images)

По первому пункту:
ПЛАГИНЫ:
— EWWW Image Optimizer (можете также приобрести услугу и включить максимальное сжатие. Стоимость платной оптимизации — $0.003 за фотографию). По умолчанию есть бесплатная оптимизация. Есть возможность конфертировать png jpeg gif — jpeg поддержка — webp. Рекомендую!
https://ru.wordpress.org/plugins/ewww-image-optimizer/
— WP Smush Pro (тоже неплохой плагин, есть премиум версия. Есть одно но, как только вы отключаете плагин, оптимизация теряется)
https://ru.wordpress.org/plugins/wp-smushit/
— Compress JPEG & PNG images (от отлайн сервиса TinyPNG) — платный. Рекомендую.
https://ru.wordpress.org/plugins/tiny-compress-images/

СОФТ:
— Adobe Photoshop (ctrl + shift + alt + S сохранить для веб). Формат jpeg, качество 30%. Для быстроты процесса можете сделать все через экшены.
— FileOptimizer тоже неплохая программа. Классно сжимает! Минус — работает медленно
https://sourceforge.net/projects/nikkhokkho/files/.

По второму пункту:
Если гугл жалуется на размеры картинок, то вместо ограничения их размера путем CSS (width, height) вам необходимо вывести картинку нужного размера. Для этого создайте миниатюры нужных вам размеров.

6 Вордпресс плагинов для оптимизации изображений

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

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

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

В частности, я познакомлю вас с 6 WordPress плагинами по оптимизации изображений. Готовы? Тогда начинаем!

ShortPixel Image Optimizer

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

Данный плагин имеет более 20 тыс. скачиваний и рейтинг в 4.5 звезд. Поддерживается возможность оптимизации всех форматов изображений: JPEG, PNG, GIF а также PDF файлов.

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

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

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

Процесс регистрации довольно прост: указываете адрес электронной почты, получаете API ключ, указываете его перейдя в Настройки -> ShortPixel. Для вас будет доступна оптимизация 500 изображений и плюс 100 единиц каждый месяц. При необходимости можно приобрести премиум подписку за $4.99 с квотой на оптимизацию 5 тыс. изображений.

Стоит отметить, что ShortPixel совместим с такими плагинами как WPML и WooCommerce. Также все оптимизированные картинки будут иметь бэкапы. Таким образом, вы можете в любой момент восстановить изображение до прежнего состояния.

EWWW Image Optimizer

Image Optimizer является одним из самых популярных плагинов в своем роде. Он имеет более 300 тыс. скачиваний и рейтинг в 4.5 звезд. После установки плагина каждое загруженное изображение в формате JPEG, PNG и GIF будет оптимизировано. Также вы можете оптимизировать уже существующие картинки своего блога.

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

После распаковки и активации плагина также потребуется установка некоторых файлов на вашем сервере. Для этого нужно нажать на Settings Page после успешной активации плагина.

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

WP Smush

Wp Smush также является одним из самых популярных плагинов по оптимизации изображений. Он имеет более 400 тыс. скачиваний и рейтинг в 4.5 звезд.

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

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

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

Kraken Image Optimizer

При помощи Kraken Image Optimizer вы можете сжимать изображения форматов JPEG, PNG и GIF. Для использования плагина, после его активации необходимо открыть аккаунт на их сайте для получения API ключа. Кстати, его можно использовать на нескольких сайтах одновременно. То есть, этот плагин не требует отдельной лицензии для каждого сайта.

Kraken Image Optimizer имеет более 10 тыс. скачиваний и рейтинг в 5 звезд. Оптимизация изображений происходит согласно встроенному профилю с минимальной потерей качества. В то же время, вы можете самостоятельно установить уровень качества картинок при их оптимизации. Это можно сделать в настройках плагина.

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

Compress JPEG & PNG images

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

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

Тем не менее, Compress JPEG & PNG images неплохо справляется со своей работой, и результаты оптимизации довольно нелохи. Также плагин поддерживает возможность сжатия уже существующих в медиатеке файлов.

Optimus

Optimus — еще один отличный плагин с одним единственным недостатком: каждое оптимизируемое изображение должно «весить» не более 100 кб. Это ограничение связано с бесплатной версией программы.

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

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

Какой плагин выбрать

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

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

  • Kraken Image Optimizer
  • Compress JPEG & PNG
  • EWWW Image Optimizer

Если вашей основной задачей является оптимизация изображений без всяких примочек — выбирайте Compress JPEG & PNG . Возможно, он будет лучшим вариантом для вас.

В случае если для вас важно наличие дополнительных опций, хорошим вариантом будет Kraken Image Optimizer.

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

В заключение

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

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

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

Как сжать изображение на сайте с помощью плагина?

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

Как сжать изображение с помощью плагина?

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

Топ-пост этого месяца:  Понимание CSS и современного Веба

Изображения делают ваш контент привлекательным и интерактивным.

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

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

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

Если вы устанавливаете плагин впервые, пожалуйста, посмотрите наше видео «3 способа установки плагина».

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

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

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

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

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

Бесплатный тариф позволяет оптимизировать только 100 изображений в месяц.

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

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

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

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

ShortPixel имеет расширенные функции и дает вам возможность выбирать формат сравнения.

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

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

Сравнение плагинов сжатия изображения

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

Сжатие изображения в JPEG формате

Я использовала вот это изображение в формате JPEG, размер — 118кб.

Никакие дополнительные настройки не использовала.

Плагин Полученный размер %
reSmush.it 76 Кб 31%
EWWW Image Optimizer 112 Кб 5%
Compress JPEG & PNG Images 114 Кб 3%
ShortPixel Image Optimizer 69 Кб 42%
WP Smush 112 Кб 5%

Сжатие изображения в PNG формате

Теперь сравним другой формат. Размер — 102кб.

А вот результаты:

Плагин Полученный размер %
reSmush.it 36 Кб 64%
EWWW Image Optimizer 97 Кб 2%
Compress JPEG & PNG Images 34 Кб 64%
ShortPixel Image Optimizer 37 Кб 63%
WP Smush 99 Кб 3%

Какой плагин для сжатия изображений лучше?

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

Если хотите использовать платный плагин, выбирайте ShortPixel.

EWWW Image Optimizer — отличный плагин с гибкими настройками, но вам понадобится оплатить ключ API, чтобы получить доступ к настройкам уровня сжатия.

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

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

Если у вас есть вопросы, пишите в комментариях.

И подписывайтесь на нас в Facebook, Instagram и Twitter.

Ускоряем WordPress оптимизацией изображений ����

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

Я как и большинство начинал свою карьеру не обращая внимание на скорость загрузки сайта. Но когда проверил свой блог через Google Page Speed был неприятно удивлен его скоростью работы.

Сразу несколько пунктов ссылались на плохую оптимизацию изображений. Google говорит:

  • Настройте эффективную кодировку изображений
  • Используйте современные форматы изображений

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

В этом мире слишком мало времени, чтобы трать его на ожидание.

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

Начнем по порядку.

Какие форматы изображений стоит использовать?

Первым шагом к оптимизации служит выбор формата.

Долгое время я использовал JPG, PNG и SVG в своих проектах. Но они первые 2 уже устарели. А SVG нет смысла использовать для растовых изображений.

Немного поискав — я нашел замену в виде нового и очень оптимизированного для интернета WebP. Его разработала компания Google и активно развивает данный формат.

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

Для примера я взял 2 одинаковых изображения одно сохранил в WebP а второе в Jpeg.

Конечно Jpeg тоже хорош при должной оптимизации, есть множество сервисов и плагинов для этого. Я jpeg использую для не поддерживаемых WebP браузеров.

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

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

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

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

Сохранение оптимизированных изображений из Photoshop

Если у вас нет Фотошопа, то тогда пропустите этот пункт. ? Ниже для вас более интересный сервис. ?

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

Главное его преимущество в том, что вы сразу видите конечны результат еще до сохранения.

Чтобы сделать экспорт в оптимизированном формате вам нужно нажать на кнопку Файл > Экспортировать > Сохранить для Web или Alt+Shift+Ctrl+S. Данная функция есть на всех версия фотошопа.

После выполнения этих действий у вас откроется окно с предварительным просмотром и настройками.

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

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

Сервис для оптимизации изображений tinyjpg.

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

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

Я сравнил оба файла и у меня получилось получить одинаковое качество. При этом adobe photoshop сжал лучше.

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

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

Я нашел несколько отличных и бесплатных плагинов. Они способны оптимизировать изображения и скорость загрузки WordPress.

Оптимизация картинок
Robin image optimizer

В прошлых статьях я писал про лучшие плагины для WordPress и там я указывал плагин Webcraftic Clearfy. Для этого плагина есть аддон Robin image optimizer. Для оптимизации обычных изображений я предпочитаю использовать его.

Управление оптимизацией происходит через Clearfy, там есть статистика и текущий прогресс.

В настройках все просто.

Буквально в пару кликов, вы можете запустить работу оптимизатора. Я им перестал уже пользоваться, так как провел оптимизацию всех старых картинок в статьях.

Плагин для включения поддержки WebP — WebP Express

В этом плагине я нашел все необходимое для внедрения WebP в WordPress. У него есть ряд преимуществ из-за которых я использую именно его.

  • Можно использовать бесплатно
  • Определяет поддержку WebP браузером. Если браузер не поддерживает его, то отображает обычную версию изображения.
  • Настраиваемая система сжатия. Вы можете задать максимальное сжатие самостоятельно.
  • Не портит оригинальные изображения.
  • Работает быстро и заменяет картинки во всех местах на сайте.

Как настроить плагин WebP Express

В блоке General есть поле «Image types to work on» в нем включаем работу с PNG и JPG изображениями. Для этого выберите в выпадающем меню Both jpeg and pngs.

Для меня — это обязательное поле. Я загружал в блог изображения именно в этих форматах, таким образом плагин будет работать со всеми картинками моего блога.

Если у вас нет PNG, то можно выбрать пункт только PNG.

В блоке «Redirection rules» ставим галочки напротив двух пунктов. Тем самым мы включаем редирект для изображений.

В блоке Conversion выбираем Quality Auto и в поле Max quality выберите необходимый уровень сжатия. Я установил 50. Но стоит понимать, что не все изображения можно сжать до такого значения, поэтому они будут сжаты максимально, но не более 50.

Conversion method я выбрал GT extension. Напротив Conversion method я не стал ставить галочку, так как возникли проблемы с гутенбергом при написании статьи. Лучше всего вручную потом прогнать.

Чтобы запустить конвертацию нужно нажать кнопку Bulk convert.

После успешной конвертации изображений в новый формат нужно включить замену картинок на новые. Для этого есть блок Alter HTML. В нем я включил «Replace image URLs» для замены ссылок изображений. И «Only do the replacements in webp enabled browsers» этот пункт включает WebP только в браузерах которые поддерживают его, в остальных будет прежний формат.

В пункте «Where to replace»я выбрал «The complete page (using output buffering)» чтобы создавать ссылки WebP на всех страницах.

Заключение

В этой статье я рассказал вам как оптимизировать изображения для сайта на WordPres. Сейчас у меня строит WebP Express и я им очень доволен. Google Page Speed засчитал мои старания и дал 2 галочки за изображения.

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

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

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

EWWW Image Optimizer

Optimizer Ewww Image обещает оптимизировать все изображения на вашем сайте, применяя методы сжатия с потерями , чтобы резко уменьшить размеры изображения для JPEG, PNG и GIF форматов.

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

Если вы предпочитаете не оптимизировать изображения на своем собственном сервере, EWWW Image Optimizer Cloud — это вариант, который вы можете попробовать.

WP Smush

WP Smush, более 700 000 активных установок, является лидирующим вариантом для оптимизации изображений на веб-сайте WordPress и доступен как в бесплатных, так и в премиум-моделях.

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

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

Стоит отметить, что в отличие от других премиальных плагинов, где вы платите единовременную плату за обновление, WP Smush Pro требует от вас подписки на членство в WPMU Dev с платой 49 долларов в месяц.

Kraken.io Image Optimizer

Kraken.io Image Optimizer — один из наиболее эффективных вариантов сжатия изображений и изменения их размера с помощью надежного API-интерфейса Kraken.io. Это платный вариант, но он предоставляет бесплатный план, где вы можете проверить его характеристики и надежность.

Kraken.io поддерживает оптимизацию как без потерь, так и с потерями для всех распространенных форматов изображений, включая JPEG, PNG и GIF. Плагин позволяет оптимизировать изображения по отдельности или все сразу, используя функцию «Krak ’em all». Все вновь загруженные изображения также оптимизируются на лету.

Этот плагин имеет несколько настраиваемых параметров, в том числе возможность сохранять определенные метаданные EXIF, а также возможность ограничивать оптимизацию изображений во время массового процесса, чтобы избежать превышения лимитов запросов. Цены начинаются от 5 долларов в месяц за 500 МБ изображений до 79 долларов в месяц за колоссальные 60 ГБ.

Compress JPEG & PNG Images

Compress JPEG & PNG Images обеспечивает быстрый способ оптимизации изображений на вашем сайте WordPress с помощью таких служб, как TinyJPG и TinyPNG. Чтобы настроить плагин, вам нужно зарегистрировать бесплатную учетную запись TinyPNG и зарегистрировать ключ API.

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

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

Imagify

Imagify — еще один высоко оцененный вариант сжатия изображений на вашем сайте WordPress. Его бесплатная опция позволяет оптимизировать до 25 МБ изображений каждый месяц, но вы можете получить до 1 ГБ, подписавшись на премиум-план, начиная с $ 4,99 / месяц. Различные режимы сжатия доступны в зависимости от ваших потребностей, и вы можете создавать резервные копии исходных изображений, чтобы вы могли легко восстановить изображения в исходную версию, если не удовлетворены результатами процесса оптимизации.

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

Добавить комментарий