Оптимизация и сжатие изображений в WordPress: пошаговая инструкция со всеми инструментами

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

Обнуление в панели

Первый шаг – обнулим параметры изображений в панели WordPress. Заходим в админку в раздел Настройки > Медиафайлы.

Стираем базовые значения
Обнуление величин в админке WP
  1. Открываем медиафайлы в панели WordPress
  2. Обнуляем средние и крупные интервалы
  3. Не забываем сохранять

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

Размеры ширины и высоты

Ширина и высота изображения влияет на вес. Не нужно выставлять большой размер, если объект все равно подстроится под контента. Посмотрим, как определить максимальную ширину картинки на WordPress. На области контента нажимаем правой кнопкой мыши, выбираем «Просмотреть код».

Инструмент просмотреть код
Выделяем область контента

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

Вывод основного контента
Блок вывода текста
  • Находим блок, отвечающий за вывод контента на сайте
  • Синим выделился объект сайта
  • Инструмент подсчитает пиксели и выдаст на экран, в нашем случае 840px. Он будет максимальным, делать больше нет смысла.

Лучший бесплатный плагин Tiny png

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

Как выглядит tiny в поиске
Модуль Tiny

После установки переходим Настройки > Compress JPEG & PNG images, если нет аккаунта на данном сервисе, то регистрируем, вводим имя и почту.

Быстрая регистрация в плагине
Регистрация на сервисе

На почту придет письмо активации, нажимаем на синюю кнопку.

Активация на почте
Активация аккаунта

Копируем API ключ из панели сервиса.

Копируем апи ключ
API ключ

Вставляем ключ, если автоматическая подстановка не произошла, в соседнее окно в плагине

Количество бесплатных изменений
Успешное обновление подписки tinypng

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

Основные настройки tiny png
Настройка плагина

Выбрав 2 галочки, мы скажем плагину – при генерации и оптимизации работаем с двумя видами медиафайлов. Обратите внимание, что в месяц дается 500 сжатий, но мы выбрали два параметра, значит в месяц обработке поддаются 250 элементов. С моими потребностями такого количества хватает, в противном случае оформляется платный тариф.

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

Обрезка и масштабирование
Сохранение настроек

Зайдите в медифайлы в админке, там появится новый раздел Bulk optimization, тут можно с помощью массовой оптимизации обновить хоть 100 изображений за раз.

Массовая оптимизация
Массовое сжатие изображений

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

Библиотека картинок
Через библиотеку

Есть множество дополнений без ограничений, Tiny Png применяет современные технологии в оптимизации изображений не только на WordPress. Сжать картинки можно и на самом онлайн сервисе tiny png.

Существует еще один плагин сжатия изображений wordpress, который понравился тем что нет ограничений по запросам в месяц, но результат работы не дотягивает. Называется Smush и похожий на него EWWW Image Optimizer, отличие в том что ограничения накладываются на функционал, а не на количество.

Настройка без потери качества и размера в фотошоп

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

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

Где находятся метрики картинки
Ширина в фотошопе
  1. Нажимаем вкладку Изображение
  2. Выбираем пункт размер
  3. В появившемся окне предел превышен и составляет 945px, меняем на 840

Теперь сжимаем качество, загружаем изображение в программу и нажимаем Файл > Сохранить для Web.

пункт сохранение для WEB
Инструмент сохранить для WEB

Смотрим на настройки качества и уменьшаем, пока не начнутся искажения.

Меняем качество
Уровень качества

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

новое значение размера в фотошопе
Новое значение размера

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

Прописываем alt и подпись в WordPress

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

Раздел сжатия в Tiny Png
Панель плагина по сжатию картинок

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

alt у картинок
Проставляем alt и подпись

Если предпочитаете больше видео, чем текст, то смотрите мой видеоролик.

Мы разобрали все аспекты оптимизации картинок для CMS WordPress, от момента определения размеров до поиска. Надеюсь статья стала полезной. Успехов!

Получай полезные материалы удобным способом!
Добавить комментарий

Ntrcn