Ottimizzazione immagini del sito web

L'ottimizzazione delle immagini è uno degli aspetti più “gratificanti” delle prestazioni di WordPress: a parità di struttura della pagina e di tema, se le dimensioni, la formattazione e la distribuzione delle immagini sono corrette, l'esperienza di caricamento migliorerà immediatamente.

Ma l'ottimizzazione delle immagini è anche il modo più semplice per fare confusione, non perché sia tecnicamente troppo difficile, ma perché le informazioni sono troppo frammentate:
Si legge qualche articolo, si sa che “compressione”, “WebP/AVIF”, “caricamento pigro”, e poi si guarda l'introduzione del plugin e si dice “gratis ogni mese! 100 crediti al mese”, “20MB gratis”, “1 credito per immagine”, ma più leggo, più mi confondo... È abbastanza gratuito? Come dedurre il costo? Avete frainteso “la stessa cosa”? E soprattutto:Ha avuto effetto dopo averlo fatto o no?

Questo articolo fa solo tre cose:

1. Fornisce un eseguibiletabella di marcia (anche fig.)(Cosa fare prima, cosa fare dopo)
2. Siate chiari sull'opzione che state scegliendo (qual è la differenza tra gratuito e a pagamento e per chi è adatto ciascuno di essi)
3. Scrivete in anticipo le insidie più comuni (così non dovrete cercare in giro per risolvere i problemi quando avrete finito)

1. Il bilancio: cosa offre e cosa non offre WordPress

Se non si capisce prima cosa fa il nucleo di WordPress, è facile fare una delle due cose:

• Invece di utilizzare la “capacità gratuita” di cui si dovrebbe godere, si spende tempo/paga denaro per costruire la ruota più e più volte.
• Pensavo che WordPress avrebbe “convertito automaticamente tutte le vecchie immagini in WebP/AVIF”, ma non è così!

Il nucleo di WordPress è dotato di queste funzionalità chiave:

• Immagini reattive (srcset/dimensioni)A partire da WordPress 4.4, il nucleo produrrà le immagini per i file srcset 与 sizese utilizza le immagini multidimensionali generate durante il caricamento per consentire al browser di scegliere una risorsa più appropriata da caricare in base alle condizioni dello schermo.
• Caricamento pigro nativoA partire da WordPress 5.5 è possibile caricare le immagini in modo nativo e pigro per impostazione predefinita, utilizzando gli standard HTML. loading implementazione dell'attributo.
• Supporto per il caricamento di WebPDa WordPress 5.8 è possibile caricare e utilizzare WebP come JPEG/PNG (a condizione che l'ambiente di hosting supporti WebP).
• Supporto per il caricamento di AVIFDa WordPress 6.5 è possibile caricare e utilizzare AVIF come JPEG/PNG (dipende anche dal supporto dell'hosting).

Ma fate attenzione:
“Supporto per il caricamento/utilizzo” ≠ “Conversione automatica/consegna automatica”.
Vale a dire: anche se siete già su WP 6.5, i JPG/PNG nella vostra libreria multimediale non si trasformeranno da soli in WebP/AVIF; non otterrete automaticamente il link completo “output AVIF/WebP secondo le capacità del browser e fallback all'immagine originale per i browser non supportati”! --Questa parte di solito deve essere patchata da un plugin o da un servizio.

2. Tabella di marcia: ottimizzazione dell'immagine in 5 fasi

Cosa fare, perché, cosa fare per qualificarsi e cos'è un pit tipico.

2.1 Prima di tutto la “dimensione” (la più trascurata, ma la più gratificante)

Molte stazioni sono lente non perché la compressione non sia stata effettuata, ma perché laScaricata un'immagine di grandi dimensioni che si estende ben oltre l'area del display：
Ad esempio, se la pagina è in realtà larga solo 900px e si chiede al visitatore di scaricare l'immagine originale di 3000px, il browser non fa altro che “scaricarla e poi rimpicciolirla”. Questo spreca larghezza di banda, aumenta il tempo di decodifica e rallenta la prima schermata.

WordPress 4.4+Meccanismo di immagine reattivo（srcset/sizes) è stato progettato per affrontare proprio questo problema.

Fare ciò che conta come passaggio:

• Quando si apre una pagina su un telefono cellulare, le dimensioni dell'immagine scaricata devono essere significativamente più piccole rispetto a quelle del desktop.
• La stessa immagine viene caricata con risorse di dimensioni diverse su dispositivi diversi (invece di scaricare sempre l'immagine originale)

Le insidie più comuni:

• Esistono temi/costruttori che trattano i diagrammi come immagini di sfondo CSS, oppure li producono in modo personalizzato, aggirando così l'opzione srcsetIl risultato è stato una grande immagine del
• Si possono utilizzare letti di immagini collegati esternamente, blocchi di immagini di terze parti e si può anche bypassare il sistema multidimensionale generato dalla libreria multimediale.

---

2.2 Compressione (ridurre i KB, ma non “schiacciare” la qualità)

Il fulcro della compressione non è “più piccolo è meglio è”, ma “la differenza è appena visibile a occhio nudo, ma la riduzione di volume è evidente”.

Le regole sono le seguenti:

• Fotografie/scatti dal vivo (persone, prodotti, paesaggi): Priorità alla compressione con perdita (massimo guadagno)
• Schermate dell'interfaccia/immagini pesanti come il testoLa compressione dovrebbe essere più conservativa per evitare il testo sfocato.
• Logo/Icona: priorità SVG o discreto lossless (lossy è facile da incollare ai bordi)

Fare ciò che conta come passaggio:

• Riduzione significativa delle dimensioni delle immagini sulla maggior parte delle pagine
• Nessun rumore visibile, bordi sfuocati, interruzioni del blocco di colore, testo sfocato

---

2.3 WebP / AVIF (strategia di formato: più piccolo a parità di definizione)

WordPress supporta già il caricamento WebP (5,8) vs. AVIF (6,5)。
Ma per far funzionare davvero il formato Next Generation, di solito è necessario risolvere due questioni:

1. Come convertire in batch le librerie multimediali storiche(Altrimenti si ottimizza solo per le “nuove immagini caricate in seguito”).
2. Se generare una copia o sostituire l'immagine originale(Si tratta di una svolta rischiosa; ci concentreremo su “Sostituisci ed elimina immagine originale” di Plus WebP più avanti).

Stile di scrittura consigliato:

• WebP: generalmente preferito come predefinito (compatibilità più stabile)
• AVIF: un'ulteriore direzione di compressione, adatta a immagini di grandi dimensioni/immagini di grandi dimensioni per il primo schermo/immagini di album (ma piùDipendenza dal supporto ambientale）

---

2.4 Il caricamento pigro deve essere usato correttamente (non è una misura unica per tutti)

WordPress 5.5 in poiCaricamento pigro predefinitoImmagine.
Riduce l'utilizzo della larghezza di banda durante il rendering iniziale:

• Caricamento pigro per le “risorse fuori schermo”.”
• L'immagine di grandi dimensioni più critica della prima schermata (e in molti casi l'immagine chiave della prima schermata) è spesso inadatta al caricamento ritardato.

---

2,5 Strato di consegna: CDN / Foto CDN

La compressione, il dimensionamento e la formattazione risolvono il problema dei “file più piccoli che si adattano”.
Tuttavia, se le immagini vengono sempre estratte da una certa distanza dalla sorgente, la latenza della rete influisce comunque in modo significativo sull'esperienza. È qui che entra in gioco la soluzione “delivery layer” (CDN/immagine CDN).

Due direzioni tipiche:

• Polacco Cloudflare：Documentazione CloudflareVengono introdotti i metodi di compressione polacchi (lossless/lossy/WebP) e viene menzionato il fatto che la compressione con il metodo format=auto È consentito il formato WebP/AVIF.
• Acceleratore di siti Jetpack：Documentazione di JetpackSpiega che ottimizzerà le immagini e le distribuirà attraverso la sua rete insieme alle risorse statiche.

L'ottimizzazione delle immagini ha il compito di renderle più piccole e più appropriate.CDN Responsabile della fornitura di un sistema più vicino e più stabile.

3. Selezione: solo due percorsi principali

Il fallimento più comune nell'ottimizzazione delle immagini non è “nessun plugin”, ma troppi plugin che portano a una duplicazione dell'elaborazione:
A sta comprimendo, B sta comprimendo, A sta convertendo in WebP/AVIF, B sta convertendo, A sta cambiando gli URL, B sta riscrivendo - non si capisce nemmeno cosa stia succedendo nella stazione.

Regole:

C'è solo una strada da percorrere: la compressione locale o cloud di tutti e tre.

• Percorso A (tutti i locali gratuiti):Più WebP o AVIF + Ottimizzatore di immagini EWWW(o solo uno)
• Percorso B (opzione tripla di compressione cloud):ShortPixel / Imagify / TinyPNG

---

3.1 Percorso A: Locale libero completo (più WebP o AVIF o EWWW)

Questo percorso è caratterizzato da:

• Non vi affidate a servizi di compressione di terzi “al mese/per foglio” (anche se alcune funzioni possono essere offerte come servizi opzionali).
• Il costo: l'elaborazione batch può essere più affamata di server a CPU/IO, richiedendo una maggiore attenzione alla “strategia e al rischio”.”

3.1.1 Più WebP o AVIF: il nucleo è “generare/sostituire”, non è il tradizionale “strumento di compressione”.”

• Quando si generano immagini a pieno volume:L'ID del file immagine originale viene sovrascritto da WebP/AVIF, il file originale viene eliminato e l'URL nel contenuto viene sostituito.。
• Il plugin fornisce comandi WP-CLI e ricorda che WP-CLI è più affidabile quando ci sono molti file.

Questo significa che invece di “generare tranquillamente una WebP per voi”, potrebbe essere unaMigrazione delle attività(Soprattutto se si attiva l'opzione “Sostituisci ed elimina immagine originale”).

Differenze tra i due modelli

Modalità 1: mantenere l'immagine originale + generare una copia WebP/AVIF (più stabile)

• Pro: Più facile ripiegare in caso di problemi di compatibilità
• Costo: l'utilizzo del disco aumenterà (immagine originale + nuovo formato + miniature di dimensioni multiple)

Modalità 2: Sostituzione ed eliminazione dell'immagine originale (più aggressiva)

• Pro: i dischi non si espandono così velocemente; i riferimenti alle stazioni passano direttamente al nuovo formato
• Rischio: si tratta di “cambiare le risorse + cambiare i riferimenti”, il che rende più costoso risolvere i problemi di compatibilità (soprattutto se alcuni sistemi esterni o logiche dei temi dipendono dal nome del file/percorso/formato originale).

Insidie tipiche del Plus WebP o AVIF

1. Dopo aver sostituito l'intera libreria, alcune immagini di pagina vengono visualizzate in modo anomalo.
   Di solito il motivo non è che l'immagine è “rotta”, ma che qualche anello della catena di sostituzione dell'URL, della cache, della politica delle miniature, ecc. non è corretto.
2. Maggiore è il numero di miniature, maggiore è la portata della modifica.
   WordPress genera più dimensioni per il caricamento di un'immagine; anche i temi/plugin possono aggiungere altre dimensioni. La sostituzione completa comporta la modifica di un insieme molto ampio di file.
3. L'esecuzione di una migrazione di formato non significa necessariamente che il volume sia sempre il più piccolo.
   WebP/AVIF sono generalmente più piccoli, ma la “strategia di dimensione” e la “strategia di compressione” sono ancora fondamentali. Non pensate che il Plus WebP sia “un clic più veloce”.

---

3.1.2 Ottimizzatore di immagini EWWW: rappresentante della compressione locale libera

La pagina del plugin EWWW è posizionata molto bene:

• Può essere ottimizzato sul server utilizzando una serie di strumenti (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, ecc.).
• È anche possibile scaricare l'elaborazione che consuma CPU sul server (opzionale) se si desidera una compressione più elevata o un maggiore risparmio di CPU.

Quale dovrebbe essere il ruolo di EWWW nel percorso A?

Se si utilizza Plus WebP come “strategia di migrazione/sostituzione del formato”, EWWW è più adatto:

• Compressione e ottimizzazione dei volumi(in particolare la riduzione del peso delle risorse grezze come JPG/PNG)
• Ottimizzazione in batch della mediateca storica(mirando alla “riduzione del volume” piuttosto che alla “sostituzione dell'URL”)

Fossa tipica di EWWW

1. Carico elevato del server durante l'ottimizzazione dei batch
   Poiché la compressione locale consuma CPU/IO, la soluzione non è “non usarla”, ma “batch, picchi bassi, opzione offload/cloud se necessario”.
2. “Viene generata una WebP” non significa che il frontend deve produrre una WebP.
   Molti plugin soffrono di questo equivoco: una cosa è la generazione, un'altra sono le strategie di distribuzione (riscritture, tag di immagine, cache hit, ecc.).
3. Fare sempre la stessa cosa con altri plugin
   Se si sceglie la strada A, cercare di non sovrapporre la compressione cloud di tipo ShortPixel/Imagify/TinyPNG; se si sceglie la strada B, non attivare la logica di sostituzione Plus WebP. Principio fondamentale:Un percorso verso la fine.

---

3.2 Percorso B: Tripla scelta di compressione cloud (ShortPixel / Imagify / TinyPNG)

Questo percorso è adatto a chi “vuole risparmiare le risorse del server, vuole fare batch con meno sforzo e accetta la fatturazione per credito/per volume”.
Ma il punto più fuorviante della compressione del cloud è il seguente:I crediti gratuiti non sono così semplici come i “fogli gratuiti”!.. Il numero di dimensioni delle miniature, la generazione o meno di WebP/AVIF e la ripetuta ripressurizzazione possono incidere significativamente sui consumi.

Di seguito verranno spiegati: cosa succede con il free/fee, come vengono detratti i crediti, quali sono le insidie in cui è più probabile incorrere e quali sono i tipi di sito più adatti.

---

3.2.1 BrevePixel100 crediti gratuiti al mese, ma i crediti vengono consumati dalle miniature e dagli ingrandimenti WebP/AVIF.

Cosa sta succedendo con il free/paid

La descrizione del plugin ShortPixel indica chiaramente:

• 100 crediti gratuiti al mese
• Esistono anche “Crediti mensili extra illimitati” (la pagina del plugin fornisce informazioni sui prezzi corrispondenti).
• Disponibili anche come “pacchetti di crediti una tantum che non scadono mai” (con informazioni sul prezzo di partenza)

Suggerimento:

• Gratuito: concedere una certa quantità di crediti al mese per siti leggeri o per test.
• Pacchetti monouso: adatti a siti con grandi librerie multimediali che desiderano svuotare le proprie scorte in una sola volta (si acquista una volta e si consuma, di solito non scade).
• Mensile/ illimitato: adatto a siti con immagini continuamente aggiornate e ottimizzazione stabile a lungo termine

La KB ufficiale di ShortPixel ha anche fornito un aggiornamento su “One Time Pack vs Unlimited Monthly”.spiegazione esplicitaUnlimited Monthly è un pagamento mensile (o annuale) che offre crediti illimitati con un'assegnazione fissa di CDN; i crediti una tantum non scadono, consentendo all'utente di avere un maggiore controllo per utilizzarli secondo le proprie necessità.

In conclusione: come vengono calcolati i crediti ShortPixel?

Documentazione ufficiale di ShortPixel KB l'ha detto senza mezzi termini:

• WordPress genera più miniature quando si carica un'immagine;
• Ogni ottimizzazione delle miniature vale come credito；
• Se si sceglie di generare una WebP o un AVIF, il fileOgni versione WebP/AVIF dell'immagine originale e della miniatura consuma un credito aggiuntivo.；
• È possibile escludere alcune miniature dall'ottimizzazione per ridurre il consumo di crediti.

Esempio di crediti：

Supponiamo di caricare 1 immagine e che il tema/plugin generi 8 miniature:

• Ottimizzare solo l'immagine originale + le miniature: 1 (originale) + 8 (miniature) = 9 crediti
• Se si desidera generare anche WebP/AVIF: un'altra versione next-gen per ognuna delle 9 di cui sopra → +9 crediti.
  In altre parole, ciò che pensate sia “1 immagine” può in realtà consumare quasi “2 crediti”.

Quindi:“100 crediti gratuiti” non è la stessa cosa di “100 immagini gratuite”.

Le insidie più comuni di ShortPixel

1. I 100 crediti gratuiti si esauriscono rapidamente
   Causa principale: molte miniature + crediti extra per la generazione di WebP/AVIF.
   suggerimento：

• Valutare innanzitutto il numero di miniature del sito
• Escludete le dimensioni delle miniature non necessarie (ottimizzate solo le dimensioni che verranno effettivamente utilizzate).
• Determinare la strategia di compressione prima dell'esecuzione in massa, per evitare un consumo ripetuto per tentativi ed errori.

2. Accatastamento di altri plug-in convertitori allo stesso tempo
   Se si hanno più sostituzioni WebP e ShortPixel che genera/inserisce tag next-gen, la logica si accumula e diventa più difficile risolvere i problemi. Per la via B, lasciare che ShortPixel faccia da solo.
3. Pensavo che se l'avessi installato, sarebbe stato “WebP/AVIF in primo piano”.”
   Pagina del plugin ShortPixelHa menzionato che converte WebP/AVIF e può aggiungere immagini next-gen alla prima pagina (ad esempio, tramite tag).
   Ma è comunque importante verificare i risultati dopo averli ottenuti.

---

3.2.2 ImagifyGratuito: 20MB/mese; la quota viene detratta in base alle “dimensioni dell'immagine originale + numero di miniature”; verranno effettuate detrazioni ripetute per la ripressatura.

Quantità e posizionamento liberi

Pagina ufficiale dei prezzi di ImagifyLa scrittura è chiara:Conto gratuito Mensile 20MB Quota。
La pagina del plugin chiarisce anche che può comprimere, ridimensionare e convertire WebP/AVIF.

Come viene detratta la quota?

Documentazione ufficiale di Imagify “Come viene calcolato l'utilizzo delle quote?” illustra in modo molto chiaro il meccanismo di detrazione:

• Il numero di miniature influisce sul consumoAd esempio, se si hanno 10 miniature, l'ottimizzazione di 1 immagine diventa l'ottimizzazione di 11 immagini (originale + 10 miniature), che contribuiscono tutte al consumo di quota.
• Detrazione della quota in base alle dimensioni del documento originaleAd esempio, se si invia un'immagine di 100KB a Imagify, 100KB verranno detratti dalla quota.
• La modifica del livello di compressione e la ri-ottimizzazione consumano nuovamente la quota.。
• La stessa chiave API può essere utilizzata per più siti, ma le quote sono condivise tra di essi.

Questo è il “modo centrale di intendere” di Imagify:
È più simile a un pacchetto di traffico: detrae quanto si invia; più miniature si hanno, più si detrae; e la detrazione si ripete se si preme ripetutamente.

Esempio di quota Imagify di facile lettura

Supponiamo di caricare un'immagine originale di 800 KB e che il sito generi 8 miniature.

• Imagify ottimizza per includere “l'immagine originale + 8 miniature” (se si sceglie di ottimizzarle tutte), il che significa che questa singola azione consuma una quota vicina alla “dimensione originale di tutti questi file combinati”.
  Ecco perché alcuni siti sentono che “20MB si esaurisce in fretta”: non è che Imagify non sia sufficiente, è che state caricando troppe immagini alla volta, troppe miniature e probabilmente state provando i livelli di compressione più e più volte.

Le insidie più comuni di Imagify

1. Gratuito 20MB Non è sufficiente per fare un “inventario completo della storia del sito”.”
   20MB è solitamente più adatto per i test con aggiornamenti leggeri; se la libreria multimediale è già grande, è probabile che un'epurazione una tantum richieda un aggiornamento.
2. La ripetuta regolazione dei livelli di compressione comporta la duplicazione del consumo di quote.
   Imagify chiarisce cheLa ri-ottimizzazione consumerà nuovamente la quota.
   Suggerisco di chiarire la “strategia” in questa pagina:

• Iniziare con un numero ridotto di immagini per determinare il livello di compressione e l'aspetto e la sensazione di sicurezza
• Determinate la strategia e poi eseguite in massa
  Evitare di ripetere tentativi ed errori sull'intera libreria

3. La condivisione di più siti della chiave API porta a una “inspiegabile riduzione della quota”.”
   Se si utilizza la stessa chiave API per più di una stazione, la quota viene condivisa.
   Quindi, in scenari di team/multi-stazione, è meglio essere chiari: quali stazioni sono condivise e quali sono utilizzate individualmente per evitare budget incontrollabili.

---

3.2.3 TinyPNG(Tiny Compress Images): 500 crediti/mese gratuiti; il passaggio a WebP/AVIF “detrarrà 1 credito per dimensione”.”

Crediti gratuiti e idee di fatturazione

La pagina del plugin WordPress di TinyPNG è molto chiara:

• 500 crediti al mese gratis
• In “Installazione generale di WordPress”, è probabilmente possibile comprimere il file Circa 100 immagini al mese
• Tuttavia, se è abilitata la conversione AVIF o WebP:Ogni dimensione dell'immagine consuma un credito aggiuntivoQuindi presumibilmente può essere solo compresso e convertito Circa 50 immagini al mese(a seconda del numero di dimensioni delle miniature).

Nel frattempo, anche Tinify (gli sviluppatori di TinyPNG/TinyJPG) ha fatto il suo Pagina dei prezzi APIDescrizione: Registratevi e otterrete 500 compressioni gratuite al mese; in seguito, vi verranno addebitate in base al numero di compressioni riuscite, senza abbonamento obbligatorio.

Riassumete il modo in cui TinyPNG viene inteso in una frase:
Conta i crediti; più sono le dimensioni delle miniature e più WebP/AVIF sono attivati, più velocemente vengono consumati i crediti.

Esempi di facile lettura di crediti TinyPNG

Supponiamo che il vostro sito generi 8 miniature per ogni immagine:

• Solo compressione: originale + 8 miniature → 9 crediti richiesti
• Se la conversione WebP/AVIF è attivata: un credito extra per dimensione → probabilmente quasi il doppio!
  Ciò corrisponde alla descrizione sulla pagina del plugin: dopo l'attivazione, l'importo gratuito passa da circa “100 carte/mese” a “50 carte/mese”.

Le insidie più comuni di TinyPNG

1. Pensiero 500 crediti = 500 immagini
   Non lo è. Viene consumato da “dimensione dell'immagine/variante”. La pagina del plugin avverte chiaramente che “Le conversioni sottraggono 1 credito aggiuntivo per ogni dimensione dell'immagine”.
2. I temi e i plugin per l'e-commerce stanno generando troppe dimensioni e i crediti gratuiti stanno diminuendo in modo significativo.
   Più dimensioni ci sono, più è facile che i crediti vengano scalati e consumati.
3. Dopo aver attivato la conversione, si scopre che i crediti sono improvvisamente inutilizzati.
   Non è un bug, è il suo meccanismo di fatturazione.
   Consigli strategici:

• Se la fase gratuita viene utilizzata principalmente per la compressione e la riduzione del peso, si può iniziare con la sola compressione e poi attivare la conversione quando si è sicuri che la struttura del sito è stabile e si ha davvero bisogno di next-gen.

4. Raccomandazione del sotto-scenario: come scegliere i diversi tipi di siti

Anche WordPress, i siti di contenuti, i siti di e-commerce, i portfolio e i siti associativi non hanno gli stessi “punti di pressione” per le immagini.

4.1 Siti/blog di contenuto (molti articoli grafici, media frequenza di aggiornamento)

Raccomandazioni prioritarie:

1. Strategia di dimensionamento (fase 1)
2. Compressione (fase 2)
3. WebP (Fase 3)

Un percorso più adatto:

• Vuoi salvare: Percorso B a scelta tripla (ShortPixel / Imagify / TinyPNG)
• Se si vuole andare liberi: Percorso A (Plus WebP + EWWW), ma si consiglia di iniziare con la “modalità conservativa (senza cancellare l'immagine originale)” per valutare il rischio.

Fossa tipica:

• La prima immagine della pagina dell'articolo è molto grande, una strategia di caricamento pigro impropria.Rallenta la prima schermata

4.2 Sito di e-commerce/prodotto (molte miniature, molte varianti di immagine, stabilità in primo luogo)

È molto probabile che il problema non sia “l'effetto di compressione non è buono”, ma “l'ottimizzazione di alcune dimensioni non è corretta, mancano le miniature, i componenti anteriori non possono ottenere l'immagine”.

Raccomandazioni prioritarie:

1. La stabilità prima di tutto: strategia di compressione conservativa, non effettuare subito una sostituzione completa della libreria
2. Valutare le dimensioni delle miniature: i temi di e-commerce di solito generano più dimensioni e il consumo di quantità è amplificato (ShortPixel/TinyPNG è particolarmente evidente).
3. Eseguire la convalida su piccola scala prima del lotto (molto critico)

Un percorso più adatto:

• Il percorso B tende ad essere più semplice: ShortPixel/Imagify/TinyPNG possono tutti fare batch, ed è fondamentale comprendere il meccanismo delle quote e valutare il costo in anticipo.
• Il percorso A va bene, ma fate più attenzione al comportamento di Plus WebP “sovrascrivi gli ID/elimina le immagini originali/sostituisci gli URL”: si tratta di una migrazione di risorse e non è consigliabile sostituire tutto subito.

4.3 Portfolio/stazione fotografica (qualità dell'immagine singola sensibile, immagini di grandi dimensioni, elevate esigenze di visualizzazione)

Raccomandazioni prioritarie:

1. Strategia di dimensione (controllo dell'area di visualizzazione)
2. Strategia di compressione (meglio essere più grandi che schiacciare i dettagli)
3. WebP/AVIF (i vantaggi della scena in grande sono evidenti, ma verificate la visualizzazione)

Un percorso più adatto:

• ImagifyDedurre la quota in base alla “dimensione dell'immagine originale”, questo tipo di sito è più facile da fare “budget-controllabile” (si sa quanto dedurre per ogni immagine grande), ma evita ripetute repressioni.
• BrevePixelSe le dimensioni delle miniature non sono molte, anche i crediti sono molto intuitivi; ma se si generano molte dimensioni +next-gen, il consumo di crediti sarà amplificato e sarà necessario pianificare in anticipo.

5. Confronto tra quote e fatturazione: mettere in prospettiva il “gratis non è abbastanza”.

Qual è l'offerta migliore e quanto durerà la gratuità?

5.1 Tre modelli di chargeback

• BrevePixel(crediti)I crediti si basano su “immagine originale + numero di miniature”; ulteriori crediti saranno detratti per ogni versione corrispondente di WebP/AVIF generata.
• Imagify(quota MB)Deduce la quota in base alla “dimensione del file originale”; più miniature ci sono, più deduzioni ci sono; una nuova stampa dedurrà di nuovo.
• TinyPNG(crediti)500 crediti al mese; l'abilitazione della conversione WebP/AVIF sottrae ulteriori crediti per ogni dimensione dell'immagine.

5.2 Metodi di stima rapida

Si può valutare in questo modo:

1. Trovate una “immagine originale che caricate spesso” a caso e vedete quanto è grande (ad esempio 300KB / 1MB / 3MB).
2. A seconda del numero di dimensioni delle miniature generate dal sito (ad es. 5 / 10 / 20)
3. Decidere se si vuole generare WebP/AVIF (sì/no)

Utilizzate quindi la seguente “matematica mentale” per comprendere i consumi:

• BrevePixel: ≈ (1 + numero di miniature) crediti per immagine; se si genera WebP/AVIF, ≈ raddoppia ancora (poiché anche la versione next-gen prende crediti)
• ImagifyOgni immagine ≈ (dimensione originale + dimensione di ogni miniatura) detrae la quota; cambiando il livello di compressione e ricomprimendo si detrae di nuovo.
• TinyPNG500 crediti gratuiti; se il vostro sito genera molte dimensioni per immagine e la conversione è abilitata, il numero di crediti gratuiti diminuisce significativamente (la pagina del plugin fornisce un'aspettativa visiva di “~100 crediti/mese” rispetto a “~50 crediti/mese”).

6. Avvisi di rischio

Rischio 1: non lasciare che più plugin facciano la stessa cosa in continuazione

È la “fonte di disastro” più comune.”

• Percorso A:Più WebP o AVIF + EWWW(Dividere il lavoro tra i due, non fare conversioni e consegne simili allo stesso tempo, o installare solo uno dei due).
• Percorso B: ShortPixel / Imagify / TinyPNG scegliere tre(sceglierne uno per compressione e next-gen)

Rischio 2: Inoltre “Sovrascrivi ID / Elimina immagine originale / Sostituisci URL” di WebP è una migrazione di risorse.

Enfasi aggiunta:Più WebP La descrizione indica chiaramente che la generazione completa sovrascrive l'ID dell'immagine originale, elimina il file originale e sostituisce l'URL del contenuto.
Ciò significa che non si tratta di una “piccola impostazione che può essere ritirata in qualsiasi momento”, ma di una modifica a livello patrimoniale.

La strategia suggerita dovrebbe essere:

• Prima un piccolo test (da qualche decina a qualche centinaio)
• Confermare che la visualizzazione del frontend, le miniature e gli aggiornamenti della cache funzionino correttamente.
• Riconsiderare l'elaborazione completa della biblioteca

Rischio 3: il consumo reale di “crediti gratuiti” della compressione cloud dipende dal numero di miniature e dalla selezione next-gen.

• BrevePixelLe miniature e la next-gen influenzano in modo significativo i crediti.
• TinyPNGAbilitando WebP/AVIF si detrae un credito aggiuntivo per ogni dimensione dell'immagine.
• Imagify: dedotta in base alle dimensioni dell'immagine originale, più miniature dedotte più, forte pressione ripeterà la deduzione!

Rischio 4: “WebP/AVIF generato” non significa “WebP/AVIF consegnato dal front office”.”

Molte persone si sentono “non più veloci” dopo la conversione perché il frontend continua a produrre JPG/PNG (la cache, la riscrittura, il tagging, la negoziazione con i browser ecc. non sono corretti).

7. Come verificare l'efficacia dell'intervento dopo che è stato effettuato.

4 punti di convalida molto semplici:

1. Se la stessa pagina viene aggiornata una seconda volta e si carica in modo più costante e veloce(Caching e ottimizzazione del senso fisico del funzionamento)
2. Le dimensioni delle immagini caricate sui telefoni cellulari e sui desktop sono significativamente diverse?(reattivo) srcset/dimensioni (che funzionino o meno)
3. Verifica a campione di alcune immagini: se sono presenti file/risorse WebP o AVIF.(Il sito utilizza effettivamente next-gen）
4. Provate alcune immagini: ingranditele per vedere se sono visibilmente confuse, se il testo è sfocato.(la massa compressa non è eccessiva)

Se tutti e quattro questi dati corrispondono, il percorso scelto è stato eseguito. Il prossimo passo. CDN “Strato di consegna”, l'insieme sarà più stabile.

8. Raccomandazioni per l'azione

1. Scegliete prima il vostro percorso:

• Cercando di essere il più libero possibile.: più WebP o AVIF + EWWW (o solo uno di essi)
• Vuoi risparmiare le risorse del server, paga per credito per una maggiore tranquillità: ShortPixel / Imagify / TinyPNG - sceglietene uno!

2. Effettuare prima un piccolo test (qualche decina)
3. Assicuratevi che sia tutto a posto prima di iniziare la partita
4. È necessario migliorare ulteriormente la stabilità di erogazione:leggere CDN Accelerazione

problemi comuni

1. Quanti plug-in devo installare? Posso installarli tutti?

Cercate di seguire un solo percorso.

• Percorso A: Più WebP o AVIF + Ottimizzatore di immagini EWWW (o solo uno di essi)
• Percorso B: ShortPixel / Imagify / TinyPNG - sceglietene uno!
  Nella stessa stazione allo stesso tempo lasciare che più di un plug-in per fare “compressione / trasferimento WebP / AVIF / cambiare URL / consegna rewrite”, il più probabile per ottenere sempre più caotico, ma anche il più difficile da controllare.

2. WordPress non supporta già WebP/AVIF? Ho ancora bisogno di un plugin?

Deve essere separato:
“Supporto per il caricamento/utilizzo” ≠ “Conversione automatica/consegna automatica”.
WordPress 6.5 non converte automaticamente in batch i vecchi JPG/PNG in WebP/AVIF, né esegue automaticamente l'intera operazione di “esportazione AVIF/WebP in grado di funzionare come browser e fallback”. Di solito è necessario un plugin o un servizio per far funzionare la libreria multimediale storica.

3. Qual è la fase più “gratificante” dell'ottimizzazione delle immagini?

Di solito è Per prima cosa è necessario impostare bene le “dimensioni” (srcset/sizes).。
Molti siti sono lenti non perché non hanno la compressione, ma perché la pagina è di soli 900px e all'utente viene chiesto di scaricare un'immagine di 3000px. La compressione fa risparmiare KB, ma la “dimensione sbagliata” fa scaricare molte volte più dati per niente.

4. Come posso essere sicuro di caricare sempre quella “più piccola” e non l'immagine originale?

Osservate due fenomeni:

• Quando si apre una pagina su un telefono cellulare, le dimensioni dell'immagine scaricata sono notevolmente inferiori rispetto a quelle del desktop.
• La stessa immagine viene caricata con risorse di dimensioni diverse su dispositivi diversi
  Se l'immagine originale viene scaricata per sempre, un motivo comune è che il tema/costruttore tratta l'immagine come immagine di sfondo CSS o output personalizzato, aggirando il multidimensionamento della libreria multimediale con srcset.

5. “Generato da WebP/AVIF” significa che il frontend deve produrre WebP/AVIF?

Non uguale.
La generazione è solo il “livello file”; il fatto che il frontend fornisca effettivamente WebP/AVIF dipende dalle riscritture, dalle politiche di tagging delle immagini, dai risultati della cache, dalla negoziazione del browser e così via. Quando avete finito, assicuratevi di “controllare alcune immagini per i tipi di risorse”.

6. Inoltre, cosa c'è di così pericoloso in WebP o AVIF? Posso eseguire l'intera libreria con un solo clic?

Il suo punto di rischio non è la “compressione”, ma è la "compressione".Variazione dei livelli di migrazione delle attività：

• La generazione completa può sovrascrivere l'ID del file immagine originale, eliminare il file originale e sostituire l'URL nel contenuto.
  il perchéNon è consigliabile sostituire subito l'intera libreria.Test su scala ridotta (decine o centinaia) + backup disponibili, quindi considerare l'elaborazione dell'intera libreria.

7. Qual è la scelta tra le due modalità di Plus WebP: mantenere l'immagine originale o sostituire ed eliminare l'immagine originale?

Semplice da capire:

• Modalità 1: mantenere l'immagine originale + generare una copia WebP/AVIF (più stabile)Comodo per i rollback, ma il disco aumenta (immagine originale + nuovo formato + miniature di dimensioni multiple).
• Modalità 2: Sostituzione ed eliminazione dell'immagine originale (più aggressiva)I dischi sono meno inclini a gonfiarsi, ma si tratta di “cambiare le risorse + cambiare i riferimenti”, il che rende più costosa la risoluzione dei problemi di compatibilità.
  Più il sito è complesso (e-commerce/multi-plugin/multidimensioni), più è consigliabile iniziare con un modello più stabile.

8. La compressione locale gratuita di EWWW Image Optimizer è sufficiente? Comprometterà il server?

EWWW è più un “compressore locale”: mangia CPU/IO.
È comune che il carico aumenti durante l'ottimizzazione dei batch, il che non significa che “non funziona”, ma piuttosto che la strategia deve essere corretta: batch, picchi bassi e opzioni di offloading/cloud se necessario.
Se si cerca di risparmiare o se si è a corto di risorse del server, la rotta B è più adatta ai server.

9. I 100 crediti gratuiti al mese di ShortPixel, perché mi sembra che siano spariti in poche foto?

a causa di I crediti non sono il “numero di immagini”.”La next-gen sarà ingrandita da una miniatura con la next-gen:

• L'immagine originale + ogni miniatura conta come credito
• Se viene generato un WebP/AVIF, viene consumato un credito aggiuntivo per ogni versione corrispondente.
  Quindi ciò che si pensa sia “1 immagine” può in realtà consumare quasi “2 crediti”. shortPixel

10. I 20MB/mese gratuiti di Imagify, perché si esauriscono rapidamente?

Imagify è più simile a un “pacchetto traffico”:

• Come l'hai mandata tu.Dimensione del file originalededuzione delle quote
• Più miniature ci sono, più si consumano
• La modifica del livello di compressione per la ri-ottimizzazione consuma nuovamente la quota
• Stessa chiave API per più siti, condivisione delle quote
  Quindi “20MB si esaurirà presto” è spesso causato da immagini troppo grandi, da troppe miniature o da ripetuti tentativi ed errori.

11. TinyPNG è gratuito per 500 crediti/mese, perché il plugin dice che è solo di circa 100 crediti/mese e poi 50 crediti/mese con WebP/AVIF?

Perché i crediti di TinyPNG sono anche ingranditi da “size/variant”:

• Una normale installazione di WordPress comprime probabilmente circa 100 fogli al mese.
• Abilita la conversione AVIF o WebP:Ogni dimensione dell'immagine consuma un credito aggiuntivoQuindi è possibile comprimere e convertire solo circa 50 immagini al mese (a seconda del numero di dimensioni delle miniature).
  Quindi 500 crediti ≠ 500 immagini.

12. Quante miniature ci sono sul mio sito? Perché è così importante?

WordPress genera più dimensioni per il caricamento di un'immagine; i temi/plugin (soprattutto per l'e-commerce) possono aggiungere altre dimensioni.
I crediti/quote della compressione cloud sono di solito “originale + miniature insieme”, quindi più miniature avete, meno crediti liberi avete da usare.

13. Il caricamento pigro è sempre più veloce? Perché alcuni sostengono che il caricamento pigro rallenta le cose?

Il caricamento pigro è adatto alle “risorse fuori schermo”.
Se la prima schermata dell'immagine di grandi dimensioni più critica è anche il caricamento ritardato, può rallentare l'esperienza della prima schermata. WordPress 5.5 dal momento che il caricamento pigro predefinito va bene, ma non “one size fits all”.

14. Sto viaggiando sulla rotta A o B. Quando ho bisogno dell'CDN / Immagine CDN?

La compressione, il dimensionamento e la formattazione risolvono il problema dei “file più piccoli che si adattano”;
CDN La soluzione è quella di fornire un servizio più vicino e più stabile.。
Quando le immagini vengono estratte da una distanza dal sito di origine con conseguente latenza significativa, l'integrazione di CDN/immagini con CDN (ad esempio Cloudflare Polish / Jetpack Site Accelerator) sarà complessivamente più stabile, leggi WordPress CDN Accelerazione。

15. Qual è il modo più semplice per verificare che “funziona davvero” quando ho finito?

Il metodo di verifica più efficiente in termini di tempo:

• Se la stessa pagina viene aggiornata una seconda volta e si carica in modo più costante e veloce
• Le dimensioni delle immagini caricate sui telefoni cellulari e sui desktop sono sensibilmente diverse (entrano in gioco srcset/dimensioni)?
• Verifica a campione di alcune immagini: se sono presenti file/risorse WebP o AVIF.
• Provate alcune immagini: ingranditele per vedere se sono visibilmente confuse, se il testo è sfocato.