WordPress: оптимизация изображений для производительности

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

Что значит оптимизировать изображения?

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

Преимущества форматирования изображений

Во-первых, зачем тебе форматировать изображения? Каковы преимущества? Оптимизация изображений для повышения производительности дает множество преимуществ. Согласно HTTP Archive, по состоянию на ноябрь 2018 года изображения составляют в среднем 21% от общего веса веб-страницы.

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

Вот основные преимущества

• Это улучшит скорость загрузки страницы. Если твоя страница загружается слишком долго, посетители могут устать ждать и перейти к чему-то другому.
• Большие файлы замедляют работу твоего сайта, а поисковые системы хуже ранжируют медленные сайты. Google и Yandex также можут быстрее сканировать и индексировать твои изображения для поиска изображений.
• Создание резервных копий будет быстрее.
• Меньшие размеры файлов изображений используют меньшую полосу пропускания. Сети и браузеры это оценят.
• Требуется меньше места для хранения на твоем сервере (это зависит от того, сколько картинок ты оптимизируешь)

Как оптимизировать изображения для веба и производительности

Основная цель форматирования изображений - найти баланс между минимальным размером файла и приемлемым качеством. Практически все эти оптимизации можно выполнить несколькими способами. Один из самых популярных способов - просто сжать их перед загрузкой. Обычно это можно сделать с помощью таких инструментов, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также могут быть выполнены с помощью плагинов, о которых мы подробнее поговорим ниже.

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

Выбери правильный формат файла

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

• PNG - создает изображения более высокого качества, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
• JPEG - использует оптимизацию с потерями и без потерь. Ты можешь настроить уровень качества для получения хорошего баланса качества и размера файла.
• GIF - использует только 256 цветов. Это лучший выбор для анимированных изображений. Он использует только сжатие без потерь.

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

Качество сжатия и размер

Вот пример того, что может случиться, если ты слишком сильно сжимаешь изображение. Во-первых, используется очень низкая степень сжатия, что обеспечивает наивысшее качество (но больший размер файла). Во втором случае используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Примечание: Размер исходного изображения без изменений составляет 2,06 МБ.

Как видишь, размер первого изображения выше составляет 590 КБ. Это довольно много для одной фотографии! Как правило, лучше всего, чтобы общий вес веб-страницы не превышал 1–2 МБ. 590 КБ уже будет четвертью от этого. Второе изображение явно ужасно выглядит, но оно всего 68 Кбайт. Что ты хочешь сделать, так это найти золотую середину между степенью сжатия (качеством) и размером файла.

Поэтому мы снова взяли изображение со средней степенью сжатия и как ты можешь видеть ниже, качество сейчас хорошее, а размер файла составляет 151 КБ, что приемлемо для фотографии с высоким разрешением. Это почти в 4 раза меньше исходной фотографии с низким уровнем сжатия. Обычно для лучшей производительности более простые изображения, такие как PNG, должны иметь размер менее 100 КБ.

Оптимизация с потерями и оптимизация без потерь (Lossy и Lossless)

Также важно понимать, что ты можешь использовать два типа сжатия: с потерями и без потерь.

С потерями (Lossy) - это фильтр, который удаляет часть данных. Это приведет к ухудшению качества изображения, поэтому тебе нужно быть осторожным с тем, насколько уменьшить изображение. Размер файла можно значительно уменьшить. Ты можешь использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения. В приведенном выше примере используется сжатие с потерями.

Без потерь (Lossless) - это фильтр, сжимающий данные. Он не снижает качества, но требует, чтобы изображения были распакованы, прежде чем их можно будет визуализировать. Ты можешь выполнить сжатие без потерь с помощью таких инструментов, как Photoshop, FileOptimizer или ImageOptim.

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

Инструменты и программы для оптимизации изображений

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

Вот некоторые дополнительные инструменты и программы, которые стоит попробовать:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org

Изменение размера изображений для масштабирования

Раньше было очень важно загружать изображения для масштабирования и не позволять CSS изменять их размер. Однако это уже не так важно, к примеру, WordPress 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Включая доступные размеры изображения в атрибут srcset, браузеры теперь могут выбирать загрузку наиболее подходящего размера и игнорировать другие.

Таким образом, с появлением все большего количества дисплеев HiDPI в настоящее время может быть хорошо найти золотую середину. Скажем, в 2 или 3 раза больше размера столбца или блока твоего сайта, но все же меньше исходного размера. Браузер покажет правильный вариант в зависимости от разрешения устройства.

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

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

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

Очисти медиа-библиотеку

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

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

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

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

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

• Imagify Image Optimizer
• ShortPixel Image Optimizer
• Optimole
• EWWW Image Optimizer Cloud
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• ImageRecycle

Оптимизатор изображений Imagify

Imagify создан той же командой, которая разработала WP Rocket. Он совместим с WooCommerce, NextGen Gallery и WP Retina. Он также имеет функцию массовой оптимизации и ты можешь выбирать между тремя различными уровнями сжатия: нормальным, сильный и ультра. Он также имеет функцию восстановления, поэтому, если ты недоволен качеством, можно будет одним щелчком восстановить и повторно сжать на уровне, который лучше соответствует твоим потребностям.

С помощью этого плагина также можно избавиться от исходного изображения и изменить размер больших изображений.

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

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

ShortPixel Image Optimizer - это бесплатный плагин, который сжимает 100 изображений в месяц и сжимает файлы нескольких типов, включая PNG, JPG, GIF, WebP и даже файлы PDF. Он будет выполнять сжатие изображений как с потерями, так и без потерь и преобразует CMYK в RGB. Он переносит твои изображения и эскизы в облако для обработки, а затем возвращает их на твой сайт для замены оригиналов. Он создает резервную копию исходных файлов, поэтому можно вручную восстановить их, если понадобится. Он будет массово конвертировать файлы галереи. Нет ограничений на размер файла.

Optimole

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

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

Все изображения, сжимаемые Optimole, обслуживаются через быстрый CDN.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud поможет тебе сделать изображения меньше, а твой сайт быстрее и проще при запуске. Без ограничений по размеру и большой гибкости ты можешь использовать настройки по умолчанию или полностью настроить плагин по своему вкусу. Все пользователи EWWW IO могут использовать Bulk Optimizer для сжатия своих существующих изображений или использовать режим списка библиотеки мультимедиа для выбора конкретных изображений для сжатия.

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

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

Optimus Image Optimizer

Оптимизатор изображений Optimus - WordPress использует сжатие без потерь для оптимизации изображений. Без потерь означает, что ты не увидишь потери качества. Он поддерживает WooCoomerce и мультисайты, а также имеет приятную функцию массовой оптимизации для тех, у кого уже есть большие библиотеки мультимедиа. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии ты платишь один раз в год и можешь сжимать неограниченное количество изображений. Если ты объединишь его с их плагином Cache Enabler, ты также можешь погрузиться в изображения WebP, который является новым легким форматом изображений от Google.

WP Smush

WP Smush имеет как бесплатную, так и премиум-версию. Это уменьшит скрытую информацию из изображений, чтобы уменьшить размер без снижения качества. Он будет сканировать изображения и уменьшать их, когда ты загружаешь их на свой сайт. Он также будет сканировать изображения, которые ты уже загрузил, и уменьшать их. Он может одновременно загрузить до 50 файлов. Он сместит типы изображений JPEG, GIF и PNG. Размер файла ограничен 1 МБ.

• Он совместим с некоторыми из самых популярных плагинов медиабиблиотек, такими как WP All Import и WPML.
• Вся оптимизация изображений выполняется с помощью методов сжатия без потерь, что обеспечивает высокое качество изображения.
• Неважно, в каком каталоге ты сохраняешь изображения. Smush находит и сжимает их.
• Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все твои изображения будут изменены до одинаковых пропорций.

TinyPNG (также сжатые файлы JPG)

TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG. Он автоматически сжимает новые изображения и выполняет массовое сжатие существующих изображений. Он преобразует CMYK в RBG для экономии места. Он сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества изображения. У него нет ограничения на размер файла.

ImageRecycle

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

Оптимизация изображений для веб-тематического исследования

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

Несжатые JPG-файлы

Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG, каждый размером более 1 МБ. Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки составило 1,55 секунды, а общий размер страницы - 14,7 МБ.

Сжатые JPG-файлы

Затем мы сжимали файлы JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки сократилось до 476 мс, а общий размер страницы - до 2,9 МБ. Общее время загрузки уменьшилось на 54,88%, а размер страницы уменьшился на 80,27%.

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

Оптимизируя изображения, независимо от того, используется ли это инструмент для редактирования фотографий или плагин WordPress, ты также можешь исправить предупреждение «Оптимизировать изображения», которое появляется в Google PageSpeed ​​Insights (как показано ниже).

Использование SVG

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

• SVG-файлы автоматически масштабируются как в браузерах, так и в инструментах для редактирования фотографий. Это мечта веб-дизайнеров и графических дизайнеров!
• Google индексирует SVG так же, как PNG и JPG, поэтому тебе не нужно беспокоиться о SEO.
• Файлы SVG традиционно (не всегда) меньше по размеру, чем PNG или JPG. Это может ускорить загрузку.

JPG (оптимизированный размер: 81,4 КБ)

PNG (оптимизированный размер: 85,1 КБ)

SVG (оптимизированный размер: 6,1 КБ)

Как ты можешь видеть выше, SVG - это уменьшение размера файла на 92,51% по сравнению с JPG. А если сравнивать с PNG, 92,83%.

Заключение

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

• Если ты используешь плагин WordPress, используй тот, который сжимает и оптимизирует изображения извне на своих серверах. Это, в свою очередь, снижает нагрузку на твой собственный сайт.
• По возможности используй векторные изображения вместе с PNG и JPG.
• Используй CDN, чтобы быстро предоставлять свои изображения посетителям со всего мира.
• Удали ненужные данные изображения.
• Обрежь пустое пространство и воссоздай его, используя CSS для заполнения.
• По возможности используй эффекты CSS3.
• Сохраняй изображения в нужных размерах, но помни, что WordPress теперь поддерживает адаптивные изображения, чтобы обслуживать их, не изменяя их размер с помощью CSS.
• Всегда используй формат файла .ico для твоего значка.
• Используй веб-шрифты вместо размещения текста в изображениях - они выглядят лучше при масштабировании и занимают меньше места.
• Используй растровые изображения только для сцен с большим количеством форм и деталей.
• Уменьши битовую глубину до меньшей цветовой палитры.
• По возможности используй сжатие с потерями.
• Поэкспериментируй, чтобы найти лучшие настройки для каждого формата.
• Если тебе нужна анимация, используй GIF. (но сжимай анимированные GIF-файлы)
• Используй PNG, если тебе нужна высокая детализация и высокое разрешение.
• Используй JPG для общих фотографий и снимков экрана.
• Удали все ненужные метаданные изображения.
• Максимально автоматизируй процесс.
• В некоторых случаях тебе может потребоваться отложенная загрузка изображений для более быстрой визуализации первой страницы.
• Сохраняй изображения как «оптимизированные для Интернета» с помощью таких инструментов, как Photoshop.
• Используй WebP в Chrome для обслуживания изображений меньшего размера.

https://kinsta.com/blog/optimize-images-for-web/#image-optimization-plugins-you-can-use