Optymalizacja obrazu witryny

Optymalizacja obrazów jest jednym z najbardziej “satysfakcjonujących” aspektów wydajności WordPress: dla tej samej struktury strony i motywu, o ile rozmiar obrazu, wymiary, formatowanie i dostarczanie są prawidłowe, wrażenia z ładowania natychmiast się poprawią.

Ale optymalizacja obrazu jest również najłatwiejszym sposobem na zrobienie bałaganu, nie dlatego, że jest to technicznie zbyt trudne, ale dlatego, że informacje są zbyt fragmentaryczne:
Przeczytałeś kilka artykułów, wiesz, że “kompresja”, “WebP/AVIF”, “leniwe ładowanie”, a następnie spojrzałeś na wprowadzenie wtyczki i powiedziałeś “za darmo co miesiąc! 100 kredytów miesięcznie”, “Darmowy 20MB”, “1 kredyt na obraz”, ale im więcej czytam, tym bardziej jestem zdezorientowany. Czy darmowe wystarczy? Jak odliczyć opłatę? Czy źle zrozumiałeś “to samo”? I najważniejsze:Czy faktycznie zaczęło działać po wykonaniu tej czynności, czy nie?

Ten artykuł robi tylko trzy rzeczy:

1. Udostępnia plik wykonywalnymapa drogowa (również rys.)(Co zrobić najpierw, co zrobić później)
2. Jasno określ, na którą opcję się decydujesz (jaka jest różnica między darmową a płatną i dla kogo każda z nich jest odpowiednia).
3. Wypisz najczęstsze pułapki z wyprzedzeniem (aby nie musieć szukać rozwiązań, gdy skończysz).

1. podsumowanie: co WordPress zawiera, a czego nie zawiera

Jeśli najpierw nie dowiesz się, co już robi rdzeń WordPressa, łatwo jest zrobić jedną z dwóch rzeczy:

• Zamiast korzystać z “wolnej mocy”, którą powinieneś się cieszyć, poświęcasz czas / płacisz pieniądze, aby budować koło w kółko.
• Myślałem, że WordPress “automatycznie przekonwertuje wszystkie stare obrazy na WebP/AVIF”, ale okazuje się, że tak nie jest!

Rdzeń WordPress ma wbudowane te kluczowe funkcje:

• Responsywne obrazy (srcset/sizes): Począwszy od WordPress 4.4, rdzeń będzie generował obrazy dla srcset 与 sizesi wykorzystuje wielowymiarowe obrazy generowane podczas przesyłania, aby umożliwić przeglądarce wybór bardziej odpowiedniego zasobu do załadowania w zależności od warunków ekranowych.
• Natywne leniwe ładowanieWordPress 5.5 i nowsze wersje domyślnie umożliwiają natywne leniwe ładowanie obrazów przy użyciu standardów HTML. loading implementacja atrybutu.
• Wsparcie dla przesyłania WebP: Od wersji WordPress 5.8 można przesyłać i używać WebP jako JPEG/PNG (pod warunkiem, że środowisko hostingowe obsługuje WebP).
• Obsługa przesyłania plików AVIF: Od WordPress 6.5 można przesyłać i używać AVIF jako JPEG/PNG (zależy to również od obsługi hostingu).

Ale uwaga:
“Obsługa przesyłania/używania” ≠ “Automatyczna konwersja/automatyczne dostarczanie”.
To znaczy: nawet jeśli jesteś już na WP 6.5, te JPG/PNG w twojej bibliotece multimediów nie zamienią się same w WebP/AVIF; nie otrzymasz automatycznie pełnego linku “wyjściowego AVIF/WebP zgodnie z możliwościami przeglądarki i powrotu do oryginalnego obrazu dla nieobsługiwanych przeglądarek”! --Ta część zazwyczaj musi zostać załatana przez wtyczkę lub usługę.

2. mapa drogowa: optymalizacja obrazu w 5 krokach

Co robić, dlaczego, co zrobić, aby się zakwalifikować i jaki jest typowy pit.

2.1 Ustalenie najpierw właściwego “rozmiaru” (najbardziej pomijane, ale najbardziej satysfakcjonujące)

Wiele stacji działa wolno nie dlatego, że kompresja nie jest wykonywana, ale dlatego, żePobrano duży obraz, który znacznie wykracza poza obszar wyświetlania.：
Na przykład, jeśli strona ma w rzeczywistości tylko 900 pikseli szerokości, a użytkownik zostanie poproszony o pobranie oryginalnego obrazu 3000 pikseli, przeglądarka po prostu “pobierze go, a następnie zmniejszy”. Marnuje to przepustowość, wydłuża czas dekodowania i spowalnia pierwszy ekran.

WordPress 4.4+Responsywny mechanizm obrazu（srcset/sizes) ma na celu rozwiązanie tej właśnie kwestii.

Rób to, co liczy się jako przepustka:

• Podczas otwierania strony na telefonie komórkowym rozmiar pobranego obrazu powinien być znacznie mniejszy niż na komputerze stacjonarnym
• Ten sam obraz ładuje się z różnymi rozmiarami zasobów na różnych urządzeniach (zamiast zawsze pobierać oryginalny obraz).

Najczęstsze pułapki:

• Istnieją motywy/kreatory, które traktują diagramy jako obrazy tła CSS lub wyświetlają je w niestandardowy sposób, który może ominąć srcsetW rezultacie powstał duży obraz
• Użytkownik korzysta z zewnętrznie połączonych łóżek obrazów, bloków obrazów innych firm, a także może ominąć system wielu rozmiarów generowany przez bibliotekę multimediów

---

2.2 Kompresja (zmniejsz KB, ale nie “zmiażdż” jakości)

Istotą kompresji nie jest “im mniejsza, tym lepsza”, ale “różnica jest ledwo widoczna gołym okiem, ale spadek objętości jest oczywisty”.

Zasady są następujące:

• Zdjęcia / ujęcia na żywo (ludzie, produkty, krajobrazy)Priorytet kompresji stratnej (maksymalne wzmocnienie)
• Zrzuty ekranu interfejsu / obrazy zawierające dużo tekstuKompresja powinna być bardziej konserwatywna, aby uniknąć rozmytego tekstu.
• Logo/IkonaPriorytet SVG lub dyskretny bezstratny (stratny jest łatwy do wklejenia krawędzi)

Rób to, co liczy się jako przepustka:

• Znaczne zmniejszenie rozmiaru obrazu na większości stron
• Brak widocznych szumów, zmatowiałych krawędzi, bloków kolorów, rozmytego tekstu

---

2.3 WebP / AVIF (strategia formatu: mniejszy dla równej rozdzielczości)

WordPress obsługuje już przesyłanie plików WebP (5,8) vs. AVIF (6,5)。
Aby jednak Next Generation Format naprawdę działał, zwykle trzeba rozwiązać dwie kwestie:

1. Jak konwertować wsadowo historyczne biblioteki multimediów(W przeciwnym razie optymalizujesz tylko pod kątem “nowych obrazów przesłanych później”).
2. Czy wygenerować kopię, czy zastąpić oryginalny obraz?(Jest to ryzykowny przełom; skupimy się na “Zastąp i usuń oryginalny obraz” Plus WebP później).

Zalecany styl pisania:

• WebP: ogólnie preferowany jako domyślny (bardziej stabilna kompatybilność)
• AVIF: kolejny kierunek kompresji, odpowiedni dla dużych obrazów / dużych obrazów pierwszego ekranu / obrazów albumów (ale bardziejZależność od wsparcia środowiskowego）

---

2.4 Leniwe ładowanie powinno być używane poprawnie (nie jeden rozmiar dla wszystkich).

WordPress 5.5 i nowszeDomyślne leniwe ładowanieZdjęcie.
Zmniejsza to wykorzystanie przepustowości podczas początkowego renderowania:

• Leniwe ładowanie dla “zasobów pozaekranowych”
• Najbardziej krytyczny duży obraz na pierwszym ekranie (a w wielu przypadkach kluczowy obraz na pierwszym ekranie) często nie nadaje się do opóźnionego ładowania

---

2.5 Warstwa dostarczania: CDN / Image CDN

Kompresja, zmiana rozmiaru i formatowanie rozwiązują problem “mniejszych plików, które pasują”.
Jeśli jednak obrazy są zawsze pobierane z pewnej odległości od źródła, opóźnienie sieci nadal będzie miało znaczący wpływ na wrażenia z oglądania. W tym miejscu pojawia się rozwiązanie “warstwy dostarczania” (CDN/Image CDN).

Dwa typowe kierunki:

• Cloudflare Polish：Dokumentacja CloudflarePrzedstawiono polskie metody kompresji (bezstratna/stratna/WebP) i wspomniano, że kompresja za pomocą format=auto Dozwolony jest format WebP/AVIF.
• Jetpack Site Accelerator：Dokumentacja JetpackWyjaśnij, że zoptymalizuje obrazy i rozpowszechni je w swojej sieci wraz ze statycznymi zasobami.

Optymalizacja obrazu jest odpowiedzialna za jego zmniejszenie i dopasowanie.CDN jest odpowiedzialny za dostarczanie bliższych i bardziej stabilnych

3) Wybór: tylko dwie główne trasy

Najczęstszym błędem w optymalizacji obrazu nie jest “brak wtyczek”, ale zbyt wiele wtyczek prowadzących do duplikowania przetwarzania:
A kompresuje, B kompresuje, A konwertuje do WebP/AVIF, B konwertuje, A zmienia adresy URL, B przepisuje - nie można nawet powiedzieć, co dzieje się w stacji.

Zasady:

Jest tylko jedna droga do wyboru: albo cała darmowa kompresja lokalna, albo w chmurze.

• Trasa A (wszystkie bezpłatne połączenia lokalne):Plus WebP lub AVIF + EWW Image Optimizer(lub tylko jeden)
• Trasa B (potrójna opcja kompresji w chmurze):ShortPixel / Imagify / TinyPNG

---

3.1 Trasa A: Pełna bezpłatna lokalna (plus WebP lub AVIF lub EWW)

Trasa ta charakteryzuje się

• Nie polegasz na usługach kompresji stron trzecich “za miesiąc/za arkusz” (chociaż niektóre funkcje mogą być oferowane jako usługi opcjonalne).
• Koszt: przetwarzanie wsadowe może być bardziej wymagające dla serwera CPU/IO, co wymaga zwrócenia większej uwagi na “strategię i ryzyko”.”

3.1.1 Plus WebP lub AVIFRdzeniem jest “generowanie/zastępowanie”, nie jest to tradycyjne “narzędzie kompresji”.”

• Podczas generowania obrazów o pełnej objętości:Oryginalny identyfikator pliku obrazu jest zastępowany przez WebP/AVIF, oryginalny plik jest usuwany, a adres URL w treści jest zastępowany.。
• Wtyczka udostępnia polecenia WP-CLI i przypomina: WP-CLI jest bardziej niezawodne, gdy istnieje wiele plików.

Oznacza to, że zamiast “po cichu generować dla ciebie WebP”, może to byćMigracja aktywów(Zwłaszcza jeśli włączysz opcję “Zastąp i usuń oryginalny obraz”).

Różnice między dwoma modelami

Tryb 1: Zachowanie oryginalnego obrazu + wygenerowanie kopii WebP/AVIF (bardziej stabilne)

• Plusy: Łatwiejszy powrót w przypadku problemów z kompatybilnością
• Koszt: Zwiększy się zużycie dysku (oryginalny obraz + nowy format + miniatury w wielu rozmiarach).

Tryb 2: Zastąpienie i usunięcie oryginalnego obrazu (bardziej agresywne)

• Zalety: dyski nie rozszerzają się tak szybko; odniesienia do stacji przechodzą bezpośrednio do nowego formatu
• Ryzyko: “zmieniasz zasoby + zmieniasz odniesienia”, co zwiększa koszty rozwiązywania problemów ze zgodnością (zwłaszcza jeśli niektóre zewnętrzne systemy lub logika motywów zależą od oryginalnej nazwy pliku/ścieżki/formatu).

Typowe pułapki Plus WebP lub AVIF

1. Po wymianie całej biblioteki niektóre obrazy stron są wyświetlane nieprawidłowo.
   Powodem tego zazwyczaj nie jest to, że obraz jest “uszkodzony”, ale że jakieś ogniwo w łańcuchu zastępowania adresów URL, buforowania, polityki miniatur itp. jest nieprawidłowe.
2. Im większa liczba miniatur, tym większy zakres zmian
   WordPress generuje wiele rozmiarów podczas przesyłania obrazu; motywy/wtyczki mogą również dodawać więcej rozmiarów. Pełne zastąpienie oznacza, że możesz zmienić bardzo dużą kolekcję plików.
3. Samo przeprowadzenie migracji formatu niekoniecznie oznacza, że wolumin jest zawsze najmniejszy
   WebP/AVIF są generalnie mniejsze, ale “strategia rozmiaru” i “strategia kompresji” są nadal krytyczne. Nie myśl o Plus WebP jako o “jednym kliknięciu szybciej”.

---

3.1.2 EWWW Image Optimizerprzedstawiciel swobodnej kompresji lokalnej

Strona wtyczki EWWW jest bardzo dobrze wypozycjonowana:

• Można go zoptymalizować na serwerze za pomocą szeregu narzędzi (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp itp.).
• Możesz także odciążyć przetwarzanie zużywające CPU na swoim serwerze (opcjonalnie), jeśli potrzebujesz wyższej kompresji lub większej oszczędności CPU.

Jaka powinna być rola EWW w Trasie A?

Jeśli używasz Plus WebP jako “strategii migracji/zastąpienia formatu”, to EWW jest lepszym rozwiązaniem:

• Kompresja i optymalizacja objętości(w szczególności redukcja wagi surowych zasobów, takich jak JPG/PNG)
• Optymalizacja wsadowa biblioteki multimediów historycznych(ukierunkowanie na “zmniejszenie objętości”, a nie “zastąpienie adresu URL”).

Typowy dół EWW

1. Zwiększone obciążenie serwera podczas optymalizacji wsadowej
   Ponieważ lokalna kompresja pochłania CPU/IO, rozwiązaniem nie jest “nie używaj go”, ale “wsad, niski szczyt, opcja offload/chmura w razie potrzeby”.
2. “WebP jest generowany” nie oznacza, że frontend musi generować WebP.
   Wiele wtyczek cierpi z powodu tego nieporozumienia: generowanie to jedno, strategie dostarczania (przepisywanie, tagi obrazów, trafienia z pamięci podręcznej itp.) to drugie.
3. Robienie w kółko tego samego z innymi wtyczkami
   Jeśli wybierzesz drogę A, staraj się nie nakładać kompresji chmury typu ShortPixel/Imagify/TinyPNG; jeśli wybierzesz drogę B, nie włączaj logiki zastępującej Plus WebP. Podstawowa zasada:Jedna droga do końca.

---

3.2 Ścieżka B: Potrójny wybór kompresji w chmurze (ShortPixel / Imagify / TinyPNG)

Ta trasa jest odpowiednia dla osób, które “chcą oszczędzać zasoby serwera, chcą wykonywać partie przy mniejszym wysiłku i akceptują rozliczenia za kredyt / za objętość”.
Jednak najbardziej mylącą kwestią dotyczącą kompresji w chmurze jest to:Darmowe kredyty nie są tak proste jak “darmowe arkusze”!.. Liczba rozmiarów miniatur, to, czy WebP/AVIF jest generowany, czy nie, oraz to, czy jest on wielokrotnie poddawany ponownemu ciśnieniu, może znacząco wpłynąć na zużycie.

Poniżej wyjaśniono: co się dzieje z darmowymi/opłatami, jak odliczane są kredyty, jakie pułapki są najbardziej prawdopodobne i jakie typy witryn są odpowiednie.

---

3.2.1 ShortPixel100 darmowych kredytów/miesiąc, ale kredyty są zużywane przez miniatury i powiększenia WebP/AVIF.

Co się dzieje z darmowymi/płatnymi usługami?

Opis wtyczki ShortPixel wyraźnie stwierdza:

• 100 darmowych kredytów miesięcznie
• Istnieją również “Dodatkowe nieograniczone kredyty miesięczne” (strona wtyczki zawiera informacje o odpowiednich cenach).
• Dostępne również jako “jednorazowe pakiety kredytów, które nigdy nie wygasają” (z informacją o cenie początkowej).

Wskazówka:

• Darmowa: przyznanie określonej liczby kredytów miesięcznie na lekkie witryny lub testy
• Jednorazowe pakiety: odpowiednie dla witryn z dużymi bibliotekami multimediów, które chcą jednorazowo wyczyścić swoje zapasy (kup raz i zużyj, zwykle nie wygasają).
• Miesięczny/Nieograniczony: odpowiedni dla witryn z ciągle aktualizowanymi obrazami i długoterminową stabilną optymalizacją.

Oficjalny KB ShortPixel podał również aktualizację “One Time Pack vs Unlimited Monthly”.wyraźne wyjaśnienieUnlimited Monthly to płatność miesięczna (lub roczna), która oferuje nieograniczone kredyty ze stałym przydziałem CDN; jednorazowe kredyty, które nie wygasają, dając większą kontrolę nad wykorzystaniem na żądanie.

Podsumowując: jak obliczane są kredyty ShortPixel?

Oficjalna dokumentacja ShortPixel KB był bardzo dosadny:

• WordPress generuje wiele miniatur podczas przesyłania obrazu;
• Każda optymalizacja miniatury liczy się jako kredyt；
• W przypadku wybrania opcji wygenerowania pliku WebP lub AVIFKażda wersja WebP/AVIF oryginalnego obrazu i miniatury zużywa dodatkowy kredyt.；
• Możesz wykluczyć niektóre miniatury z optymalizacji, aby zmniejszyć zużycie kredytów.

Przykład kredytów：

Załóżmy, że przesyłasz 1 obraz, a motyw/wtyczka generuje 8 miniatur:

• Optymalizacja tylko oryginalnego obrazu + miniatur: 1 (oryginał) + 8 (miniatury) = 9 punktów
• Jeśli chcesz również wygenerować WebP/AVIF: jeszcze jedna wersja next-gen dla każdego z 9 powyższych → +9 kredytów.
  Innymi słowy, to, co uważasz za “1 zdjęcie”, może w rzeczywistości pochłaniać blisko “dwucyfrowe kredyty”.

Więc:“Darmowe 100 kredytów” to nie to samo co “darmowe 100 zdjęć”.

Najczęstsze pułapki ShortPixel

1. Darmowe 100 kredytów szybko się kończy
   Przyczyna: dużo miniatur + dodatkowe kredyty za generowanie WebP/AVIF.
   sugestia：

• W pierwszej kolejności należy ocenić liczbę miniatur witryny
• Wyklucz niepotrzebne rozmiary miniatur (optymalizuj tylko te rozmiary, które będą faktycznie używane).
• Określenie strategii kompresji przed masowym uruchomieniem pozwala uniknąć wielokrotnych prób i błędów.

2. Łączenie innych wtyczek konwertera w tym samym czasie
   Jeśli masz zamienniki Plus WebP i ShortPixel generujące / wstawiające tagi nowej generacji, logika się kumuluje i staje się trudniejsza do rozwiązania. W przypadku trasy B, niech ShortPixel zrobi to sam.
3. Myślałem, że jak to zainstaluję, to będzie “WebP/AVIF na pierwszym planie”.”
   Strona wtyczki ShortPixelWspomniano, że konwertuje WebP/AVIF i może dodawać obrazy nowej generacji do strony głównej (np. poprzez tagowanie).
   Jednak nadal ważne jest, aby zweryfikować wyniki po wykonaniu tej czynności.

---

3.2.2 ImagifyBezpłatnie: 20MB/miesiąc; kwota odejmowana zgodnie z “oryginalnym rozmiarem obrazu + liczbą miniatur”, wielokrotne odejmowanie w przypadku dużej presji.

Darmowa kwota i pozycjonowanie

Oficjalna strona cenowa ImagifyPismo jest wyraźne:Darmowe konto Miesięczny limit 20MB。
Strona wtyczki wyjaśnia również, że może ona kompresować, zmieniać rozmiar i konwertować WebP/AVIF.

W jaki sposób odliczana jest kwota?

Oficjalna dokumentacja Imagify “How is Quota Usage Calculated?” w bardzo przejrzysty sposób opisuje mechanizm odliczeń:

• Liczba miniatur wpływa na zużycieNa przykład, jeśli masz 10 rozmiarów miniatur, optymalizacja 1 obrazu staje się optymalizacją 11 obrazów (oryginał + 10 miniatur), które wszystkie przyczyniają się do zużycia limitu.
• Odliczenie kwoty zgodnie z rozmiarem oryginalnego dokumentuNa przykład, jeśli wyślesz obraz o rozmiarze 100 KB do Imagify, 100 KB zostanie odjęte od limitu.
• Zmiana poziomu kompresji i ponowna optymalizacja spowoduje ponowne zużycie przydziału.。
• Ten sam klucz API może być używany dla wielu witryn, ale przydziały są współdzielone między nimi.

Jest to “podstawowy sposób rozumienia” Imagify:
To bardziej jak pakiet ruchu: odejmuje tyle, ile wysyłasz; im więcej masz miniatur, tym więcej odejmuje; i powtórzysz odliczenie, jeśli wielokrotnie go naciśniesz.

Łatwy do odczytania przykład limitu Imagify

Załóżmy, że przesyłasz oryginalny obraz o rozmiarze 800 KB, a witryna generuje 8 miniatur.

• Imagify optymalizuje, aby uwzględnić “oryginalny obraz + 8 miniatur” (jeśli zdecydujesz się zoptymalizować je wszystkie), co oznacza, że ta pojedyncza czynność zużywa kwotę zbliżoną do “oryginalnego rozmiaru wszystkich tych plików łącznie”.
  Dlatego niektóre witryny uważają, że “20MB szybko się wyczerpuje”: nie chodzi o to, że Imagify nie wystarcza, ale o to, że przesyłasz zbyt wiele obrazów naraz, zbyt wiele miniatur i prawdopodobnie próbujesz poziomów kompresji w kółko.

Najczęstsze pułapki Imagify

1. Free 20MB Za mało, by wykonać “czyszczenie historii całej witryny”
   20MB zwykle lepiej nadaje się do testowania z niewielkimi aktualizacjami; jeśli biblioteka multimediów jest już duża, jednorazowe czyszczenie prawdopodobnie będzie wymagało aktualizacji.
2. Wielokrotne dostosowywanie poziomów kompresji prowadzi do powielania zużycia limitów.
   Imagify wyjaśnia, żePonowna optymalizacja ponownie zużyje limit.
   Sugeruję, abyś jasno określił “strategię” na tej stronie:

• Zacznij od niewielkiej liczby obrazów, aby określić poziom kompresji oraz wygląd i sposób działania.
• Określ strategię, a następnie uruchom ją masowo
  Unikanie powtarzania prób i błędów w pełnej bibliotece

3. Współdzielenie klucza API przez wiele witryn prowadzi do “niewytłumaczalnego zmniejszenia limitu”.”
   W przypadku użycia tego samego klucza API dla więcej niż jednej stacji, limit jest współdzielony.
   Dlatego w scenariuszach zespołowych / wielostanowiskowych najlepiej jest jasno określić, które stacje są współdzielone, a które używane indywidualnie, aby uniknąć niekontrolowanych budżetów.

---

3.2.3 TinyPNG(Tiny Compress Images): darmowe 500 kredytów/miesiąc; przejście na WebP/AVIF spowoduje “odjęcie dodatkowego 1 kredytu za każdy rozmiar”.”

Darmowe kredyty i ich pomysły na rozliczenia

Strona wtyczki WordPress TinyPNG jest bardzo przejrzysta:

• 500 kredytów miesięcznie za darmo
• W sekcji “Ogólna instalacja WordPress” można prawdopodobnie skompresować plik Około 100 zdjęć/miesiąc
• Jeśli jednak włączona jest konwersja AVIF lub WebP:Każdy rozmiar obrazu zużywa dodatkowy kredytWięc przypuszczalnie można go tylko skompresować i przekonwertować Około 50 zdjęć/miesiąc(w zależności od liczby posiadanych rozmiarów miniatur).

W międzyczasie, Tinify (twórcy TinyPNG/TinyJPG) również stworzyli swoje Strona z cennikiem APIOpis: Zarejestruj się i otrzymaj 500 bezpłatnych uciśnięć miesięcznie; następnie będziesz rozliczany według liczby udanych uciśnięć, bez obowiązkowej subskrypcji.

Podsumuj sposób rozumienia TinyPNG w jednym zdaniu:
Zlicza kredyty; im więcej masz rozmiarów miniatur i im więcej WebP/AVIF masz włączonych, tym szybciej zużywane są kredyty.

Łatwe do odczytania przykłady kredytów TinyPNG

Załóżmy, że witryna generuje 8 rozmiarów miniatur dla każdego obrazu:

• Tylko kompresja: oryginał + 8 miniatur → Wymagane 9 punktów
• Jeśli konwersja WebP/AVIF jest włączona: jeden dodatkowy punkt za rozmiar → prawdopodobnie prawie podwójny!
  Odpowiada to opisowi na stronie wtyczki: po włączeniu darmowa kwota zmienia się z około “100 kart/miesiąc” na “50 kart/miesiąc”.

Najczęstsze pułapki TinyPNG

1. 500 kredytów = 500 zdjęć
   Tak nie jest. Jest on zużywany przez “rozmiar/wariant obrazu”. Strona wtyczki wyraźnie ostrzega, że “Konwersje odejmują dodatkowy 1 kredyt za każdy rozmiar obrazu”.
2. Motywy/wtyczki e-commerce generują zbyt wiele rozmiarów, a liczba darmowych kredytów znacznie spada
   Im więcej jest rozmiarów, tym łatwiej jest skalować i konsumować kredyty.
3. Po włączeniu konwersji okazuje się, że kredyty są nagle niewykorzystane.
   To nie błąd, to mechanizm rozliczeniowy.
   Porady dotyczące strategii:

• Jeśli darmowa faza jest używana głównie do kompresji i redukcji wagi, możesz zacząć od samej kompresji, a następnie włączyć konwersję, gdy upewnisz się, że struktura witryny jest stabilna i naprawdę potrzebujesz następnej generacji.

4) Zalecenia dotyczące pod-scenariusza: jak wybrać różne rodzaje lokalizacji

Również WordPress, witryny z treścią, witryny e-commerce, portfolia i witryny członkowskie nie mają tych samych “punktów nacisku” na obrazy.

4.1 Strony z treścią/blogi (dużo grafik w artykułach, średnia częstotliwość aktualizacji)

Zalecenia priorytetowe:

1. Strategia doboru rozmiaru (krok 1)
2. Kompresja (krok 2)
3. WebP (krok 3)

Bardziej odpowiednia trasa:

• Chcesz zapisać: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Jeśli chcesz przejść za darmo: Trasa A (Plus WebP + EWW), ale zaleca się rozpoczęcie od “trybu konserwatywnego (bez usuwania oryginalnego obrazu)”, aby ocenić ryzyko.

Typowy dół:

• Pierwszy obraz na stronie artykułu jest bardzo duży, niewłaściwa strategia leniwego ładowaniaSpowalnia pierwszy ekran

4.2 Witryna e-commerce/produktowa (wiele miniatur, wiele wariantów obrazu, stabilność w pierwszej kolejności)

W handlu elektronicznym najprawdopodobniej problemem nie jest “efekt kompresji nie jest dobry”, ale “optymalizacja niektórych rozmiarów nie jest właściwa, brakuje miniatur, przednie komponenty nie mogą uzyskać obrazu”.

Zalecenia priorytetowe:

1. Stabilność przede wszystkim: konserwatywna strategia kompresji, nie zastępuj od razu całej biblioteki.
2. Ocena rozmiarów miniatur: motywy e-commerce zwykle generują więcej rozmiarów, a ich zużycie jest większe (ShortPixel/TinyPNG jest szczególnie zauważalne).
3. Przeprowadzenie walidacji na małą skalę przed partią (bardzo ważne)

Bardziej odpowiednia trasa:

• Ścieżka B jest zwykle bardziej bezproblemowa: ShortPixel/Imagify/TinyPNG mogą być wsadowe, a kluczowe znaczenie ma zrozumienie mechanizmu kwot i oszacowanie kosztów z wyprzedzeniem
• Trasa A jest w porządku, ale należy być bardziej ostrożnym z zachowaniem “nadpisywania identyfikatorów/usuwania oryginalnych obrazów/zamieniania adresów URL” Plus WebP: jest to migracja zasobów i nie zaleca się zastępowania całości od razu.

4.3 Portfolio/stacja fotograficzna (wrażliwa na jakość pojedynczego obrazu, duże obrazy, wysokie wymagania dotyczące wyświetlania)

Zalecenia priorytetowe:

1. Polityka rozmiaru (kontrola obszaru wyświetlania)
2. Strategia kompresji (lepiej być większym niż zmiażdżyć szczegóły)
3. WebP/AVIF (duże korzyści dla sceny są oczywiste, ale należy zweryfikować widok)

Bardziej odpowiednia trasa:

• ImagifyOdliczaj kwotę zgodnie z “rozmiarem oryginalnego zdjęcia”, ten rodzaj strony jest łatwiejszy do “kontrolowania budżetu” (wiesz, ile odliczyć za każde duże zdjęcie), ale unikaj powtarzających się represji.
• ShortPixelJeśli rozmiar miniaturki jest niewielki, kredyty są również bardzo intuicyjne; ale jeśli generujesz wiele rozmiarów +next-gen, zużycie kredytów będzie większe i musisz planować z wyprzedzeniem.

5) Porównanie kwot/rozliczeń: spojrzenie z perspektywy “darmowe to za mało”

Która oferta jest lepsza i jak długo potrwa darmowa?

5.1 Trzy modele obciążenia zwrotnego

• ShortPixel(kredyty)Kredyty oparte na “oryginalnym obrazie + liczbie miniatur”; dodatkowe kredyty zostaną odjęte za każdą wygenerowaną wersję WebP/AVIF.
• Imagify(limit MB)Odejmij limit zgodnie z “oryginalnym rozmiarem pliku”; im więcej miniatur, tym więcej odliczeń; ponowne naciśnięcie spowoduje ponowne odjęcie.
• TinyPNG(kredyty)500 kredytów miesięcznie; włączenie konwersji WebP/AVIF odejmuje dodatkowe kredyty za każdy rozmiar obrazu.

5.2 Metody szybkiego szacowania

Można to oszacować w następujący sposób:

1. Znajdź losowy “oryginalny obraz, który często przesyłasz” i zobacz, jak duży jest (np. 300KB / 1MB / 3MB).
2. W zależności od tego, ile rozmiarów miniatur generuje witryna (np. 5/10/20)
3. Zdecyduj, czy chcesz wygenerować WebP/AVIF (tak/nie).

Następnie użyj następującej “matematyki mentalnej”, aby zrozumieć konsumpcję:

• ShortPixel≈ (1 + liczba miniatur) kredytów na obraz; jeśli generujesz WebP/AVIF, ≈ podwaja się ponownie (ponieważ wersja następnej generacji również pobiera kredyty).
• ImagifyKażdy obraz ≈ (oryginalny rozmiar + rozmiar każdej miniatury) odejmuje limit; zmiana poziomu kompresji i ponowna kompresja ponownie odejmuje limit.
• TinyPNG500 darmowych kredytów; jeśli witryna generuje wiele rozmiarów na obraz, a konwersja jest włączona, liczba darmowych kredytów znacznie spada (strona wtyczki daje wizualne oczekiwanie “~ 100 kredytów / miesiąc” vs. “~ 50 kredytów / miesiąc”).

6. ostrzeżenia o ryzyku

Ryzyko 1: Nie pozwól, aby wiele wtyczek robiło w kółko to samo

Jest to najczęstsze “źródło katastrofy”.”

• Trasa A:Plus WebP lub AVIF + EWWW(Podziel pracę między te dwa urządzenia, nie wykonuj podobnych konwersji i dostaw w tym samym czasie lub zainstaluj tylko jedno z nich).
• Ścieżka B: ShortPixel / Imagify / TinyPNG wybierz trzy(wybierz jedną dla kompresji i next-gen)

Ryzyko 2: Plus WebP “Nadpisz ID / Usuń oryginalny obraz / Zastąp adres URL” to migracja zasobów.

Podkreślenie dodane:Plus WebP Opis wyraźnie stwierdza, że pełne generowanie nadpisuje oryginalny identyfikator obrazu, usuwa oryginalny plik i zastępuje adres URL zawartości.
Oznacza to, że nie jest to “małe ustawienie, które można wycofać w dowolnym momencie”, ale zmiana na poziomie aktywów.

Sugerowana strategia powinna być następująca:

• Najpierw mały test (od kilkudziesięciu do kilkuset)
• Upewnij się, że wyświetlanie frontendu, miniatury i aktualizacje pamięci podręcznej działają prawidłowo.
• Ponowne rozważenie pełnego przetwarzania biblioteki

Ryzyko 3: Rzeczywiste zużycie “darmowych kredytów” na kompresję w chmurze zależy od liczby miniatur i wyboru następnej generacji.

• ShortPixelMiniatury i next-gen znacząco wpływają na kredyty.
• TinyPNGWłączenie WebP/AVIF odejmuje dodatkowy kredyt za każdy rozmiar obrazu.
• Imagify: odejmowane zgodnie z rozmiarem oryginalnego obrazu, im więcej miniatur odejmowanych, tym większy nacisk spowoduje powtórzenie odejmowania!

Ryzyko 4: “Wygenerowany WebP/AVIF” nie oznacza “WebP/AVIF jest dostarczany przez front office”.”

Wiele osób czuje się “nie szybciej” po konwersji, ponieważ frontend nadal produkuje JPG/PNG (buforowanie/przepisywanie/tagowanie/negocjacje przeglądarki itp. nie są dostosowane).

7. jak zweryfikować, czy weszła ona w życie po jej wykonaniu

4 bardzo proste punkty walidacji:

1. Czy ta sama strona jest odświeżana po raz drugi i ładuje się bardziej spójnie i szybciej?(Buforowanie i optymalizacja fizycznego poczucia tego, czy działa)
2. Czy rozmiary obrazów ładowanych na telefony komórkowe i komputery stacjonarne znacząco się różnią?(responsywny) srcset/sizes (niezależnie od tego, czy działają)
3. Sprawdzenie kilku obrazów: czy obecne są pliki/zasoby WebP lub AVIF.(Czy strona faktycznie używa next-gen）
4. Próbka kilku obrazów: powiększ, aby zobaczyć, czy są wyraźnie zamglone, czy tekst jest rozmyty.(skompresowana masa nie jest nadmierna)

Jeśli wszystkie cztery elementy się zgadzają, wybrana trasa została uruchomiona. Następny krok. CDN “Warstwa dostarczania”całość będzie bardziej stabilna.

8) Zalecenia dotyczące działań

1. Najpierw wybierz trasę:

• Staram się być tak wolny, jak to tylko możliwe.Plus WebP lub AVIF + EWW (lub tylko jeden z nich)
• Chcesz oszczędzać zasoby serwera, płać za kredyt, aby mieć większy spokój duchaShortPixel / Imagify / TinyPNG - wybierz jedną z nich!

2. Zrób najpierw mały test (kilkadziesiąt)
3. Upewnij się, że wszystko jest w porządku przed wsadem
4. Wymagana jest dalsza poprawa stabilności dostaw:czytać CDN Przyspieszenie

typowe problemy

1) Ile wtyczek muszę zainstalować? Czy mogę zainstalować je wszystkie?

Spróbuj wybrać tylko jedną trasę.

• Trasa A: Plus WebP lub AVIF + EWW Image Optimizer (lub tylko jeden z nich)
• Ścieżka B: ShortPixel / Imagify / TinyPNG - wybierz jedną!
  W tej samej stacji w tym samym czasie pozwala się wielu wtyczkom na “kompresję / przesyłanie WebP / AVIF / zmianę adresu URL / przepisywanie dostarczania”, co najprawdopodobniej będzie coraz bardziej chaotyczne, ale także najtrudniejsze do sprawdzenia.

2) Czy WordPress nie obsługuje już WebP/AVIF? Czy nadal potrzebuję wtyczki?

Musi zostać rozdzielony:
“Obsługa przesyłania/używania” ≠ “Automatyczna konwersja/automatyczne dostarczanie”.
WordPress 6.5 nie konwertuje również automatycznie starych plików JPG/PNG do WebP/AVIF, ani nie wykonuje automatycznie całego procesu “eksportowania AVIF/WebP do przeglądarki i tworzenia kopii zapasowych”. Zazwyczaj potrzebna jest wtyczka lub usługa, aby historyczna biblioteka multimediów działała.

3) Jaki jest najbardziej “opłacalny” krok w optymalizacji obrazu?

Zazwyczaj jest to Najpierw należy poprawnie ustawić “rozmiary” (srcset/sizes).。
Wiele witryn działa wolno nie dlatego, że nie mają kompresji, ale dlatego, że strona ma tylko 900 pikseli, a użytkownik jest proszony o pobranie obrazu 3000 pikseli. Kompresja oszczędza KB, ale “niewłaściwy rozmiar” sprawi, że użytkownik pobierze kilka razy więcej danych za darmo.

4) Jak mogę się upewnić, że ładuję “mniejszy”, a nie oryginalny obraz na zawsze?

Przyjrzyjmy się dwóm zjawiskom:

• Podczas otwierania strony na telefonie komórkowym rozmiar pobranego obrazu jest zauważalnie mniejszy niż na komputerze stacjonarnym
• Ten sam obraz ładuje się z różnymi rozmiarami zasobów na różnych urządzeniach
  Jeśli oryginalny obraz jest pobierany w nieskończoność, częstym powodem jest to, że motyw/kompilator traktuje obraz jako obraz tła CSS lub niestandardowe dane wyjściowe, omijając wielorozmiarowość biblioteki multimediów za pomocą srcset.

5) Czy “WebP/AVIF generated” oznacza, że frontend musi generować WebP/AVIF?

Nie są równe.
Generowanie to tylko “warstwa plików”; to, czy frontend faktycznie dostarcza WebP/AVIF, zależy od przepisywania, zasad tagowania obrazów, trafień pamięci podręcznej, obowiązujących negocjacji przeglądarki i tak dalej. Po zakończeniu upewnij się, że “sprawdziłeś kilka obrazów pod kątem typów zasobów”.

6. Plus Co jest takiego niebezpiecznego w WebP lub AVIF? Czy mogę uruchomić całą bibliotekę jednym kliknięciem?

Jego punktem ryzyka nie jest “kompresja”, aleZmiany w poziomach migracji aktywów：

• Pełne generowanie może nadpisać oryginalny identyfikator pliku obrazu, usunąć oryginalny plik i zastąpić adres URL w treści.
  powód dlaczegoNie zaleca się wymiany całej biblioteki od razu po instalacjiPrzetestuj na małą skalę (dziesiątki do setek) + miej dostępne kopie zapasowe przed rozważeniem pełnego przetwarzania biblioteki.

7) Jaki jest wybór między dwoma trybami Plus WebP: zachowaj oryginalny obraz vs. zastąp i usuń oryginalny obraz?

Łatwe do zrozumienia:

• Tryb 1: Zachowanie oryginalnego obrazu + wygenerowanie kopii WebP/AVIF (bardziej stabilne)Wygodny do wycofywania, ale dysk rośnie (oryginalny obraz + nowy format + miniatury o wielu rozmiarach).
• Tryb 2: Zastąpienie i usunięcie oryginalnego obrazu (bardziej agresywne)Dyski są mniej podatne na rozrost, ale “zmieniasz zasoby + zmieniasz odniesienia”, co sprawia, że rozwiązywanie problemów ze zgodnością jest droższe.
  Im bardziej złożona witryna (e-commerce/wiele wtyczek/wiele rozmiarów), tym bardziej zalecane jest rozpoczęcie od bardziej stabilnego modelu.

8) Czy darmowa lokalna kompresja EWWW Image Optimizer jest wystarczająca? Czy obciąży ona serwer?

EWW jest bardziej “lokalnym kompresorem”: zjada CPU/IO.
Często zdarza się, że obciążenie wzrasta podczas optymalizacji wsadowej, co nie oznacza, że “nie działa”, ale raczej, że strategia powinna być właściwa: wsad, niskie szczyty i opcje offloadingu / chmury, jeśli to konieczne.
Jeśli szukasz oszczędności lub masz ograniczone zasoby serwera, trasa B jest bardziej przyjazna dla serwerów.

9. 100 darmowych kredytów ShortPixel/miesiąc, dlaczego mam wrażenie, że zniknęły po kilku zdjęciach?

z tytułu Kredyty to nie “liczba zdjęć”.”Wraz z next-genem zostanie powiększona miniatura:

• Oryginalny obraz + każda miniatura liczy się jako kredyt
• W przypadku wygenerowania WebP/AVIF, za każdą odpowiednią wersję zużywany jest dodatkowy kredyt.
  Tak więc to, co uważasz za “1 obraz”, może w rzeczywistości pochłaniać blisko “dwucyfrowe kredyty”. shortPixel

10. darmowy 20MB/miesiąc Imagify, dlaczego również szybko się kończy?

Imagify jest bardziej jak “pakiet drogowy”:

• Tak jak wysłałeś.Oryginalny rozmiar plikuodliczanie kwot
• Im więcej masz miniatur, tym więcej zużywasz
• Zmiana poziomu kompresji w celu ponownej optymalizacji spowoduje ponowne zużycie przydziału.
• Ten sam klucz API dla wielu witryn, współdzielenie limitów
  Tak więc “20MB wkrótce się skończy” jest często spowodowane zbyt dużymi obrazami, zbyt dużą liczbą miniatur lub powtarzającymi się próbami i błędami.

11. TinyPNG jest darmowy za 500 kredytów/miesiąc, dlaczego wtyczka mówi, że to tylko około 100 kredytów/miesiąc, a potem 50 kredytów/miesiąc z WebP/AVIF?

Ponieważ kredyty TinyPNG są również powiększane przez “size/variant”:

• Zwykła instalacja WordPress prawdopodobnie kompresuje około 100 arkuszy miesięcznie.
• Włącz konwersję AVIF lub WebP:Każdy rozmiar obrazu zużywa dodatkowy kredytPrawdopodobnie można więc skompresować i przekonwertować tylko około 50 obrazów miesięcznie (w zależności od liczby rozmiarów miniatur).
  Tak więc 500 kredytów ≠ 500 zdjęć.

12) Ile miniatur znajduje się na mojej stronie? Dlaczego ma to tak duże znaczenie?

WordPress generuje wiele rozmiarów podczas przesyłania obrazu; motywy/wtyczki (zwłaszcza e-commerce) mogą dodawać więcej rozmiarów.
Kredyty/kwoty kompresji w chmurze to zazwyczaj “oryginał + miniatury razem”, więc im więcej miniatur, tym mniej darmowych kredytów do wykorzystania.

13) Czy leniwe ładowanie jest zawsze szybsze? Dlaczego niektórzy twierdzą, że leniwe ładowanie spowalnia działanie?

Leniwe ładowanie jest odpowiednie dla “zasobów poza ekranem”.
Jeśli pierwszy ekran najbardziej krytycznego dużego obrazu jest również opóźniony w ładowaniu, może spowolnić pierwszy ekran. WordPress 5.5 od domyślnego leniwego ładowania jest w porządku, ale nie “jeden rozmiar pasuje do wszystkich”.

14. podróżuję trasą A lub B. Kiedy potrzebuję CDN / Picture CDN?

Kompresja, zmiana rozmiaru i formatowanie rozwiązują problem “mniejszych plików, które pasują”;
CDN rozwiązuje problem dostarczania bliższych i bardziej stabilnych。
Gdy obrazy są pobierane z dużej odległości od witryny źródłowej, co powoduje znaczne opóźnienia, wówczas uzupełnienie CDN/obrazów o CDN (np. Cloudflare Polish / Jetpack Site Accelerator) będzie ogólnie bardziej stabilne, czytaj Akceleracja WordPress CDN。

15) Jaki jest najłatwiejszy sposób sprawdzenia, czy “to naprawdę działa” po zakończeniu?

Najbardziej efektywna czasowo metoda weryfikacji:

• Czy ta sama strona jest odświeżana po raz drugi i ładuje się bardziej spójnie i szybciej?
• Czy rozmiary obrazów ładowanych na telefony komórkowe i komputery stacjonarne są zauważalnie różne (czy srcset / rozmiary mają znaczenie)?
• Sprawdzenie kilku obrazów: czy obecne są pliki/zasoby WebP lub AVIF.
• Próbka kilku obrazów: powiększ, aby zobaczyć, czy są wyraźnie zamglone, czy tekst jest rozmyty.