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

Оптимизацията на изображенията е един от най-благоприятните аспекти на производителността на WordPress: при една и съща структура на страницата и тема, ако размерът, размерите, форматирането и доставката на изображението са правилни, зареждането ще се подобри незабавно.

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

Тази статия прави само три неща:

1. Дайте си изпълним файлпътна карта (също фиг.)(Какво да правим първо, какво да правим после)
2. Бъдете наясно с варианта, който избирате (каква е разликата между безплатен и платен и за кого е подходящ всеки от тях).
3. Напишете предварително най-често срещаните проблеми (за да не се налага да търсите наоколо и да отстранявате неизправности, когато приключите)

1. Изводът: с какво се предлага WordPress и с какво не

Ако първо не разберете какво вече прави ядрото на WordPress, е лесно да направите едно от двете неща:

• Вместо да използвате “свободния капацитет”, на който би трябвало да се радвате, вие харчите време/плащате пари, за да изграждате колелото отново и отново.
• Мислех, че WordPress ще “конвертира автоматично всички стари изображения в WebP/AVIF”, но се оказа, че не е така!

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

• Отзивчиви изображения (srcset/sizes): От версия 4.4 на WordPress ядрото ще извежда изображения за srcset 与 sizesи използва изображенията с различни размери, генерирани по време на качването, за да позволи на браузъра да избере по-подходящ ресурс за зареждане в зависимост от условията на екрана.
• Родно лениво зареждане: WordPress от версия 5.5 нататък дава възможност за мързеливо зареждане на изображенията по подразбиране, като се използват стандартите на HTML. loading прилагане на атрибута.
• Поддръжка за качване на WebP: От версия 5.8 на WordPress можете да качвате и използвате 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, но без да се нарушава качеството)

Същността на компресирането не е “колкото по-малко, толкова по-добре”, а “разликата е едва видима с просто око, но спадът в обема е очевиден”.

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

• Снимки/кадри на живо (хора, продукти, пейзажи): Приоритетно компресиране със загуби (максимална печалба)
• Снимки на екрана на интерфейса / изображения, съдържащи много текст: Компресията трябва да е по-консервативна, за да се избегне размиване на текста
• Лого/икона: Приоритет SVG или дискретно без загуби (без загуби е лесно да се вмъкне в ръба)

Направете това, което се счита за пропуск:

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

---

2.3 WebP / AVIF (стратегия за формат: по-малък за еднакво определение)

WordPress вече поддържа качване WebP (5,8) срещу AVIF (6,5)。
Но за да може форматът от следващо поколение наистина да работи, обикновено трябва да се решат две неща:

1. Как да конвертирате исторически медийни библиотеки(В противен случай оптимизирате само за “нови изображения, качени по-късно”)
2. Дали да се генерира копие или да се замени оригиналното изображение(Това е рисковано решение; по-късно ще се съсредоточим върху “Замяна и изтриване на оригиналното изображение” на Plus WebP)

Препоръчителен стил на писане:

• WebP: обикновено се предпочита по подразбиране (по-стабилна съвместимост)
• AVIF: още една посока на компресия, подходяща за големи изображения/големи изображения на първия екран/албумни изображения (но повечеЗависимост от подкрепата на околната среда）

---

2.4 Ленивото зареждане трябва да се използва правилно (не е универсално)

WordPress от версия 5.5 нататъкМързеливо зареждане по подразбиранеСнимка.
Това намалява използването на честотната лента при първоначалното рендиране:

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

---

2.5 Слой за доставка: CDN / Снимка CDN

Компресирането, оразмеряването и форматирането решават проблема с “по-малките файлове, които се побират”.
Ако обаче изображенията винаги се изтеглят от разстояние от източника, мрежовата латентност все още ще оказва значително влияние върху преживяването. Именно тук се появява решението за “слой на доставка” (CDN/изображение CDN).

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

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

Оптимизацията на изображенията е отговорна за това, че те стават по-малки и по-подходящи.CDN Отговаря за осигуряването на по-близки и по-стабилни

3. Избор: само два основни маршрута

Най-честият провал при оптимизацията на изображенията не е “без плъгини”, а твърде много плъгини, които водят до дублиране на обработката:
A компресира, B компресира, A конвертира в WebP/AVIF, B конвертира, A променя URL адреси, B пренаписва - дори не можете да разберете какво се случва в станцията.

Правила:

Има само един път, по който да поемете: или изцяло безплатна локална, или облачна компресия на трите.

• Маршрут А (всички безплатни местни маршрути):Плюс WebP или AVIF + EWWW Image Optimizer(или само един)
• Маршрут Б (тройна опция за компресиране в облака):ShortPixel / Imagify / TinyPNG

---

3.1 Маршрут А: напълно безплатен местен (плюс 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 в маршрут А?

Ако използвате Plus WebP като “стратегия за миграция/замяна на формат”, EWWW е по-подходящ:

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

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

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

---

3.2 Маршрут Б: Троен избор за компресиране в облака (ShortPixel / Imagify / TinyPNG)

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

По-долу ще бъде обяснено: какво се случва с безплатните/платежните такси, как се приспадат кредитите, в какви клопки е най-вероятно да се навлезе и кои видове сайтове са подходящи.

---

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

Какво се случва с безплатното/платеното

В описанието на плъгина ShortPixel ясно е посочено:

• 100 безплатни кредита на месец
• Има и “Допълнителни неограничени месечни кредити” (страницата на плъгина дава информация за съответните цени)
• Предлагат се и като “пакети с еднократни кредити, които никога не изтичат” (с информация за началната цена)

Съвет:

• Безплатно: давате определено количество кредити на месец за леки сайтове или тестване
• Пакети за еднократна употреба: подходящи за сайтове с големи библиотеки с медии, които искат да изчистят наличностите си наведнъж (купуват веднъж и ги използват, обикновено срокът им не изтича).
• Месечно/неограничено: подходящо за сайтове с постоянно актуализирани изображения и дългосрочна стабилна оптимизация

В официалния KB на ShortPixel също така е предоставена актуализация на “Еднократен пакет срещу неограничен месечен”.изрично обяснение: 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, които генерират/вмъкват тагове от следващо поколение, логиката се натрупва и става по-трудна за отстраняване на проблеми. За маршрут Б оставете ShortPixel да се справи сам.
3. Мислех, че ако го инсталирам, ще бъде “WebP/AVIF на преден план”.”
   Страница на плъгина ShortPixelСпоменах, че конвертира WebP/AVIF и може да добавя изображения от следващо поколение към заглавната страница (например чрез маркиране).
   Но все пак е важно да проверите резултатите след това.

---

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

Свободно количество и позициониране

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

Как се приспада квотата?

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

• Броят на миниатюрите влияе на потреблениетоНапример, ако имате 10 размера на миниатюри, оптимизирането на 1 изображение се превръща в оптимизиране на 11 изображения (оригинал + 10 миниатюри), които допринасят за потреблението на квота.
• Приспадане на квота в зависимост от размера на оригиналния документ: Например, ако изпратите на Imagify изображение с размер 100 KB, от квотата ще бъдат извадени 100 KB.
• Промяната на нивото на компресия и повторното оптимизиране отново ще изразходват квотата。
• Един и същ API ключ може да се използва за няколко сайта, но квотите се разпределят между тях.

Това е “основният начин на разбиране” на Imagify:
Това е по-скоро като пакет за трафик: той приспада толкова, колкото изпращате; колкото повече миниатюри имате, толкова повече приспада; и ще повторите приспадането, ако многократно го натиснете отново.

Лесен за четене пример за квота на Imagify

Да речем, че качвате оригинално изображение с размер 800 KB и сайтът генерира 8 миниатюри.

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

Най-често срещаните капани на Imagify

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

• Започнете с малък брой изображения, за да определите нивото на компресия и външния вид.
• Определете стратегията и след това я изпълнете в насипно състояние
  Избягване на многократни опити и грешки в пълната библиотека

3. Споделянето на API ключ от няколко сайта води до “необяснимо намаляване на квотите”.”
   Ако използвате един и същ API ключ за повече от една станция, квотата е обща.
   Така че при сценарии с екип/много станции е добре да сте наясно кои станции са общи и кои се използват индивидуално, за да избегнете неконтролируеми бюджети.

---

3.2.3 TinyPNG(Малки компресирани изображения): безплатно 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. След като активирате конвертирането, откривате, че кредитите изведнъж не са използвани.
   Това не е грешка, а механизъм за таксуване.
   Стратегически съвети:

• Ако безплатната фаза се използва главно за компресиране и намаляване на теглото, можете да започнете само с компресиране и след това да включите конвертирането, когато сте сигурни, че структурата на сайта ви е стабилна и наистина се нуждаете от следващо поколение.

4. Препоръка за подсценарий: как да се изберат различни видове обекти

Също така WordPress, сайтовете за съдържание, сайтовете за електронна търговия, портфолиата и сайтовете за членство нямат същите “точки на натиск” за изображенията.

4.1 Сайтове/блогове за съдържание (много графики на статии, средна честота на актуализациите)

Приоритетни препоръки:

1. Стратегия за определяне на размера (стъпка 1)
2. Компресия (стъпка 2)
3. WebP (стъпка 3)

По-подходящ маршрут:

• Искате да запазите: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Ако искате да се освободите: Маршрут А (Plus WebP + EWWW), но се препоръчва да започнете с “консервативния режим (без изтриване на оригиналното изображение)”, за да оцените риска.

Типична яма:

• Първото изображение на страницата на статията е много голямо, неправилна стратегия за мързеливо зарежданеЗабавя първия екран

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

Най-вероятно проблемът не е “ефектът на компресиране не е добър”, а “оптимизираният размер не е подходящ, липсват миниатюри, предните компоненти не могат да получат картината”.

Приоритетни препоръки:

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

По-подходящ маршрут:

• Маршрут Б обикновено е по-безпроблемен: ShortPixel/Imagify/TinyPNG могат да се използват на партиди и е от решаващо значение да разберете механизма на квотите и да оцените разходите предварително.
• Маршрут А е добър, но бъдете по-внимателни с поведението на 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. Намерете произволно “оригинално изображение, което често качвате” и вижте колко голямо е то (напр. 300KB / 1MB / 3MB).
2. В зависимост от това колко размера миниатюри генерира сайтът ви (напр. 5 / 10 / 20)
3. Решете дали искате да генерирате WebP/AVIF (да/не)

След това използвайте следната “умствена математика”, за да разберете потреблението:

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

6. Сигнали за риск

Риск 1: Не позволявайте на няколко плъгина да правят едно и също нещо отново и отново

Това е най-често срещаният “източник на бедствие”.”

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

Риск 2: “Презаписване на ID / Изтриване на оригиналното изображение / Замяна на URL” на Plus WebP е миграция на активи.

Добавено е ударение:Плюс WebP В описанието ясно се посочва, че пълното генериране презаписва оригиналния идентификатор на изображението, изтрива оригиналния файл и заменя URL адреса на съдържанието.
Това означава, че не става дума за “малка настройка, която може да бъде изтеглена по всяко време”, а за промяна на ниво активи.

Предложената стратегия трябва да бъде:

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

Риск 3: Реалното потребление на “безплатни кредити” за компресиране в облака зависи от броя на миниатюрите и избора на следващото поколение.

• ShortPixel: Миниатюрите и следващото поколение влияят значително на кредитите.
• TinyPNG: При активиране на WebP/AVIF се приспада допълнителен кредит за всеки размер на изображението.
• Imagify: приспада се в зависимост от размера на оригиналната снимка, колкото повече миниатюри се приспада, толкова по-силен натиск ще повтори приспадането!

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

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

7. Как да проверите дали е влязло в сила, след като е направено

4 много прости точки за валидиране:

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

Ако и четирите съвпадат, избраният от вас маршрут е изпълнен. Следващата стъпка. CDN “Слой за доставка”, като цяло ще бъде по-стабилна.

8. Препоръки за действие

1. Първо изберете маршрута си:

• Опитвам се да бъда възможно най-свободен.: Plus WebP или AVIF + EWWW (или само един от тях)
• Искате да спестите сървърни ресурси, плащайте на кредит за повече спокойствие: ShortPixel / Imagify / TinyPNG - изберете един!

2. Първо направете малък тест (няколко десетки)
3. Уверете се, че всичко е наред, преди да започнете работа
4. Необходими са допълнителни подобрения в стабилността на доставките:прочетете CDN Ускорение

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

1. Колко плъгина трябва да инсталирам? Мога ли да ги инсталирам всички?

Опитайте се да изберете само един маршрут.

• Маршрут А: Plus WebP или AVIF + EWWW Image Optimizer (или само един от тях)
• Маршрут Б: 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” означава ли, че фронтендът трябва да произвежда WebP/AVIF?

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

6. Плюс Какво е опасното в WebP или AVIF? Мога ли да стартирам цялата библиотека с едно кликване?

Нейната рискова точка не е “компресия”, аПромени в нивата на миграция на активите：

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

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

Лесно за разбиране:

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

8. Достатъчно ли е безплатното локално компресиране на EWWW Image Optimizer? Ще претовари ли сървъра?

EWWW е по-скоро “местен компресор”: той се храни с CPU/IO.
Често се случва натоварването да нарасне по време на оптимизацията на партиди, което не означава, че тя “не работи”, а по-скоро, че стратегията трябва да е правилна: партиди, ниски пикове и опции за разтоварване/облак, ако е необходимо.
Ако искате да спестите средства или ако не разполагате с достатъчно сървърни ресурси, маршрут В е по-удобен за сървъри.

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

поради кредитите не са “брой снимки”.”Следващото поколение ще бъде увеличено с миниатюра със следващото поколение:

• Оригиналното изображение + всяка миниатюра се счита за кредит
• Ако се генерира WebP/AVIF, се изразходва допълнителен кредит за всяка съответна версия.
  Така че това, което смятате за “1 изображение”, всъщност може да изразходва почти “двуцифрени кредити”. shortPixel

10. безплатният 20MB/месец на Imagify, защо той също свършва бързо?

Imagify е по-скоро “пакет за трафик”:

• Както сте го изпратили.Оригинален размер на файлаприспадане на квоти
• Колкото повече миниатюри имате, толкова повече консумирате
• Промяната на нивото на компресия за повторно оптимизиране отново ще изразходва квотата
• Един и същ API ключ за няколко сайта, споделяне на квоти
  Така че “20MB ще свърши скоро” често се дължи на твърде големи изображения, твърде много миниатюри или повтарящи се опити и грешки.

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

Тъй като кредитите на TinyPNG също се увеличават чрез “size/variant”:

• Една обикновена инсталация на WordPress вероятно компресира около 100 листа месечно.
• Активирайте конвертирането на AVIF или WebP:Всеки размер на изображението изразходва допълнителен кредитТака че вероятно можете да компресирате и конвертирате само около 50 изображения месечно (в зависимост от броя на размерите на миниатюрите).
  Така че 500 кредита ≠ 500 изображения.

12. Колко миниатюри има в моя сайт? Защо това е от толкова голямо значение?

WordPress генерира няколко размера за качване на изображение; темите/включванията (особено за електронна търговия) могат да добавят повече размери.
Кредитите/квотите за компресиране в облака обикновено са “оригинал + миниатюри заедно”, така че колкото повече миниатюри имате, толкова по-малко безплатни кредити трябва да използвате.

13. Винаги ли мързеливото зареждане е по-бързо? Защо някои хора казват, че мързеливото зареждане забавя нещата?

Мързеливото зареждане е подходящо за “ресурси извън екрана”.
Ако първият екран на най-критичното голямо изображение също е забавено зареждане, може да се забави опитът на първия екран. WordPress 5.5, тъй като по подразбиране мързеливо зареждане е добре, но не “един размер пасва на всички”.

14. Пътувам по маршрут А или В. Кога ми е необходим CDN / Снимка CDN?

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

15. Какъв е най-лесният начин да проверя дали “наистина работи”, когато съм готов?

Най-ефективният метод за проверка във времето:

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