Обнуление в панели
Первый шаг – обнулим параметры изображений в панели WordPress. Заходим в админку в раздел Настройки > Медиафайлы.
- Открываем медиафайлы в панели WordPress
- Обнуляем средние и крупные интервалы
- Не забываем сохранять
Мы ограничили создание средних и крупных файлов, которые в 90% случаев не используются. Оставляем или меняем параметры миниатюры, если их не используют, то так же обнуляем.
Размеры ширины и высоты
Ширина и высота изображения влияет на вес. Не нужно выставлять большой размер, если объект все равно подстроится под контента. Посмотрим, как определить максимальную ширину картинки на WordPress. На области контента нажимаем правой кнопкой мыши, выбираем «Просмотреть код».
Откроется инструмент проверки кода сайта, выделяем область, в которой будут располагаться изображения, у нас это контент, смотрим цифру.
- Находим блок, отвечающий за вывод контента на сайте
- Синим выделился объект сайта
- Инструмент подсчитает пиксели и выдаст на экран, в нашем случае 840px. Он будет максимальным, делать больше нет смысла.
Лучший бесплатный плагин Tiny png
Отличным автоматизированным решением является бесплатный плагин оптимизации изображений Tiny png. Находим и устанавливаем через админку стандартным поиском .
После установки переходим Настройки > Compress JPEG & PNG images, если нет аккаунта на данном сервисе, то регистрируем, вводим имя и почту.
На почту придет письмо активации, нажимаем на синюю кнопку.
Копируем API ключ из панели сервиса.
Вставляем ключ, если автоматическая подстановка не произошла, в соседнее окно в плагине
Ранее обнулили все размеры кроме оригинального и миниатюры. Делаем настройки в таком порядке. Рекомендую сделать оптимизацию новых картинок, когда они начинают загружаться и выставить миниатюры и исходное.
Выбрав 2 галочки, мы скажем плагину – при генерации и оптимизации работаем с двумя видами медиафайлов. Обратите внимание, что в месяц дается 500 сжатий, но мы выбрали два параметра, значит в месяц обработке поддаются 250 элементов. С моими потребностями такого количества хватает, в противном случае оформляется платный тариф.
Спускаемся ниже и находим раздел Original image, отмечаем галочкой, чтобы включить инструмент и выставляем максимальную ширину 840px.
Зайдите в медифайлы в админке, там появится новый раздел Bulk optimization, тут можно с помощью массовой оптимизации обновить хоть 100 изображений за раз.
Если хотим оптимизировать файлы каждого изображения, то заходим в медиафайлы, и напротив каждого элемента появится новая кнопка.
Есть множество дополнений без ограничений, Tiny Png применяет современные технологии в оптимизации изображений не только на WordPress. Сжать картинки можно и на самом онлайн сервисе tiny png.
Существует еще один плагин сжатия изображений wordpress, который понравился тем что нет ограничений по запросам в месяц, но результат работы не дотягивает. Называется Smush и похожий на него EWWW Image Optimizer, отличие в том что ограничения накладываются на функционал, а не на количество.
Настройка без потери качества и размера в фотошоп
Перейдем к методу с помощью программы. Если статья обучающая и нужны снимки экрана, то в таком случае качество можно сделать поменьше ,что даст меньший вес. Если же ваши изображения являются неотъемлемой частью сайта, то на качестве экономить не стоит. Разберу пример оптимизации в программе Fotoshop.
Для начала настроим ширину и высоту по максимальному значению, которое узнали ранее с помощью браузера.
- Нажимаем вкладку Изображение
- Выбираем пункт размер
- В появившемся окне предел превышен и составляет 945px, меняем на 840
Теперь сжимаем качество, загружаем изображение в программу и нажимаем Файл > Сохранить для Web.
Смотрим на настройки качества и уменьшаем, пока не начнутся искажения.
Вес исходного файла 160 Кб, смотрим цифру после сжатия 40 Кб (в нижнем левом углу), в четыре раза сократили размер без потери качества.
Важно понимать что не у всех пользователей интернета есть все кодеки изображений, не стоит преобразовывать файлы в более современные форматы, а использовать стандартные jpeg или png.
Прописываем alt и подпись в WordPress
Еще одним параметром оптимизации является SEO. Тут есть только два пункта атрибут ALT и подпись. В современных реалиях больше ценится околокартиночный текст. Для того чтобы оптимизировать картинку в WordPress нажимаем знак карандаша.
В следующем окне заполняем поле ALT и подпись. Не дублируем надписи, в каждом поле пишем уникальный текст, соответствующий содержанию изображения.
Если предпочитаете больше видео, чем текст, то смотрите мой видеоролик.
Мы разобрали все аспекты оптимизации картинок для CMS WordPress, от момента определения размеров до поиска. Надеюсь статья стала полезной. Успехов!
