Оптимизация изображений в WordPress: удаляем лишние и сжимаем остальные. Основы создания SEO-оптимизированных изображений для WordPress

(Последнее обновление: 21.10.2017)

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

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

OptiPic - автоматическое сжатие изображений без потери качества


Сервис OptiPic для сжатия изображений

Автоматизировать в WordPress уменьшение/сжатие изображений можно с помощью плагина от сервиса OpticPic:

Простое подключение OptiPic к сайту - занимает буквально 2 минуты;
- Сервис работает на полном автопилоте - постоянно мониторится появление новых (еще не сжатых) изображений;
- Работа с OptiPic безопасна - перед оптимизацией каждого изображения автоматически создается исходная копия;
- Есть функция уменьшения размера изображений (resize);
- Есть партнерская программа, по которой можно зарабатывать до 40% от привлеченных клиентов;
- Сервис поддерживает не только сайты на WordPress, но и любые сайты на php (любая CMS, фреймворк или даже самописный сайт).

Подключить плагин WordPress для автоматического сжатия изображений можно на сайте OptiPic.io . После установки плагина WordPress, уменьшение картинок будет проходить в автоматическом режиме. Модуль найдет доступные картинки и оптимизирует их размер без потери качества. Плагин для сжатия картинок работает с большинством популярных форматов изображений. Видеоинструкция по установке и настройке модуля - https://www.youtube.com/watch?v=Qz6pJDfsKX8 .


Оптимизация JPEG и PNG изображений автоматически с TinyPNG

Узнаёте картинку? Да, вы правы, данный модуль от известного и популярного онлайн сервиса TinyPNG. Теперь и для пользователей ВордПресс - оптимизация изображений на сайте автоматически с TinyPNG. Этот плагин автоматически оптимизирует ваши изображения путем интеграции с сервисом сжатия изображений TinyJPG и TinyPNG. В среднем изображения JPEG сжимаются на 40-60%, а изображения в формате PNG на 50-80% без видимой потери качества. Ваш сайт будет загружаться быстрее для ваших посетителей и вы сэкономите дисковое пространство и пропускную способность вашего хостинга! 😉

Для того, чтобы начать работать с Compress JPEG & PNG images, первым делом установите и активируйте плагин, стандартным способом, через поиск по плагинам в админпанели. Затем, вам нужно получить бесплатный ключ API. Зайдите в раздел Настройки - Медиафайлы:


Настройки медиафайлов - PNG and JPEG compression

Кликнете на ссылку сервиса, вы перейдёте на сайт, где вам нужно будет ввести свое имя и адрес электронной почты, чтобы получить ваш ключ. Далее, введёте в поле свой "золотой ключик", выберите какие размеры изображений сжимать и "Сохраните изменения". После этого, вы можете сжать массово все загруженные картинки (раннее) на сайте или сжать их по отдельности. 😛


Сжатие изображений на сайте WP

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


Prizm Image - плагин для сжатия изображений

Плагин Prizm Image позволяет уменьшить размер файла ваших изображений, до 70% при сохранении разрешения и качества изображения. Не только Google и многие другие веб-эксперты рекомендуют обязательно оптимизировать веб - изображения, чтобы повысить производительность сайта. Google нравится быстрая загрузка страниц сайта и поэтому не стоит этим пренебрегать. Данный инструмент сжимает картинки в формате JPEG, PNG и GIF. Для начала работы с данным инструментом, вам после установки и активации, также нужно будет получить бесплатный ключ API, кликнув по ссылке сервиса:


Настройка плагина Prizm Image

После ввода ключика, можно выбрать качество изображений высокое - среднее (по умолчанию сбалансированный) или низкое. И так далее.

Как работать с Prizm Image. Есть три способа оптимизации изображения с помощью пользовательских настроек. Автоматическая оптимизация изображения которое вы добавляете на сайт (если не отключена функция в настройках - Не обрабатывать при загрузке); Индивидуально в WordPress библиотеке мультимедиа, оптимизировать любое выбранное изображение; Массово оптимизировать все изображения в библиотеке мультимедиа.


Optimus - сжатие изображений автоматически

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


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

ShortPixel Image Optimiser является инструментом сжатия изображения без потери качества


Плагин для сжатия картинок - ShortPixel Image Optimiser

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


Плагин ShortPixel - личный ключ API Настройки ShortPixel Оптимизатор изображения

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

Оптимизации файлов изображений с Smush.it для WordPress


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

Судя по количеству пользователей, на данный момент 1 178 159, установившие модуль WP Smush.it, этот инструмент сжатия картинок является самым популярным и востребованным. Выходит, он самый лучший в своём роде. WP Smush.it тщательно сканирует каждое изображение, которое вы загружаете - или уже добавлены на ваш сайт и уменьшает размер (вес) файла без потери качества. Формат картинок для сжатия JPEG, GIF и PNG. Существует версия бесплатная и PRO, но и базовой будет достаточно. После установки и активации plugin настроить его можно в разделе Медиафайлы - подраздел WP Smush.it:

WP Smush.it настройка плагина

Здесь, сложного ни чего нет. Нужно указать автоматически сжимать файлы изображений при загрузке на сайт или нет. Можно нажав кнопку массово оптимизировать все ваши фото которые есть на вашем сайте. Вот в принципе и всё. Теперь понятно, почему он так популярен, минимум настроек и прост в управление, без всяких ключей и регистраций. Попробовал применить к одному изображению на своём сайте и вот какой результат выдал: снижение на 1.0% (251 B) и качество, по моему, такое же осталось. 😯 А представляете если и оптимизировать 100 фотографий, это же сколько места можно освободить на хостинге и плюс скорость загрузки сайта возрастёт. Во, как! Google и Яндексу обязательно понравится такой сайт или блог.

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

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

Давайте разберемся в процессах оптимизации, и методах их применения на веб-страницах.

Веб-страницы и изображения

Визуально привлекательные сайты содержат в основном изображения, но большинство картинок имеют очень большие размеры. Они составляют основную часть общего размера страницы или «веса страницы». Согласно статистике на 2016 год, около 64,3% содержимого – это изображения.

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

Основная часть содержимого веб-сайта состоит из изображений, и большинство из них не оптимизировано для Интернета. Поисковые системы на основе картинок могут генерировать дополнительный трафик для вашего сайта, но при условии, что они оптимизированы. Согласно последним данным, 39% людей покидают сайт, если он медленно загружается. Это влияет на картину поведенческих факторов – растут отказы, и соответственно, сайт падает в выдаче. Медленно, но верно. Поэтому создание веб-оптимизированных изображений необходимо для снижения времени загрузки страницы.

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

Ancestory.com показал 7% -ный положительный рост конверсий. Это было вызвано сокращением времени рендеринга веб-страниц на 68%, страниц на 46%, и времени загрузки на 64%.

AliExpress сократил время загрузки своих страниц на 36%. Их заказы выросли на 10,5%, а коэффициенты конверсии - на 27%.

Типы изображений и форматы

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

Существует несколько форматов графических файлов:

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

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

Gif - формат gif плохо масштабируется. Он используется для небольших изображений, таких как значки, кнопки и т. д.

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

Bmp – BMP-файлы огромны по размеру и, как правило, неровные.

Что такое оптимизация изображения?

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

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

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

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

Пропускная способность : использование тяжелых изображений требует увеличения нагрузки на пропускную способность.

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

Как измерить время загрузки страницы?

Быстрая загрузка сайта обеспечивает положительный пользовательский опыт. Для измерения и анализа времени загрузки страницы доступно несколько инструментов. Такие инструменты, как PageSpeed Insights, Pingdom Speed Speed Test и YSlow, измеряют производительность страницы. Они не только измеряют время загрузки страницы веб-сайта, но и дают советы по улучшению.

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

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

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

Методы оптимизации изображений

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

Существует множество методов и алгоритмов для создания оптимизированных изображений.

Ручные методы

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

Photoshop предлагает несколько вариантов сжатия размера изображения, сохраняя при этом качество. Диалоговое окно «Сохранить для Web и устройств» может сравнивать исходное изображение с другими вариантами сжатия.

Есть также плагины, такие как «JPEG XR», «Инструменты текстур NVIDIA» и «Экспорт PNG», которые расширяют возможности Photoshop. Продвинутые пользователи могут попробовать использовать их.

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

Автоматизированная крупномасштабная оптимизация

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

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

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

Общие методы оптимизации

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

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

Уменьшите качество изображения , сжав его.

Используйте адаптивные изображения , созданные с помощью WordPress. В редакторе можно управлять размерами - Миниатюра, Средний, Полный размер и т. д.

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

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

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

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

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

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

Как добавить Alt-теги к изображениям в WordPress

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

Добавление тегов Alt для существующих изображений в WordPres

Шаг 1: Выберите страницу для редактирования и опцию «Редактировать страницу».

Шаг 2: Выберите изображение, для которого нужно прописать Alt.

Шаг 3: Нажмите кнопку «Изменить».

Шаг 4: Откроется панель «Детали изображения».

Шаг 5: Пропишите нужные текст в поле «Alt».

Шаг 6: Нажмите кнопку «Обновить».

Добавление тегов Alt для новых изображений в WordPress

Шаг 1: Выберите опцию «Add Media» на вкладке «Добавить новую страницу» или «Редактировать страницу».

Шаг 2: Выберите изображение, которое нужно добавить.

Шаг 3: Панель " Подробности" открывается справа.

Шаг 4: Отредактируйте поле «Alt».

Шаг 5: Нажмите «Вставить в страницу».

SEO-оптимизированные изображения: использование плагинов WordPress

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

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

В премиум-версии есть поддержка изображений товара WooCommerce.

SEO Image Optimizer

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

SEO Friendly Images

Плагин SEO Friendly Images позволяет автоматически вставлять заголовок ALT. Функции плагина могут использоваться для всех изображений.

PB SEO Friendly Images

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

Вывод

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

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

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

Другой вариант сценария – сайт, специализирующийся на продаже товаров. Например, вы продаете мебель через интернет-магазин WooCommerce. Вы наняли профессионального фотографа, чтобы сделать отличные изображения всех ваших товаров. Вы даже установили зуммер-расширения, позволяющие клиентам рассматривать детали ваших товаров с увеличением. В этом случае вам не нужны данные EXIF, но вы всё же хотите, чтобы детали ваших товаров были хорошо видны при увеличении!

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

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

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

1. EWWW Image Optimizer

Плагин EWWW “the Hammer” Image Optimizer пользуется огромным успехом. Он имеет стандартную и “облачную” версии и может похвастаться более чем 100 000 закачек.

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

2. Kraken Image Optimizer

Плагин Kraken “the Shipwrecker” Image Optimizer – “профессиональный” способ автоматизировать процесс сжатия ваших изображений. Этот плагин WordPress может похвастаться более чем 4000 закачек. Он позволяет выделить на сервере область для загрузки ваших изображений в свой сервис, после чего вы сможете переписать туда свою медиа-библиотеку с оптимизированными изображениями.

3. Compress JPEG & PNG images

Это ещё один плагин, работающий по принципу “программное обеспечение как сервер”. Он является самым “молодым” в этом списке. Выпущенный в начале февраля 2015 года, он уже имеет тысячи закачек. Несмотря на название, он без потерь оптимизирует как файлы PNG, так и файлы JPG.

4. WP Smush

Честно говоря, это не самый лучший плагин. Во-первых, в бесплатной версии плагина можно оптимизировать только картинки размером меньше 1 Мб. Даже в премиум версии можно оптимизировать картинки размером только до 5 Мб. Во-вторых, качество сжатия, которое он обеспечивает, ничуть не лучше, чем у EWWW.

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

5. ShortPixel Image Optimizer

ShortPixel Image Optimizer – ещё один новичок. О нём пока трудно сказать что-либо определённое.

Сравнительные результаты плагинов

На форуме уже было сравнение эти плагины и поэтому привету выдержку из той темы:

Приведём так же результаты скорости загрузки изображений в медиа-библиотеку. Было загружено 5 изображений общим объёмом 43.6 Мб.

  • EWWW Image Optimizer = меньше 5 минут. Результаты были одинаковыми как с метаданными, так и без них.
  • Kraken Image Optimizer = примерно 7 минут.
  • TinyPNG = 10 минут.

По поводу EXIF-данных

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

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

Какой лучше платный или бесплатный плагин

Описанные здесь плагины различаются по своей стоимости.

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

TinyPNG – данный плагин предоставляет возможность бесплатной оптимизации для 500 изображений в месяц. Однако пользователям WordPress нужно иметь в виду, что для каждой загруженной картинки в WordPress генерируется три изображения (эскизы, средние, большие). Это значит, что вместо 500 снимков в месяц вы получаете лишь 160. Также плагин содержит множество картинок для блоггеров. TinyPNG – не очень дорогой плагин.

Kraken – самый дорогой из трёх вариантов. Но тут есть несколько важных моментов. Во-первых, он имеет “микроуровень”, то есть $5/месяц за 500Мб изображений. Обратите внимание, что это ограничение касается размера данных, а не изображения. Во-вторых, Kraken – это больше, чем просто оптимизатор изображений. В Pro версии вам будет доступно облачное хранилище на сервере, куда вы сможете поместить резервные копии ваших изображений, которые вы оптимизировали через веб-интерфейс.\

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

Заключение

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

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

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

  1. Ограничить размер больших изображений, которые загружают с Imsanity .
  2. Автоматически оптимизировать эти изображения с помощью TinyPNG.
  3. Убедиться, что эти изображения являются SEO-дружественными SEO Friendly Images .
  4. Организовать эти изображения, используя библиотеку Enhanced Media Library .
  5. Сделать картинки адаптивного размера по размеру экрана, используя RICG Responsive Images .

Естественно, в пункте 2 можно поменять TinyPNG на EWWW или Kraken, кому что больше нравится.

После изучения темы в интернете оказалось что в сентябре 2017 года 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 %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.*) $1.webp


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 полностью снял все претензии к изображениям.

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

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

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

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


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

    Lazy Load – это один из самых простых в настройке плагинов. Просто установите его и активируйте.Он ускоряет загрузку сайта, при этом, не создавая лишнюю нагрузку на сервер.

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


  4. . HTTP 1.0 позволяет устанавливать до двух соединений с одного домена. WP-PLS создает дополнительные поддомены, что позволяет скачивать из них файлы параллельно. Браузеры получают больше хостов для загрузки контента. Это позволяет скачивать одновременно больше файлов, и ваш сайт работает быстрее!
  5. CW Image Optimizer . Хотите уменьшить размеры изображения без потери качества? Эта работа для плагина Image Optimizer. Хотя он не так прост в установке и настройке. Также CW Image Optimizer позволяет массовую обработку, если у вас на сайте есть много изображений, которые нужно оптимизировать.


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


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


  8. WP Smush.it . Плагин, который использует сервисы Smush.it Yahoo, чтобы оптимизировать ваши изображения и уменьшать их размер. Smush.it – довольно популярный плагин, он не нуждается в дополнительной настройке.

    Просто установите и активируйте его. После чего Smush.it будет оптимизировать каждую загружаемую картинку автоматически. Также существует возможность обработки сразу нескольких изображений.


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


Перевод статьи «9 WordPress Plugins to Improve Images Performance » был подготовлен дружной командой проекта .

Хорошо Плохо