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

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

Но оптимизация изображений - это еще и самый простой способ навести беспорядок, и не потому, что это технически слишком сложно, а потому, что информация слишком разрозненна:
Вы читаете несколько статей, знаете, что “сжатие”, “WebP/AVIF”, “ленивая загрузка”, а затем смотрите на введение плагина и говорите “бесплатно каждый месяц! 100 кредитов в месяц”, “Бесплатный 20MB”, “1 кредит за изображение”, но чем больше я читаю, тем больше запутываюсь... Достаточно ли бесплатно? Как вычесть плату? Может, вы неправильно поняли “одно и то же”? И самое главное:Вступило ли оно в силу после того, как вы его сделали, или нет?

Эта статья делает только три вещи:

1. Дайте вам исполняемый файлдорожная карта (также рис.)(Что делать в первую очередь, что во вторую)
2. Четко определитесь с выбором (в чем разница между бесплатным и платным вариантами и для кого они подходят).
3. Заранее запишите наиболее распространенные "подводные камни" (чтобы не искать их, когда закончите работу).

1. Итоги: что входит в комплект WordPress, а что нет

Если вы сначала не разберетесь с тем, что уже делает ядро WordPress, то легко сделаете одну из двух вещей:

• Вместо того чтобы использовать “свободные мощности”, которыми вы должны пользоваться, вы тратите время/платите деньги на создание колеса снова и снова.
• Я думал, что WordPress будет “автоматически конвертировать все старые изображения в WebP/AVIF”, но оказалось, что это не так!

В ядро WordPress встроены эти ключевые возможности:

• Отзывчивые изображения (srcset/sizes): Начиная с версии WordPress 4.4, ядро будет выводить изображения для srcset 与 sizesи использует многоразмерные изображения, созданные во время загрузки, чтобы браузер мог выбрать более подходящий ресурс для загрузки в зависимости от условий экрана.
• Родная ленивая загрузка: WordPress 5.5 и далее по умолчанию включает встроенную ленивую загрузку изображений, используя стандарт HTML. loading реализация атрибутов.
• Поддержка загрузки WebP: WordPress 5.8 и выше может загружать и использовать WebP типа JPEG/PNG (при условии, что среда хостинга поддерживает WebP).
• Поддержка загрузки AVIF: WordPress 6.5 и выше может загружать и использовать AVIF типа JPEG/PNG (также зависит от поддержки среды хостинга).

Но будьте внимательны:
“Поддержка загрузки/использования” ≠ “Автоматическое преобразование/автоматическая доставка”.
То есть, даже если вы уже находитесь на WP 6.5, JPG/PNG в вашей медиатеке не превратятся в WebP/AVIF сами по себе; и вы не получите автоматически полную ссылку “выводить AVIF/WebP в соответствии с возможностями браузера и возвращаться к исходному изображению для неподдерживаемых браузеров”! --Эта часть обычно должна быть исправлена плагином или сервисом.

2. Дорожная карта: оптимизация изображений за 5 шагов

Что делать, почему, что нужно сделать, чтобы пройти квалификацию, и что такое типичная яма.

2.1 Сначала правильно определите “размер” (это самое важное, но самое полезное)

Многие станции работают медленно не потому, что не выполняется сжатие, а потому, чтоЗагружено большое изображение, выходящее за пределы области отображения：
Например, если ширина страницы составляет всего 900px, а вы просите посетителя загрузить оригинальное изображение размером 3000px, браузер просто “загрузит его, а затем уменьшит”. Это расходует полосу пропускания, увеличивает время декодирования и замедляет работу первого экрана.

WordPress 4.4+Отзывчивый механизм изображения（srcset/sizes) призвана решить именно эту проблему.

Делайте то, что считается пасом:

• При открытии страницы на мобильном телефоне размер загружаемого изображения должен быть значительно меньше, чем на настольном компьютере
• Одно и то же изображение загружается с разными размерами ресурсов на разных устройствах (вместо того, чтобы всегда загружать оригинальное изображение)

Самые распространенные подводные камни:

• Существуют темы/конструкторы, которые рассматривают диаграммы как фоновые изображения CSS или выводят их пользовательским способом, который позволяет обойти srcsetЭто большая картина, которая постоянно опускается вниз.
• Вы используете внешние блоки изображений, блоки изображений сторонних производителей, а также можете обойти многоразмерную систему, созданную медиатекой.

---

2.2 Сжатие (уменьшите KB, но не “раздавите” качество)

Суть сжатия не в том, что “чем меньше, тем лучше”, а в том, что “разница едва заметна невооруженным глазом, но уменьшение объема очевидно”.

Правила следующие:

• Фотографии/живые снимки (люди, продукты, пейзажи): Приоритетное сжатие с потерями (максимальный выигрыш)
• Скриншоты интерфейса / изображения с большим количеством текста: Будьте более консервативны в сжатии, чтобы избежать нечеткого текста
• Логотип/икона: Priority SVG или сдержанный lossless (lossy может быть нечетким по краям)

Делайте то, что считается пасом:

• Значительное уменьшение размера изображения на большинстве страниц
• Без видимых шумов, мутных краев, разрывов цветовых блоков, размытого текста

---

2.3 WebP / AVIF (стратегия формата: меньший размер для равной четкости)

WordPress уже поддерживает загрузку WebP (5,8) против AVIF (6,5)。
Но чтобы формат Next Generation действительно работал, обычно необходимо решить две проблемы:

1. Как пакетно конвертировать исторические медиатеки(В противном случае вы оптимизируете только для “новых изображений, загруженных позже”).
2. Создать копию или заменить оригинальное изображение(Это рискованный водораздел; мы остановимся на “Замене и удалении исходного изображения” в Plus WebP позже)

Рекомендуемый стиль письма:

• WebP: обычно предпочитается по умолчанию (более стабильная совместимость).
• AVIF: дальнейшее направление сжатия, подходит для больших изображений/больших изображений на первом экране/альбомных изображений (но болееЗависимость от поддержки окружающей среды）

---

2.4 Ленивая загрузка должна использоваться правильно (а не по принципу "один размер подходит всем")

WordPress 5.5 и далееЛенивая загрузка по умолчаниюИзображение.
Это снижает потребление полосы пропускания при первоначальном рендеринге:

• Ленивая загрузка для “внеэкранных ресурсов”
• Наиболее важное крупное изображение на первом экране (а во многих случаях и ключевое изображение на первом экране) часто не подходит для отложенной загрузки

---

2.5 Слой поставки: CDN / Фото CDN

Сжатие, изменение размера и форматирование решают проблему “меньших файлов, которые подходят”.
Однако если изображения всегда передаются на расстоянии от источника, сетевая задержка может существенно повлиять на качество изображения. Именно здесь на помощь приходит решение “уровня доставки” (CDN/изображение CDN).

Два типичных направления:

• Cloudflare Polish：Документация CloudflareПредставлены польские методы сжатия (lossless/lossy/WebP) и упомянуто, что сжатие с помощью format=auto Допускается использование формата WebP/AVIF.
• Ускоритель сайта Jetpack：Документация по JetpackОбъясните, что он будет оптимизировать изображения и распространять их по сети вместе со статическими ресурсами.

Оптимизация изображений отвечает за то, чтобы они становились меньше и более подходящими.CDN Отвечает за обеспечение более тесного и стабильного

3. Выбор: только два основных маршрута

Самая распространенная ошибка при оптимизации изображений - это не “отсутствие плагинов”, а слишком большое количество плагинов, приводящее к дублированию обработки:
A сжимает, B сжимает, A конвертирует в WebP/AVIF, B конвертирует, A меняет URL, B переписывает - вы даже не можете понять, что происходит на станции.

Правила:

Есть только один путь: либо все бесплатное локально, либо облачное сжатие из трех вариантов.

• Маршрут A (все бесплатные местные):Плюс WebP или AVIF + оптимизатор изображений EWWW(или только один)
• Маршрут B (тройной вариант облачного сжатия):ShortPixel / Imagify / TinyPNG

---

3.1 Маршрут A: Полный бесплатный локальный (плюс WebP или AVIF или EWWW)

Этот маршрут характеризуется:

• Вы не полагаетесь на сторонние услуги по сжатию данных “за месяц/за лист” (хотя некоторые функции могут предлагаться в качестве дополнительных услуг).
• Стоимость: пакетная обработка может быть более требовательной к серверу CPU/IO, что требует от вас большего внимания к “стратегии и риску”.”

3.1.1 Плюс WebP или AVIFВ основе лежит принцип “генерировать/заменять”, это не традиционный “инструмент сжатия”.”

• При создании полнообъемных изображений:Идентификатор исходного файла изображения заменяется на WebP/AVIF, исходный файл удаляется, а URL-адрес в содержимом заменяется.。
• Плагин предоставляет команды WP-CLI и напоминает: WP-CLI более надежен, когда файлов много.

Это означает, что вместо того, чтобы “спокойно генерировать WebP для вас”, это может бытьМиграция активов(Особенно если включить опцию “Заменить и удалить исходное изображение”).

Различия между двумя моделями

Режим 1: сохранение исходного изображения + создание копии WebP/AVIF (более стабильный)

• Плюсы: Легче отступить в случае проблем с совместимостью
• Стоимость: увеличится расход дискового пространства (исходное изображение + новый формат + многоразмерные миниатюры).

Режим 2: Замена и удаление оригинального изображения (более агрессивный)

• Плюсы: диски расширяются не так быстро; ссылки на станции переходят непосредственно к новому формату
• Риск: вы “меняете активы + меняете ссылки”, что удорожает устранение проблем совместимости (особенно если некоторые внешние системы или логика тем зависят от исходного имени/пути/формата файла).

Типичные ошибки при использовании Plus WebP или AVIF

1. После замены всей библиотеки некоторые изображения страниц отображаются ненормально.
   Причина обычно не в том, что изображение “сломано”, а в том, что какое-то звено в цепочке подстановки URL, кэширования, политики миниатюр и т. д. не соответствует действительности.
2. Чем больше миниатюр, тем больше масштаб изменений.
   WordPress генерирует несколько размеров при загрузке изображения; темы/плагины также могут добавлять дополнительные размеры. Полная замена означает, что вы можете изменить очень большой набор файлов.
3. Выполнение миграции формата не обязательно означает, что том всегда будет наименьшим.
   WebP/AVIF, как правило, меньше, но “стратегия размера” и “стратегия сжатия” по-прежнему важны. Не думайте, что Plus WebP - это “на один клик быстрее”.

---

3.1.2 Оптимизатор изображений EWWW: представитель свободного локального сжатия

Страница плагина EWWW очень удачно расположена:

• Его можно оптимизировать на вашем сервере с помощью различных инструментов (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp и т. д.).
• Вы также можете перегрузить обработку, требующую CPU, на свой сервер (опционально), если вам нужно более высокое сжатие или большая экономия CPU.

Какую роль должен играть EWWW в маршруте A?

Если вы используете Plus WebP в качестве “стратегии переноса/замены формата”, то EWWW подойдет лучше:

• Сжатие и оптимизация объема(в частности, снижение веса первичных источников, таких как JPG/PNG)
• Пакетная оптимизация исторической медиатеки(нацеленность на “сокращение объема”, а не на “замену URL”)

Типичная яма EWWW

1. Повышенная нагрузка на сервер при пакетной оптимизации
   Поскольку локальное сжатие съедает CPU/IO, решение не “не использовать его”, а “пакетное, с низким пиком, выгрузка/облачный вариант при необходимости”.
2. “Генерируется WebP” не означает, что фронтенд должен генерировать WebP.
   Многие плагины страдают от этого недопонимания: генерация - это одно, а стратегии доставки (рерайт, теги картинок, попадания в кэш и т. д.) - другое.
3. Выполнение одних и тех же действий снова и снова с помощью других плагинов
   Если вы идете по пути A, старайтесь не накладывать облачное сжатие типа ShortPixel/Imagify/TinyPNG; если вы идете по пути B, не включайте логику замены Plus WebP. Основной принцип:Один маршрут до конца.

---

3.2 Маршрут B: тройной выбор облачного сжатия (ShortPixel / Imagify / TinyPNG)

Этот путь подходит для тех, кто “хочет экономить ресурсы сервера, хочет выполнять партии с меньшими усилиями и принимает биллинг за кредит/за объем”.
Но самым обманчивым моментом является сжатие облаков:Бесплатные кредиты не так просты, как “бесплатные листы”!.. Количество размеров миниатюр, генерируется ли WebP/AVIF, а также многократное повторное сжатие могут существенно повлиять на потребление.

Ниже мы расскажем: что происходит с free/fee, как вычитаются кредиты, на какие подводные камни чаще всего можно натолкнуться и какие типы сайтов подходят для этого.

---

3.2.1 ShortPixel100 бесплатных кредитов в месяц, но кредиты расходуются на миниатюры и увеличение в формате WebP/AVIF.

Что происходит с бесплатным/платным

В описании плагина ShortPixel четко указано:

• 100 бесплатных кредитов в месяц
• Существуют также “Дополнительные неограниченные месячные кредиты” (на странице плагина приведена информация о соответствующих ценах).
• Также доступны “одноразовые кредитные пакеты, срок действия которых никогда не истекает” (с информацией о начальной цене)

Совет:

• Бесплатно: предоставляем определенное количество кредитов в месяц для легких сайтов или тестирования
• Одноразовые пакеты: подходят для сайтов с большими медиатеками, которые хотят разом очистить свои запасы (купите один раз и используйте, срок годности обычно не истекает).
• Ежемесячно/безлимитно: подходит для сайтов с постоянно обновляемыми изображениями и долгосрочной стабильной оптимизацией

ShortPixel Official KB на “Одноразовый пакет против безлимитного ежемесячного” также даетчёткое объяснение: Unlimited Monthly - это ежемесячный (или ежегодный) платеж, который предлагает неограниченное количество кредитов с фиксированной суммой CDN; срок действия одноразовых кредитов не истекает, что дает вам больше возможностей использовать их по мере необходимости.

В итоге: как рассчитываются кредиты ShortPixel?

Официальная документация ShortPixel KB Говорит очень прямо:

• WordPress генерирует несколько миниатюр при загрузке изображения;
• Каждая оптимизация миниатюры засчитывается как кредит；
• Если вы решили создать файл WebP или AVIF, тоЗа каждую WebP/AVIF-версию исходного изображения и миниатюру взимается дополнительный кредит.；
• Вы можете исключить из оптимизации определенные миниатюры, чтобы уменьшить потребление кредитов.

Кредиты Пример：

Допустим, вы загружаете 1 изображение, а тема/плагин генерирует 8 миниатюр:

• Оптимизируйте только оригинальное изображение + миниатюры: 1 (оригинал) + 8 (миниатюры) = 9 кредитов
• Если вы также хотите генерировать WebP/AVIF: еще одна версия нового поколения для каждой из 9 вышеперечисленных → +9 кредитов.
  Другими словами, то, что вы считаете “1 картинкой”, на самом деле может потреблять почти “двузначные кредиты”.

Итак:“Бесплатные 100 кредитов” - это не то же самое, что “бесплатные 100 изображений”.

Самые распространенные подводные камни ShortPixel

1. Бесплатные 100 кредитов быстро заканчиваются
   Причина: большое количество миниатюр + дополнительные кредиты для генерации WebP/AVIF.
   предложение：

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

2. Одновременное использование других плагинов-конвертеров
   Если у вас есть Plus WebP-замены и ShortPixel, генерирующий/вставляющий теги нового поколения, логика складывается, и устранить неполадки становится сложнее. Для маршрута B позвольте ShortPixel делать это самостоятельно.
3. Я думал, что если я установлю его, то это будет “WebP/AVIF на переднем плане”.”
   Страница плагина ShortPixelУпоминается, что он конвертирует WebP/AVIF и может добавлять изображения нового поколения на первую страницу (например, с помощью тегов).
   Однако после этого важно проверить результаты.

---

3.2.2 ImagifyБесплатно: 20MB/месяц; квота вычитается в соответствии с “размером исходного изображения + количество миниатюр”, повторные вычеты будут производиться за повторную печать.

Свободный объем и позиционирование

Официальная страница цен ImagifyНадпись понятна:Бесплатный аккаунт Ежемесячная квота 20MB。
На странице плагина также указано, что он может сжимать, изменять размер и конвертировать WebP/AVIF.

Как вычитается квота?

Официальная документация Imagify “В статье ”Как рассчитывается использование квоты?" очень четко описывается механизм вычета:

• Количество эскизов влияет на потреблениеНапример, если у вас 10 размеров миниатюр, оптимизация 1 изображения превращается в оптимизацию 11 изображений (оригинал + 10 миниатюр), которые все вносят свой вклад в потребление квоты.
• Вычет квоты в зависимости от размера оригинала документа: Например, если вы отправляете в Imagify изображение объемом 100KB, из квоты будет вычтено 100KB.
• Изменение уровня сжатия и повторная оптимизация снова приведут к расходованию квоты。
• Один и тот же API Key можно использовать для нескольких сайтов, но квота будет распределена между ними.

Это “основной способ понимания” Imagify:
Это больше похоже на пакет трафика: он отчисляет столько, сколько вы отправляете; чем больше миниатюр, тем больше отчислений; и вы будете повторять отчисления, если неоднократно повторно нажмете на него.

Простой в прочтении пример квоты Imagify

Предположим, вы загрузили оригинальное изображение 800KB, и сайт сгенерировал 8 миниатюр.

• Imagify оптимизирует для включения “исходного изображения + 8 миниатюр” (если вы решите оптимизировать их все), что означает, что это одно действие потребляет квоту, близкую к “исходному размеру всех этих файлов вместе взятых”.
  Вот почему некоторые сайты чувствуют, что “20MB быстро заканчивается”: дело не в том, что Imagify недостаточно, а в том, что вы загружаете слишком много изображений за раз, слишком много миниатюр и, вероятно, пробуете уровни сжатия снова и снова.

Самые распространенные подводные камни Imagify

1. Бесплатно 20MB Недостаточно для проведения “полной инвентаризации истории сайта”
   20MB обычно лучше подходит для тестирования с небольшими обновлениями; если ваша медиатека уже велика, одноразовая очистка, скорее всего, потребует обновления.
2. Многократная корректировка уровней сжатия приводит к дублированию потребления квот
   Imagify поясняет, чтоПри повторной оптимизации квота будет израсходована снова.
   Я предлагаю вам прояснить “стратегию” на этой странице:

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

3. Несколько сайтов совместно используют API Key, что приводит к “необъяснимо низкой” квоте.”
   Если вы используете один и тот же API Key для нескольких станций, квоты будут общими.
   Поэтому в сценариях с командой или несколькими станциями лучше четко определить, какие станции используются совместно, а какие - индивидуально, чтобы избежать неконтролируемого бюджета.

---

3.2.3 TinyPNG(Tiny Compress Images): бесплатно 500 кредитов/месяц; при переходе на WebP/AVIF “вычитается 1 кредит за размер”.”

Бесплатные кредиты и идеи их оплаты

На странице плагина WordPress для TinyPNG все написано:

• 500 кредитов в месяц бесплатно
• В разделе “Общая установка WordPress” вы, вероятно, можете сжать Около 100 изображений в месяц
• Однако если включено преобразование AVIF или WebP:На каждый размер изображения расходуется дополнительный кредитТак что, предположительно, его можно только сжать и преобразовать Около 50 изображений в месяц(в зависимости от того, сколько размеров миниатюр у вас есть).

Тем временем компания Tinify (разработчик TinyPNG/TinyJPG) также сделала объявление в своем Страница ценообразования APIОписание: Зарегистрируйтесь и получите 500 бесплатных компрессий в месяц; после этого вам будут выставляться счета в зависимости от количества успешных компрессий, без обязательной подписки.

Обобщите способ понимания TinyPNG в одном предложении:
Он считает кредиты; чем больше размеров миниатюр и чем больше WebP/AVIF вы включили, тем быстрее расходуются кредиты.

Легко читаемый пример кредитов TinyPNG

Предположим, ваш сайт генерирует 8 размеров миниатюр для каждого изображения:

• Только сжатие: оригинал + 8 миниатюр → требуется 9 кредитов
• Если включено преобразование WebP/AVIF: один дополнительный кредит за размер → возможно, почти вдвое!
  Это соответствует описанию на странице плагина: после включения бесплатное количество меняется примерно со “100 карт/месяц” на “50 карт/месяц”.

TinyPNG Самые распространенные подводные камни

1. Мысль 500 кредитов = 500 изображений
   Это не так. Он потребляется “размером изображения/вариантом”. На странице плагина четко указано, что “Конверсии вычитают дополнительно 1 кредит за каждый размер изображения”.
2. Темы/плагины электронной коммерции генерируют слишком много размеров, а количество бесплатных кредитов значительно уменьшается
   Чем больше размеров, тем легче масштабировать и расходовать кредиты.
3. Включив конвертацию, вы обнаружите, что кредиты внезапно оказались неиспользованными.
   Это не ошибка, а механизм выставления счетов.
   Советы по стратегии:

• Если бесплатная фаза используется в основном для сжатия и уменьшения веса, вы можете начать только со сжатия, а затем включить конвертацию, когда убедитесь, что структура вашего сайта стабильна и вам действительно нужен next-gen.

4. Рекомендации по субсценарию: как выбрать различные типы участков

Также WordPress, контент-сайты, сайты электронной коммерции, портфолио и сайты членства не имеют таких “точек давления” для изображений.

4.1 Контентные сайты/блоги (много графических статей, средняя частота обновлений)

Приоритетные рекомендации:

1. Стратегия определения размера (шаг 1)
2. Сжатие (шаг 2)
3. WebP (шаг 3)

Более подходящий маршрут:

• Хотите сохранить: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Если вы хотите пойти бесплатным путем: маршрут A (плюс WebP + EWWW), но рекомендуется начать с “консервативного режима (без удаления исходного изображения)”, чтобы оценить риск.

Типичная яма:

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

4.2 Сайт электронной коммерции/продуктов (много миниатюр, много вариантов изображений, стабильность на первом месте)

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

Приоритетные рекомендации:

1. Стабильность превыше всего: консервативная стратегия сжатия, не стоит сразу же проводить полную замену библиотеки
2. Оценка размеров миниатюр: темы электронной коммерции обычно генерируют больше размеров, что увеличивает расход кредитов (особенно заметен ShortPixel/TinyPNG).
3. Проведите валидацию в малых масштабах перед выпуском партии (очень важно)

Более подходящий маршрут:

• Маршрут B, как правило, более хлопотный: ShortPixel/Imagify/TinyPNG могут все пакетные заказы, и очень важно, чтобы вы понимали механизм квот и заранее оценивали стоимость.
• Маршрут A подходит, но будьте осторожнее с поведением Plus WebP “перезаписать идентификаторы/удалить оригинальные изображения/заменить URL”: это миграция активов, и не рекомендуется заменять все сразу.

4.3 Портфолио/фотостанция (чувствительность к качеству одного изображения, большие изображения, высокие требования к просмотру)

Приоритетные рекомендации:

1. Стратегия изменения размера (управление областью отображения)
2. Стратегия сжатия (лучше быть больше, чем дробить детали)
3. WebP/AVIF (выигрыш в размере сцены очевиден, но проверьте вид)

Более подходящий маршрут:

• Imagify: Вычитайте квоту в соответствии с “размером исходной картинки”, такой сайт проще сделать “бюджетно-контролируемым” (вы знаете, сколько вычесть за каждую большую картинку), но при этом избежать повторных репрессий.
• ShortPixel: Если размер миниатюры невелик, кредиты также очень интуитивны; но если вы генерируете много размеров +next-gen, потребление кредитов увеличится, и вам нужно будет планировать заранее.

5. сравнение квот и биллинга: “бесплатного мало” в перспективе

Какой из них выгоднее и как долго продлится халява?

5.1 Три модели чарджбэка

• ShortPixel(кредиты): Кредиты основаны на “оригинальное изображение + количество миниатюр”; дополнительные кредиты будут вычитаться за каждую соответствующую версию WebP/AVIF, созданную.
• Imagify(квота MB): Вычитайте квоту в соответствии с “размером исходного файла”; чем больше миниатюр, тем больше вычитание; повторное сжатие вычитает снова.
• TinyPNG(кредиты): 500 кредитов в месяц; при включении конвертации WebP/AVIF вычитаются дополнительные кредиты за каждый размер изображения.

5.2 Методы быстрой оценки

Вы можете оценить это следующим образом:

1. Найдите случайное “оригинальное изображение, которое вы часто загружаете” и посмотрите, насколько оно велико (например, 300 КБ / 1MB / 3MB).
2. В зависимости от того, сколько размеров миниатюр генерирует ваш сайт (например, 5 / 10 / 20)
3. Определите, хотите ли вы генерировать WebP/AVIF (да/нет)

Тогда воспользуйтесь следующей “ментальной математикой”, чтобы понять, что такое потребление:

• ShortPixel: ≈ (1 + количество миниатюр) кредитов на изображение; если генерируется WebP/AVIF, ≈ удваивается еще раз (поскольку версия следующего поколения также берет кредиты)
• ImagifyКаждое изображение ≈ (оригинальный размер + размер каждого миниатюры) вычитается из квоты; изменение уровня сжатия и повторное сжатие вычитается снова.
• TinyPNG: 500 кредитов бесплатно; если ваш сайт генерирует много размеров для одного изображения, а конвертация включена, количество бесплатных кредитов значительно снижается (на странице плагина можно увидеть “~100 кредитов/месяц” против “~50 кредитов/месяц”)

6. Оповещения о рисках

Риск 1: Не позволяйте нескольким плагинам выполнять одно и то же действие снова и снова

Это самый распространенный “источник бедствия”.”

• Маршрут A:Плюс WebP или AVIF + EWWW(Разделите труд между ними, не занимайтесь одновременно конверсией и доставкой, или установите только один из них).
• Маршрут B: ShortPixel / Imagify / TinyPNG выберите три(выберите один для сжатия с помощью next-gen)

Риск 2: Плюс WebP “Перезаписать ID / Удалить оригинальное изображение / Заменить URL” - это перенос активов.

Подчеркивание добавлено:Плюс WebP В описании четко сказано, что при полной генерации происходит перезапись идентификатора исходного изображения, удаление исходного файла и замена URL-адреса содержимого.
Это означает, что речь идет не о “небольшой сумме, которую можно снять в любой момент”, а об изменении уровня активов.

Предлагаемая стратегия должна быть такой:

• Сначала проведите небольшой тест (от нескольких десятков до нескольких сотен).
• Убедитесь, что отображение, миниатюры и обновление кэша во фронтенде работают должным образом.
• Пересмотрите вопрос о полной обработке библиотеки

Риск 3: Реальное потребление “бесплатных кредитов” облачного сжатия зависит от количества миниатюр и выбора next-gen.

• ShortPixel: Эскизы и next-gen значительно влияют на титры.
• TinyPNG: Включение WebP/AVIF вычитает дополнительный кредит за каждый размер изображения.
• Imagify: вычитается в соответствии с размером исходного изображения, чем больше миниатюр вычитается больше, сильное давление будет повторять вычитание!

Риск 4: “WebP/AVIF сгенерирован” не означает “WebP/AVIF доставляется фронт-офисом”.”

Многие люди чувствуют себя “не быстрее” после конвертации, основная причина заключается в том, что фронт-энд по-прежнему не соответствует JPG/PNG (кэш/запись/тег/переговоры с браузером и т.д., любое кольцо не является правильным).

7. как проверить, что она вступила в силу после ее выполнения

4 очень простых пункта проверки:

1. Обновляется ли одна и та же страница во второй раз и загружается ли она более стабильно и быстро(Кэширование и оптимизация физического ощущения того, работает ли это)
2. Значительно ли отличаются размеры изображений, загружаемых на мобильные телефоны и настольные компьютеры?(отзывчивый) srcset/sizes (независимо от того, работают они или нет)
3. Проверьте несколько изображений: присутствуют ли файлы/ресурсы WebP или AVIF.(Действительно ли сайт использует следующее поколение）
4. Попробуйте несколько изображений: увеличьте их, чтобы увидеть, не мутные ли они, не размыт ли текст.(Сжатая масса не является чрезмерной)

Если все четыре пункта совпадают, значит, выбранный вами маршрут пройден. Далее. CDN “Слой доставки”При этом общее состояние будет более стабильным.

8. Рекомендации к действию

1. Сначала выберите маршрут:

• Стараюсь быть как можно более свободным.: Плюс WebP или AVIF + EWWW (или только один из них).
• Хотите сэкономить ресурсы сервера, платите за кредит для большего спокойствия: ShortPixel / Imagify / TinyPNG Triple Choice

2. Сначала проведите небольшой тест (несколько десятков).
3. Убедитесь, что все в порядке, прежде чем приступать к работе.
4. Требуется дальнейшее улучшение стабильности доставки:читать CDN Ускорение

общие проблемы

1. Сколько плагинов мне нужно установить? Могу ли я установить их все?

Старайтесь выбирать только один маршрут.

• Маршрут A: Плюс WebP или AVIF + EWWW Image Optimizer (или только один из них)
• Маршрут B: ShortPixel / Imagify / TinyPNG
  На одной и той же станции в одно и то же время пусть несколько плагинов делают “сжатие / передачу WebP / AVIF / изменение URL / перезапись доставки”, скорее всего, становится все более и более хаотичным, но и наиболее трудно проверить.

2. Разве WordPress уже не поддерживает WebP/AVIF? Мне все еще нужен плагин?

Его нужно разделить:
“Поддержка загрузки/использования” ≠ “Автоматическое преобразование/автоматическая доставка”.
WordPress 6.5 не может автоматически пакетно конвертировать старые JPG/PNG в WebP/AVIF, а также автоматически выполнять все действия по экспорту AVIF/WebP в соответствии с возможностями браузера и обратным доступом. Обычно для этого требуется плагин или служба, чтобы поддерживать историческую медиатеку.

3. Какой этап оптимизации изображения является самым “полезным”?

Обычно это Сначала установите правильные “размеры” (srcset/sizes).。
Многие сайты работают медленно не потому, что у них нет сжатия, а потому, что они показывают страницу размером всего 900px, но заставляют пользователей загружать изображение размером 3000px. Сжатие может сэкономить KB, но “неправильный размер” заставит вас загрузить в несколько раз больше данных просто так.

4. как я могу быть уверен, что загружаю “меньшее”, а не оригинальное изображение навсегда?

Посмотрите на два явления:

• При открытии страницы на мобильном телефоне размер загружаемого изображения заметно меньше, чем на настольном компьютере
• Одно и то же изображение загружается с разным размером ресурса на разных устройствах
  Если оригинальное изображение загружается вечно, то причина в том, что тема/конструктор рассматривает его как фоновое изображение CSS или пользовательский вывод, обходя многоразмерность медиатеки с помощью srcset.

5. означает ли “WebP/AVIF generated”, что фронтенд должен создавать WebP/AVIF?

Не равны.
Генерация - это только “файловый слой”; будет ли фронтенд на самом деле доставлять WebP/AVIF, зависит от перезаписи, политики тегирования изображений, попаданий в кэш, действующих переговоров с браузером и так далее. Когда вы закончите, не забудьте “выборочно проверить несколько изображений на типы ресурсов”.

6. Plus Что опасного в WebP или AVIF? Можно ли запустить всю библиотеку одним щелчком?

Его точка риска - не “сжатие”, аИзменения в уровнях миграции активов：

• Полная генерация может перезаписать идентификатор исходного файла изображения, удалить исходный файл и заменить URL в содержимом.
  причина, по которойНе рекомендуется сразу заменять всю библиотеку.: Сначала протестируйте на небольшом масштабе (десятки ~ сотни) + имейте доступные резервные копии, затем рассмотрите возможность полной обработки библиотеки.

7. каков выбор между двумя режимами Plus WebP: сохранение исходного изображения против замены и удаления исходного изображения?

Простота понимания:

• Режим 1: сохранение исходного изображения + создание копии WebP/AVIF (более стабильный): Удобно для отката, но при этом увеличивается объем диска (исходное изображение + новый формат + многоразмерные миниатюры).
• Режим 2: Замена и удаление оригинального изображения (более агрессивный): Диски меньше подвержены разрастанию, но вы “меняете активы + меняете ссылки”, что делает устранение проблем совместимости более дорогостоящим.
  Чем сложнее сайт (электронная коммерция/много плагинов/много размеров), тем более рекомендуется начинать с более стабильной модели.

8. Достаточно ли локального сжатия бесплатной программы EWWW Image Optimizer? Не перегрузит ли он сервер?

EWWW - это скорее “локальный компрессор”: он потребляет CPU/IO.
Обычно при пакетной оптимизации нагрузка возрастает, но это не значит, что она “не работает”, а скорее означает, что стратегия должна быть правильной: пакетная оптимизация, низкие пики и выгрузка/облачные опции при необходимости.
Если вы хотите сэкономить или ограничены в ресурсах сервера, маршрут B более удобен для сервера.

9. 100 бесплатных кредитов в месяц от ShortPixel, почему я чувствую, что они пропадают через несколько снимков?

по причине Кредиты - это не “количество фотографий”.”При просмотре следующего поколения миниатюра будет увеличена:

• Оригинальное изображение + все миниатюры засчитываются как кредит
• Если создается WebP/AVIF, то за каждую соответствующую версию берется дополнительный кредит.
  Поэтому то, что вы считаете “1 изображением”, на самом деле может потреблять почти “двузначное количество кредитов”. shortPixel

10. бесплатные 20MB/месяц Imagify, почему они также быстро заканчиваются?

Imagify больше похож на “пакет трафика”:

• Как вы и отправили.Размер исходного файлавычет квот
• Чем больше у вас миниатюр, тем больше вы потребляете.
• Изменение уровня сжатия для переоптимизации снова приведет к расходованию квоты
• Тот же API Key Совместное использование нескольких сайтов, разделение квот
  Так что “20MB скоро закончится” часто бывает вызвано слишком большими изображениями, слишком большим количеством миниатюр или повторяющимися проб и ошибок.

11. TinyPNG бесплатен на 500 кредитов/месяц, почему плагин говорит, что это только около 100 кредитов/месяц, а затем 50 кредитов/месяц с WebP/AVIF?

Потому что кредиты TinyPNG также увеличены за счет “размер/вариант”:

• Обычная установка WordPress, вероятно, сжимает около 100 листов в месяц.
• Включите преобразование AVIF или WebP:На каждый размер изображения расходуется дополнительный кредитПоэтому, вероятно, вы сможете сжимать и конвертировать только около 50 изображений в месяц (в зависимости от количества размеров миниатюр).
  Таким образом, 500 кредитов ≠ 500 изображений.

12. Сколько миниатюр на моем сайте? Почему это так важно?

WordPress генерирует несколько размеров для загрузки изображения; темы/плагины (особенно для электронной коммерции) могут добавлять дополнительные размеры.
Кредиты/квоты для облачного сжатия обычно составляют “оригинал + миниатюры вместе”, поэтому чем больше у вас миниатюр, тем меньше свободных кредитов вы можете использовать.

13. Всегда ли ленивая загрузка быстрее? Почему некоторые люди говорят, что ленивая загрузка замедляет работу?

Ленивая загрузка подходит для “внеэкранных ресурсов”.
Если на первом экране наиболее важные большие изображения также загружаются с задержкой, это может замедлить работу первого экрана. WordPress 5.5 по умолчанию лениво загружается, но не “один размер подходит для всех”.

14. Я путешествую по маршруту A или B. Когда мне понадобится CDN / Картинка CDN?

Сжатие, изменение размера и форматирование решают проблему “уменьшения размера файлов, которые помещаются”;
CDN Решение заключается в обеспечении более тесного и стабильного。
Если изображения берутся на расстоянии от сайта-источника, что приводит к значительным задержкам, то дополнение CDN/images с помощью CDN (например, Cloudflare Polish / Jetpack Site Accelerator) будет в целом более стабильным, читайте WordPress CDN Ускорение。

15. какой самый простой способ проверить, что “это действительно работает”, когда я закончу?

Самый экономичный по времени метод проверки:

• Обновляется ли одна и та же страница во второй раз и загружается ли она более стабильно и быстро
• Заметно ли отличаются размеры изображений, загружаемых на мобильные телефоны и настольные компьютеры (играет ли роль srcset/sizes).
• Проверьте несколько изображений: присутствуют ли файлы/ресурсы WebP или AVIF.
• Попробуйте несколько изображений: увеличьте их, чтобы увидеть, не мутные ли они, не размыт ли текст.