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

1 … 2 … 3 … — ваш потенциальный клиент только что закрыл ваш сайт, потому что он все еще загружается. Звучит знакомо? Я полагаю, вы много раз были этим нетерпеливым и расстроенным посетителем. Я знаю, что был. Вот почему я составил окончательный список вещей, которые вам нужно знать об оптимизации изображений. Это будет долго, но я надеюсь, что вы найдете это достойным прочтения.

Оглавление

• Содержание этой статьи в 3-минутном видео
• Преимущества оптимизации изображения
• Форматы изображений
• Изменение размера изображений перед загрузкой
  • Плагин Imsanity WordPress для автоматического изменения размера изображений
• Сжатие изображений
  • Лучшие онлайн-инструменты для сжатия изображений
    • КрошечныйPNG
    • Оптимизилла
    • Компрессор
    • Имиджоптим
    • ИзображениеМеньше
    • Кракен
    • JPEG.io
    • Статистика PageSpeed
    • Результаты для лучшего онлайн-инструмента сжатия
    • Лучший онлайн-инструмент сжатия для файлов JPEG
    • Лучший онлайн-инструмент сжатия для PNG
    • Лучший онлайн-инструмент для сжатия изображений в целом
  • Лучшие плагины WordPress для сжатия изображений
    • WP Смуш (бесплатная версия)
    • Сжатие изображений JPEG и PNG с помощью TinyPNG
    • ShortPixel
    • Воображай
    • Оптимизатор изображений EWWW (бесплатная версия)
    • Результаты для лучшего плагина WordPress для сжатия изображений
    • Лучший плагин WordPress для сжатия файлов JPEG
    • Лучший плагин WordPress для сжатия PNG
    • Лучший плагин WordPress для сжатия изображений в целом
• Вывод

Содержание этой статьи в 3-минутном видео

Вот очень краткий видео обзор этой статьи. Я все еще рекомендую прочитать, но просто чтобы подразнить вас, начнем:

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

Вы все еще не увлечены оптимизацией изображений? Давайте посмотрим на все преимущества, которые вы получите, если устраните только эту маленькую и тривиальную проблему:

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

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

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

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

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

Я сохраню наше неоптимизированное изображение child.jpg в форматах .jpg и .png . Мы видим, что изображение child-saved-as-jpeg.jpg имеет размер 3,1 МБ, а изображение child-saved-as-png.png — 4,5 МБ. В этом случае изображение PNG стало на 45% больше , чем изображение JPEG, разница, которая просто вытекает из выбора определенного формата изображения. Нет более простого способа сэкономить столько места с минимальными усилиями. Ну, может быть, есть. Давайте посмотрим на следующий шаг.

Изменение размера изображений перед загрузкой

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

На нашем сайте ProteusThemes максимальная ширина изображения составляет 1110 пикселей, поэтому я изменю размер текущего изображения child.jpg шириной 1800 пикселей до 1110 пикселей. В этом случае мы просто увеличили размер с 3,1 МБ до 1,1 МБ, что составляет еще 65% сэкономленного и уменьшенного пространства .

Подсказка: вы можете изменять размер изображений прямо в медиатеке WordPress. Нажмите « Медиа» -> «Выберите изображение» -> «Редактировать изображение» и выберите новые размеры для вашего изображения:

Плагин Imsanity WordPress для автоматического изменения размера изображений

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

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

Теперь, когда мы изучили основы оптимизации изображений, давайте посмотрим, как мы можем улучшить нашу игру. В Интернете можно найти множество онлайн-инструментов для сжатия изображений и даже плагины для WordPress , которые уменьшат размер вашего изображения. Но здесь мы должны быть осторожны, некоторые инструменты почти не будут иметь никакого значения, а некоторые настройки разрушат наше изображение и сделают его бесполезным. Итак, как найти идеальный баланс? Не волнуйтесь, на момент написания (июнь 2017 г., обновление 2018 г.) мы протестировали все самые популярные онлайн-инструменты/сервисы и плагины WordPress для оптимизации изображений и выбрали лучшие из них.

Для проведения теста мы использовали 3 разных изображения в формате JPEG и 1 изображение в формате PNG.

Все 3 изображения в формате JPEG взяты из Unsplash авторами Ми Фамом, Бризером, Дениз Чан и Нико Виртаненом. Они были обрезаны и изменены до 1110 x 624 пикселей для целей тестирования.

Для изображения в формате PNG мы создали собственное изображение с логотипом ProteusThemes и некоторым узором за ним. Как и в случае с тестовыми изображениями в формате JPEG, это также изменено до 1110 x 624 пикселей.

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

Лучшие онлайн-инструменты для сжатия изображений

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

• КрошечныйPNG
• Оптимизилла
• Компрессор
• Имиджоптим
• ИзображениеМеньше
• Кракен
• JPEG.io
• Статистика PageSpeed

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

КрошечныйPNG

TinyPNG был одним из первых инструментов сжатия изображений, которые я использовал, и я до сих пор иногда использую его. Вариантов нет, вы просто загружаете изображения и получаете их в сжатом виде. С помощью этого онлайн-инструмента вы можете массово загружать до 20 изображений размером 5 МБ.

Оптимизилла

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

Компрессор

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

Имиджоптим

ImageOptim — это инструмент с большим количеством настроек. Вы можете выбрать между 3 различными вариантами качества и 3 различными вариантами качества цвета. Мы выяснили, что наилучшие результаты сжатия/качества получаются с настройками по умолчанию. Установите качество на среднее и качество цвета на авто. Что меня больше всего беспокоило в ImageOptim , наряду с немного устаревшим дизайном, заключалась в том, что он экспортирует JPEG, даже если я загружаю PNG . Я отправил Корнелу (создателю ImageOptim) электронное письмо об этой проблеме, и он уже исправил ее.

ИзображениеМеньше

Как и в случае с Compressor , ImageSmaller имеет тот же недостаток. Нет возможности массовой загрузки. Тем не менее, у него один из самых больших ограничений на загрузку — 50 МБ. Если у вас есть большие файлы для оптимизации, ImageSmaller может быть подходящим инструментом для вас.

Кракен

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

JPEG.io

JPEG.io — бесплатная версия того же инструмента, что и Kraken . Он имеет те же возможности сжатия, но, как говорит нам URL-адрес веб-сайта, он предназначен только для файлов JPEG.

Статистика PageSpeed

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

Результаты для лучшего онлайн-инструмента сжатия

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

Лучший онлайн-инструмент сжатия для файлов JPEG

Большинство инструментов сжимали наши тестовые файлы JPEG примерно на 80% . Давайте посмотрим на наше изображение child.jpg . Мы начали с изображения размером 3,1 МБ, а после изменения размера и сжатия наше изображение стало размером всего 165 КБ, что означает уменьшение размера на 95% . Вот это разница! Нам удалось получить такие же результаты с помощью Compressor и ImageOptim . Итак, похоже, у нас есть два победителя.

Лучший онлайн-инструмент сжатия для PNG

Для нашего теста PNG мы получили в среднем 50% уменьшение размера со всеми инструментами. Тем не менее, Optimizilla была немного лучше, чем остальные, с уменьшением размера нашего изображения pt-logo.png на 56% .

Лучший онлайн-инструмент для сжатия изображений в целом

Даже если бы Optimizilla не была лучшим инструментом сжатия для файлов JPEG, я бы рекомендовал его как лучший инструмент сжатия, доступный в настоящее время в Интернете. Файлы JPEG, сжатые на 79 %, по-прежнему великолепны, и вы можете сделать это еще выше с помощью простой настройки качества на странице. У него также есть возможность массовой загрузки, где Compressor отсутствует, и более надежная загрузка, чем ImageOptim , где все изображения экспортируются в формате JPEG, даже если среди них есть PNG. Из-за всего этого я думаю, что Optimizilla заслуживает звания лучшего онлайн-инструмента для сжатия изображений.

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

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

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

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

Я протестировал следующие плагины:

• WP Смуш (бесплатная версия)
• Сжатие изображений JPEG и PNG от TinyPNG
• ShortPixel
• Воображай
• Оптимизатор изображений EWWW (бесплатная версия)

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

WP Смуш (бесплатная версия)

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

Сжатие изображений JPEG и PNG с помощью TinyPNG

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

ShortPixel

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

Воображай

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

Оптимизатор изображений EWWW (бесплатная версия)

EWWW Image Optimizer был единственным плагином, который выдавал мне некоторые ошибки. Во-первых, я попробовал это на своем собственном хостинге и получил ошибку, что EWWW Image Optimizer требует exec() или ключ API. В следующий раз, когда я попробовал плагин на моем локальном сайте разработки WordPress, я получил сообщение об ошибке, что мне не хватает pngout. Я следовал инструкциям по его установке, и плагин наконец был готов к тестированию. Поскольку я тестировал бесплатную версию, был только вариант без потерь, что не привело к лучшим результатам. Как и в случае с WP Smush, я также протестирую профессиональную версию EWWW Image Optimizer в следующем обновлении статьи, и мы увидим, будет ли она работать лучше.

Результаты для лучшего плагина WordPress для сжатия изображений

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

Лучший плагин WordPress для сжатия файлов JPEG

ShortPixel стал победителем со средним сжатием 84% . Так же, как Compressor и ImageOptim в категории лучших онлайн-инструментов для сжатия. Вторым лучшим плагином был Imagify со средним сжатием 70% . Я заявляю, что ShortPixel на данный момент является абсолютным победителем в этой категории.

Лучший плагин WordPress для сжатия PNG

Лучший плагин для сжатия PNG называется Compress JPEG & PNG images от TinyPNG со сжатием 56% . Интересно, что лучший результат, опять же, такой же, как и в категории лучшего онлайн-инструмента сжатия. Тем не менее, другие плагины здесь немного более конкурентоспособны со сжатием около 50% .

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

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

Вывод

Это было долгое путешествие, верно? Тем временем нам удалось сжать наше изображение child.jpg до 95% . Ваш веб-сайт может работать намного быстрее, если вы будете следовать этим трем простым шагам . Повторим их еще раз:

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

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

У вас больше не должно быть оправданий тому, что вы не сжимаете изображения. Есть много инструментов и разных способов сделать это, и мы доказали, что в конце концов оно того стоит. Выберите своего личного победителя для онлайн-сжатия или плагина WordPress и проверьте свой рейтинг Google PageSpeed ​​​​до и после оптимизации. Поделитесь информацией о скорости вашего сайта и улучшении оценки в нашем разделе комментариев. Я также хотел бы знать, помогла ли вам эта статья с оптимизацией изображения и что вы думаете об этом.