Amfus & Ammf

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

Сообщества
Ускоряем WordPress оптимизацией изображений 🚀

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

5 min read

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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


Протагонист этого блога. С 2009 года я занимаюсь изучением способов заработка. А с 2016 веду и развиваю кибер холдинг AMMF.

mdwit@ammf.ru

Оставьте комментарий