Оптимизируйте изображения на 300% в WordPress с помощью этих 18 бесплатных инструментов и плагинов

чатупорн / stock.adobe.com

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

Но за использование изображений в WordPress приходится платить. По данным The Fiscal Times:

«Средний размер веб-сайта сейчас составляет 2,1 МБ по сравнению с 1,5 МБ два года назад».

Хотя вы можете подумать, что это связано с использованием тем, плагинов и скриптов с высокой нагрузкой, на самом деле изображения являются основным виновником, когда дело доходит до отнимания пропускной способности и места на сервере. В частности, The Fiscal Times сообщила, что изображения в среднем занимают 1312 из 2087 КБ на веб-сайтах.

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

В этом руководстве по оптимизации изображений будет рассмотрено следующее:

• Почему вам следует оптимизировать изображения для WordPress
• Как оптимизировать изображения без потери качества перед их загрузкой в ​​WordPress
• Лучшие бесплатные онлайн-инструменты для оптимизации изображений
• Лучшие бесплатные плагины оптимизатора изображений для WordPress

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

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

Возможно, вы не используете быструю тему WordPress.

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

Возможно, ваш сайт недостаточно безопасен и заражен вредоносным ПО.

Возможно, оптимизация скорости, такая как минификация JavaScript и CSS, еще не реализована.

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

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

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

Ответ на этот вопрос, конечно же, «да».

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

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

1. Физический размер : это то, как изображение (размеры) представлено на веб-сайте.
2. Размер файла : сколько байтов данных потребляет файл в исходном состоянии.
3. Разрешение : относится к количеству пикселей, существующих в изображении. Чем выше разрешение, тем четче изображение.
4. Тип файла : это относится к формату, в котором сохранен ваш файл. Когда мы говорим об изображениях, мы обычно имеем в виду PNG, JPG, SVG и GIF.

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

Физический размер

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

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

Размер файла

Размер файла изображения является важным фактором, когда речь идет об оптимизации вашего сайта по скорости. WordPress рекомендует, чтобы изображения большего размера имели размер от 60 до 100 КБ, а изображения меньшего размера — не более 30 КБ.

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

Разрешение

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

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

Тип файла

Не существует жесткого правила, согласно которому вы всегда должны использовать JPG вместо PNG или что SVG — это современный стандарт, который мы все должны соблюдать. Обычно тип файла, который вы используете, зависит от того, что вы собираетесь с ним делать.

JPG

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

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

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

Базовый JPG — это файл, состоящий из одного слоя. Это означает, что при использовании в WordPress не загружается ничего, кроме плоского изображения. Таким образом, если при загрузке страницы произойдет какая-либо задержка, посетители увидят, что изображение медленно заполняет экран сверху вниз.

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

Идеальным выбором здесь является прогрессивный JPG, поскольку он вызовет меньшую нагрузку на ваш сервер (поскольку он не требует одновременной загрузки одного слоя).

PNG

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

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

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

SVG

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

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

гифка

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

9 лучших бесплатных плагинов оптимизатора изображений для WordPress ️

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

Прежде чем мы перейдем к обсуждению плагинов, давайте рассмотрим две встроенные опции, которые WordPress включает в основную CMS.

1. Оптимизатор изображения EWWW

Плагин EWWW Image Optimizer* использует уникальный алгоритм, который позволяет обеспечить сжатие с потерями (как мы говорили ранее о JPG) без ущерба для качества. Другими словами, результаты в конечном итоге больше похожи на сжатие без потерь, хотя вы увидите значительную экономию с точки зрения используемых байтов.

Есть еще несколько интересных особенностей этого плагина, о которых стоит упомянуть:

• Вам не обязательно держать плагин оптимизатора открытым, чтобы он работал. Он будет обрабатывать сжатие в фоновом режиме*, поэтому вы можете работать в другом месте WordPress.
• Этот плагин оптимизирует все медиафайлы, даже если они не находятся в папке «Медиа»*. Сюда входят такие вещи, как значки аватаров, фотографии слайдеров, изображения тем и т. д.
• Массовое сканирование оптимизатором пропустит все файлы, которые уже были сжаты, избавляя ваш сервер от необходимости обрабатывать ненужный запрос для этого файла.

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

1. Сначала установите и активируйте плагин.

2. Затем перейдите на вкладку «Настройки» и найдите новую опцию «EWWW Image Optimizer».

3. Начните с основных настроек:

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

4. Дополнительные настройки следующие:

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

5. Вкладка «Настройки изменения размера» позволяет вам определить правила автоматического изменения размера для файлов, которые считаются слишком большими во время импорта в WordPress:

6. Вы думаете о конвертации изображений, когда они появятся в WordPress?

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

7. Если вы знакомы с изображениями WebP и знаете, что ваши посетители в основном используют Chrome и Opera для доступа к вашему сайту (браузеры, которые их принимают), обратите внимание на следующую вкладку настроек:

8. Завершив настройку параметров плагина, перейдите на вкладку «Медиа» и нажмите « Массовая оптимизация» .

Здесь вы найдете простой инструмент массового сканирования и оптимизации*. Настройте параметры, а затем запустите сканирование.

9. Вывод оптимизированных результатов будет выглядеть следующим образом:

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

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

А еще есть потрясающие отзывы пользователей*. Людям наверняка нравится функциональность и ценность!

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

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

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

• Вам предоставляется 100 кредитов на изображения, которые вы можете использовать бесплатно каждый месяц.
• 1 кредит изображения соответствует 1 файлу изображения.
• Однако с каждым вашим изображением связано как минимум три размера файла (большой, средний и миниатюра), поэтому на самом деле это получается примерно так: 3 кредита изображения соответствуют 1 файлу изображения.

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

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

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

1. Установите и активируйте плагин.

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

3. Общие настройки охватывают основы сжатия изображений:
   • Предпочитаемый вами тип сжатия
   • Включать или нет миниатюры
   • Автоматизированное хранение оригинальных файлов в другом месте на сервере.
   • Удаление метаданных EXIF
   • Автоматическое изменение размера больших файлов до установленного максимального предела.

4. На вкладке «Дополнительно» вы найдете множество настроек оптимизации изображений, которыми вы, возможно, захотите воспользоваться. Сюда входят такие вещи, как:
   • Преобразование из одного типа файла в другой
   • Настройка параметров изображения WebP
   • Добавление PDF-файлов в список типов файлов для оптимизации
   • Автоматизация загрузки новых файлов (вами в WordPress или пользователями во внешнем интерфейсе)

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

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

6. Как только ваши настройки будут готовы, вы можете запустить процесс ShortPixel Bulk на вкладке «Медиа».

Этот инструмент действительно прост в использовании. Сначала решите, хотите ли вы сжать миниатюры. Затем нажмите «Начать оптимизацию» . В этом случае вам нужно будет оставить страницу открытой, чтобы инструмент оптимизатора завершил работу.

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

3. Редактирование СМИ

Если вы зайдете в свою медиатеку в WordPress и выберете изображение (или загрузите новое), вы увидите доступную опцию «Редактировать изображение» .

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

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

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

4. Настройки мультимедиа

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

На вкладке «Настройки» нажмите «Медиа» . Затем вы найдете следующую конфигурацию:

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

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

5. Сжатие и оптимизация изображений Smush

Давайте поговорим о бесплатной версии плагина Smush*.

Помимо нескольких премиальных функций, которые вы получите при покупке членства в плагине WPMU DEV, на самом деле нет большой разницы между бесплатной и премиальной версиями этого плагина. Это фантастика, потому что Smush сам по себе выполняет все, что вам нужно для оптимизации. Интересный факт: WP Smush поставляется с планами WP Buffs! Вот некоторые функции, которые вам понравятся при использовании этого плагина:

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

Вот что вы можете сделать с Smush:

1. Сначала установите и активируйте плагин.

2. Для этого нет необходимости в настройке API. Как только он будет активирован, вы будете перенаправлены в новую папку WP Smush в разделе «Медиа».

3. Вот как будет выглядеть ваша основная панель управления:

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

В правом верхнем углу отображается статистика оптимизации изображений:

• Сколько изображений изменено в размере
• И сколько сжато
• Сколько места вы сэкономили в результате

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

5. Далее вы увидите другие настройки сжатия для удаления данных EXIF ​​и установки ограничений размера файла:

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

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

Первый из них — это плагин WordPress, эквивалентный онлайн-инструменту TinyPNG, о котором я упоминал ранее.

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

Вот как это работает:

1. Установите и активируйте ваш плагин.

2. Когда вы нажмете кнопку «Настройки» под вашим новым плагином, он перенаправит вас в настройки мультимедиа (то же самое, что мы рассматривали ранее). Однако теперь параметры расширились и выглядят следующим образом:

3. Первое, что вас попросят сделать, это создать бесплатную учетную запись в TinyPNG (это простая активация по электронной почте в один клик).

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

5. Также следует обратить внимание на характеристики исходного изображения:

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

6. Как только это будет настроено, вы сможете запустить массовую оптимизацию для всех медиафайлов, которые в настоящее время существуют на вашем веб-сайте и не оптимизированы. Вы найдете это на вкладке «Медиа» в разделе «Массовая оптимизация».

7. Нажмите кнопку и подождите, пока оптимизатор завершит свою работу, прежде чем выйти из экрана.

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

• Сколько изображений на вашем сайте.
• Количество размеров, связанных с каждым изображением.
• Сколько из этих файлов было сжато и насколько.

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

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

Самое замечательное в плагине Imagify Image Optimizer то, что он делает процесс массовой оптимизации ваших изображений очень простым. Как и другие плагины оптимизации изображений, этот выполняет две задачи: во-первых, он массово оптимизирует все изображения, находящиеся в данный момент в вашей папке Media; затем он автоматически оптимизирует изображения на основе заранее заданных вами настроек.

Вот что вам нужно сделать, чтобы начать:

1. Установите и активируйте плагин.

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

3. Как только ваша учетная запись станет активной, вы найдете настройки вашего плагина на вкладке «Настройки». Нажмите на Imagify .

4. Одна из приятных особенностей этого плагина — инструмент визуального сравнения (вы найдете его в трех опциях уровня оптимизации):

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

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

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

• Хотите автоматически оптимизировать каждое импортированное изображение? (Да!)
• Хотите создать резервную копию исходных изображений на своем сервере? (Возможно, нет.)
• Хотели бы вы ограничить максимальный размер файла, чтобы размер файлов большего размера автоматически изменялся? (Определенно.)
• Вы хотите, чтобы плагин выгрузил метаданные EXIF ​​или эта информация понадобится вам позже? (Зависит от того, что вы с ними делаете.)
• Какие размеры изображений вы хотите оптимизировать? (Все они.)

6. Сохраните изменения, а затем вы сможете воспользоваться инструментом «Массовая оптимизация» на вкладке «Медиа».

7. Одним щелчком мыши вы можете запустить массовую оптимизацию:

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

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

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

8. Безумие

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

После установки и активации вы попадете на новую вкладку «Настройки» Imsanity. Вот что вы увидите:

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

Ниже вы найдете возможность массового изменения размера всех изображений, находящихся в настоящее время на вашем сайте WordPress.

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

9. Оптимол

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

• 1 ГБ изображений в месяц (15+ ГБ при обновлении).
• Пропускная способность просмотра 10 ГБ в месяц (100 ГБ в премиум-планах).
• Заполнитель изображения низкого качества (ленивая загрузка промежуточного изображения перед отображением его в полном размере).
• Изменение размера изображения в зависимости от размера устройства/экрана (загружается оптимальная версия для каждого устройства).
• Поддержка Retina и HiDPI с динамическим обнаружением DPR на всех устройствах.
• Легкое отслеживание и мониторинг статистики/результатов с помощью современной информационной панели.
• Поддержка CDN.

1. Установите и активируйте его.
2. Зарегистрируйтесь и проверьте свою электронную почту, чтобы получить ключ API.
3. Сразу после отправки ключа API на панели управления WordPress Optimole начнет оптимизировать все существующие изображения.
4. В настройкахвы можете настроить свои личные предпочтения и активировать/деактивировать нужные вам функции.

Вот как панель управления Optimole выглядит на вашей серверной части WordPress:

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

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

1. Сайты стоковых фотографий

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

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

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

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

2. Программное обеспечение для редактирования фотографий

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

Отрегулируйте высоту или ширину, чтобы изображение изменяло размер в нужном масштабе:

Уменьшите соотношение высоты и ширины и измените размеры по своему усмотрению:

Вместо изменения размера в пикселях вы можете изменить размер в процентах от исходного размера:

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

Теперь давайте быстро посмотрим, что произойдет, если вы измените размер этой фотографии размером 5472 x 3648 (весом 5,7 МБ):

На ширину 3000 пикселей и высоту 2000 пикселей:

Хотя фотография уменьшилась менее чем вдвое, она потеряла более половины своего веса и теперь имеет размер 1,8 МБ.

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

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

Toolur, созданный той же командой, что и ResizeImage (см. ниже), имеет инструмент сжатия CompressImage.

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

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

1. Используйте параметры сжатия от A до E (т. е. сжатие с потерями) для файлов JPG. Используйте параметры сжатия F и G (т. е. сжатие без потерь) для PNG.

2. Установите процент качества изображения на 90 % (в противном случае вы не увидите уменьшения размера файла).

3. При изменении размера JPG выберите «Прогрессивное сжатие».

4. Не вводите никаких значений в строку «Изменить размер». Просто оставьте все как есть, чтобы инструмент мог сосредоточиться на сжатии.

5. Затем нажмите «Сжать изображения» .

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

Несмотря на уменьшение размера файла с 3,8 МБ до 2,1 МБ и снижение качества до 90 %, эти фотографии выглядят практически одинаково.

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

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

Использовать его просто.

1. Загрузите программное обеспечение по ссылке выше и установите его на свой Mac.

2. Откройте приложение ImageOptim.

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

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

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

Если вы ищете что-то действительно простое в использовании, которое поддерживает сжатие как PNG, так и JPG, обратите внимание на ImageSmaller.

Он обещает уменьшить размер файлов ваших изображений до 90% одним нажатием кнопки. Вот как это работает:

1. Найдите файл изображения на своем компьютере.

2. Нажмите кнопку «Загрузить» .

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

4. Нажмите «Загрузить файл» , чтобы получить сжатое изображение.

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

6. JPEGмини

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

Если вас устраивает то, что делает JPEGmini, вам захочется иметь этот инструмент на своей стороне. Он не только обеспечивает изменение размера ваших файлов JPG до 80 %, но и интегрируется с Photoshop и Lightbox и действует как автоматическое изменение размера любых изображений, которые вы добавляете в программное обеспечение для редактирования фотографий.

Вот что вы можете сделать с этим:

1. Перейдите по ссылке выше, загрузите и установите приложение.

2. Подпишитесь на бесплатную пробную версию и воспользуйтесь возможностью бесплатного изменения размера первых 100 изображений.

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

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

4. Перетащите в приложение столько файлов, сколько захотите.

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

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

7. Изменить размер изображения

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

Вот как вы используете это:

1. Нажмите кнопку «Загрузить изображение» . Вы можете использовать это для изменения размера JPG, PNG или GIF.

2. Чтобы изменить размер, прокрутите вниз до пункта 4 «Изменить размер изображения».

3. Как я объяснял ранее, вы можете изменить размер изображений, сохраняя пропорции (сохраняя масштаб), или вы можете изменить пропорции и создать собственный размер.

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

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

Вот исходный файл и файл с измененным размером:

8. Крошечный PNG

Хотя в названии есть «PNG», вы можете изменить размер PNG и JPG с помощью бесплатного онлайн-инструмента оптимизации TinyPNG.

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

Что касается использования этого, это требует двух шагов:

1. Перетащите свои изображения в онлайн-приложение.

2. Загрузите полученные сжатые изображения после завершения работы инструмента.

Одна из этих фотографий весит 3,2 МБ. Другой — 5,8 МБ. Можете ли вы сказать, что больше?

9. Оптимизатор изображения Kraken

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

Бесплатный онлайн-инструмент оптимизации изображений Kraken можно использовать для сжатия изображений размером менее 1 МБ. Если вы надеетесь на более надежные возможности этого инструмента, вы можете перейти на Kraken PRO, который откроет возможности изменения размера и позволит загружать фотографии размером до 32 МБ.

Вот как работает бесплатная версия:

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

2. Существует три варианта оптимизации изображения: с потерями, без потерь и экспертная. По словам Кракена:

• Они рекомендуют метод сжатия с потерями. В среднем он сжимает изображения до 60%, но говорят, что может быть и до 80 или 90%.
• Без потерь вы также получите максимальную экономию при сжатии, но сохраните метаданные EXIF ​​(что означает, что результаты могут быть не такими маленькими, как с потерями).
• Expert дает вам возможность настроить степень сжатия, а также сохранять или нет данные EXIF.

3. Третий вариант (изменение размера изображения) недоступен в бесплатном инструменте.

4. После настройки параметров нажмите кнопку «Загрузить» или перетащите изображение в Dropbox.

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

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

Чтобы у вас была основа для сравнения, это разница между сжатием с потерями (вверху) и без потерь (внизу) одного и того же изображения:

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

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

Подведение итогов

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

• Ваши изображения в основном имеют формат JPG, для которого лучше использовать сжатие с потерями? Или это в основном PNG, которые должны использовать сжатие без потерь?
• Сколько изображений вы хотите изменить размер и/или сжать одновременно?
• Ваши изображения превышают 5 МБ и требуют большей вычислительной мощности, чем доступные более простые инструменты сжатия или изменения размера?
• Хотите ли вы контролировать степень сжатия и потери качества в результате использования этих инструментов? Или вы предпочитаете полагаться на настройки автоматического управления по умолчанию?
• Вам нужна помощь в удалении метаданных EXIF ​​или вы хотите, чтобы они остались на месте?
• У вас есть время самостоятельно оптимизировать изображения или вы предпочитаете автоматизировать все это?

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

Хотите оставить свой отзыв или присоединиться к обсуждению?Добавляйте свои комментарии в Twitter.

Сохранить Сохранить

Сохранить Сохранить

Сохранить Сохранить

Сохранить Сохранить

Сохранить Сохранить