Оптимизация и сжатие изображений в WordPress: пошаговая инструкция со всеми инструментами
Обнуление в панели
Первый шаг – обнулим параметры изображений в панели 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, от момента определения размеров до поиска. Надеюсь статья стала полезной. Успехов!
Пожалуйста, оцените материал:
Здравствуйте. Может подскажете решение проблемы? Столкнулся с таким, не побоюсь этого слова, идиотизмом: двигло загружает в библиотеку исходный файл, при этом делает кучу копий и ресайзов, которые нахрен не нужны, вместе с исходником семь штук в сумме. Всё бы ничего, но исходник весит порядка 3 мегабайт, что не есть комильфо, а куча его бесполезных копий жрут айноды и место на диске сервера. При этом, во-встроенной галерее вордпресса, ссылки на медиа-файлы идут именно на исходный файл, огромным разрешением и весом, который и в экран то не поместится. Если настроить удаление исходников – то ссылки из галереи ведут на 404 страницу. А сделать так, чтобы ссылки на медиа-файлы из галереи вели на другие размеры – я так и не нашёл.
Отсюда вполне конкретный вопрос: можно ли заставить движок сжимать именно ИСХОДНИКИ файлов, т.к. на них ведут ссылки медиа-файлов из галереи, что-бы те тупо помещались в экране, и не жрали место на диске? В случае же удаления исходников – есть ли способ заставить галерею направлять ссылки на файлы указанных размеров? С учётом того, что создание лишних размеров миниатюр можно просто удалить, и оставить только нужные? Спасибо!
Почти в любом плагине для сжатия картинок есть опция сжатия исходного изображения. В данной статье есть пример с TinyPng, там есть опция Resize the original image. Можно установить ресайз для оригинальной картинки.
Я все картинки вручную в фотошопе меняю размер, подрезаю и сохраняю в правильном формате. Это чтобы добиться идеального результата. Удалять исходники конечно нельзя, нужно либо сразу готовить картинки, либо использовать в подобных плагинах ресайз оригинальных картинок.
Относительно настроек плагина TinyPNG, какие приемлемые настройки сжатия (Woocommerce) выбрать для случая если используется замечательный шаблон BONO ????
Bono card – 550×300
Woocommerce thumbnail – 500×640
Woocommerce single – 640x
Woocommerce gallery thumbnail – 100×100
Shop catalog – 500×640
Shop single – 640x?
Shop thumbnail – 100×100
Здравствуйте! Вы советуете мах размер картинки брать по ширине контента. Данную ширину вы находите: “Инструмент подсчитает пиксели и выдаст на экран, в нашем случае 840px. Он будет максимальным, делать больше нет смысла.”
Но, если изменить масштаб в браузере, то изменятся и данные, в нашем случае 840рх. Возникает вопрос – а как корректно найти необходимый размер?