Ottimizzazione dell'immagine per SEO: cosa sposta effettivamente i parametri vitali del Web

La singola più grande vincita di prestazioni che abbia mai spedito su WP Adminify's sito di marketing era' t un plugin di cache o un CDN tweak Stava eliminando un'immagine Il nostro vecchio eroe era uno screenshot PNG 2.400px I & #39; d esportato su & quot; full quality" perché credevo ostinatamente che PNG significasse nitido Che un file fosse 1,4 MB Su un Android di fascia media oltre 4G, era l'elemento Contentful Paint più grande - e stava trascinando LCP a circa 4,1 secondi L'ho scambiato con un 84 KB webp alla larghezza effettiva del display e LCP è sceso sotto 1.9s lo stesso pomeriggio Nessun codice Solo un'immagine più piccola.

That's la cosa frustrante della SEO delle immagini It's non esotico Le immagini sono di solito la cosa più pesante della pagina - spesso vicino alla metà dei byte totali - e tuttavia la maggior parte di noi li tratta come un ripensamento Rilasciamo una fotocamera-originale nel CMS, digitiamo & quot;screenshot" nel campo alt, e andiamo avanti Poi ci chiediamo perché il Vitali Web principali report in Search Console sanguina di rosso sul cellulare.

Questa guida è la lista di controllo che eseguo effettivamente su Toolz.dev e sui siti client, scritta dal punto di vista di qualcuno che spedisce queste cose. Io e n. 39; sarò onesto su cosa fanno gli strumenti gratuiti e, cosa è altrettanto importante, cosa fanno' t. Ogni strumento di immagine attivo Toolz.dev funziona interamente nel tuo browser su a <canvas>, quindi nulla che tu entri viene caricato da nessuna parte. Ciò ha conseguenze reali per il tuo flusso di lavoro, alcuni buoni, uno fastidioso. Arriveremo a entrambi.

tl; dr: Ridimensiona prima l'immagine alla sua larghezza di visualizzazione reale, quindi comprimi, quindi servi un formato moderno. In pratica che sono tre passaggi: Ridimensionamento immagine Per tagliare le dimensioni dei pixel, Comprimi immagine spremere i byte e convertitore di formato per ottenere webp. width/height attributi per interrompere lo spostamento del layout, scrivere testo alternativo che un essere umano direbbe ad alta voce e caricare pigramente qualsiasi cosa al di sotto della piega. Fallo e il tuo LCP e CLS migliorano entrambi: i due Core Web Vitals basati su immagini su cui Google si posiziona effettivamente.

Perché le immagini contano così tanto per la SEO?

Due dei tre Core Web Vitals sono problemi di immagine sotto mentite spoglie Il più grande Contentful Paint è, nella maggior parte delle pagine di contenuto, l'immagine dell'eroe che termina il suo download Il Layout Shift cumulativo è molto spesso un'immagine che si carica in ritardo e spinge il testo lungo una riga Entrambi sono input di ranking confermati, ed entrambi sono cose che risolvi gestendo meglio le immagini - non scrivendo più contenuti.

There's un secondo canale di traffico la gente dimentica: Google Immagini Per un sacco di siti di e-commerce, ricette, viaggi e design, la ricerca di immagini è una fetta significativa di visite organiche, a volte un quinto di esso Che il traffico dipende interamente da cose che un crawler può leggere - il nome del file, il testo alternativo, la copia circostante, e se l'immagine è anche abbastanza piccola per essere indicizzata tempestivamente.

E poi c'è quello noioso ma reale: la larghezza di banda costa denaro e pazienza. Una pagina che spedisce 3 MB di immagini fa rimbalzare gli utenti mobili su connessioni misurate prima di vedere il titolo. Le pagine più veloci tengono le persone in giro e il coinvolgimento, tuttavia, lo misura Google, non fa male.

Quale formato di immagine dovresti effettivamente utilizzare?

La scelta del formato è il luogo in cui la maggior parte dei risparmi è in diretta e le regole sono più semplici di quanto le guerre di formato le facciano suonare.

JPEG è per le fotografie - qualsiasi cosa con gradienti lisci e migliaia di colori It's lossy, che è esattamente quello che vuoi per una foto Alla qualità 75. a 85 la compressione è invisibile un visualizzatore normale e il file una frazione dell'originale Don&#39t usarlo per qualsiasi cosa con bordi rigidi, testo o trasparenza.

png è senza perdita Usalo per screenshot, loghi, diagrammi e qualsiasi cosa con regioni di colore piatte o trasparenza Il problema: per una fotografia, PNG produce un file comicamente grande rispetto a JPEG Il mio errore da eroe di 1,4 MB è stato esattamente questo: uno screenshot in stile fotografico forzato in PNG.

webp è l'impostazione predefinita nel 2026. È sia lossy che lossless, supporta trasparenza e animazione e in genere atterra del 25-34% più piccolo di JPEG a qualità di corrispondenza. Il supporto del browser è ora universale. Questo è il formato in cui converto quasi tutto.

avifa comprime ancora più forte - spesso significativamente più piccolo di WebP - perché it's costruito sul codec video AV1. It's un grande formato Ma devo essere dritto con te qui, perché un sacco di guide (inclusa la bozza di questo articolo sostituito) ti dicono a & quot; basta convertire in AVIF" con uno strumento online, e che's non come funziona la codifica tela del browser.

SVG è per vettori: icone, loghi, illustrazioni semplici. Si ridimensiona all'infinito e rimane minuscolo. È inutile per le foto.

l'avvertimento dell'avif nessuno menziona

Ecco il pezzo onesto. Toolz.dev convertitore di formato esportazioni PNG, JPEG o WebP- e solo quei tre. può' t output AVIF, e nemmeno la maggior parte dei convertitori in-browser Il motivo è tecnico: lo strumento disegna la tua immagine su un <canvas> e chiama canvas.toBlob('image/webp', quality). Il codificatore Canvas del browser fornisce JPEG, PNG e WebP; non esegue un codificatore AVIF. Quindi non c'è modo di spremere un avif da una tela, punto.

puoi ancora alimentazione un file AVIF in - il browser decodifica AVIF felicemente tramite new Image(), quindi un drop-in Avif viene visualizzato bene su Canvas. Non puoi semplicemente farne uno indietro. È un'asimmetria di decodifica, codifica-out e fa inciampare costantemente le persone.

Quindi il mio consiglio nel mondo reale: usa il convertitore di formato per il passaggio WebP, che è quello che copre il 95% della vittoria. Se vuoi Avif in cima, generalo nella tua pipeline di costruzione con sharp, avifenc, o Squoosh's codificatore offline - that's a cui appartiene comunque AVIF, perché la sua codifica è lenta e tu non lo fai't vuoi farlo a mano per ogni immagine.

Come comprimi le immagini senza distruggere la qualità?

L'errore che vedo di più è comprimere la cosa sbagliata nell'ordine sbagliato. Comprimere un'immagine a 4000px che viene visualizzata a 800px è come sigillare sottovuoto una valigia che non hai mai bisogno di mettere in valigia. Ridimensiona prima, comprimi secondo. sempre.

Quindi il flusso di lavoro è: aperto Ridimensionamento immagine, imposta la larghezza sulla dimensione più grande in cui l'immagine verrà effettivamente renderizzata (controlla il layout: l'immagine del corpo di un blog è spesso 720, non 1920) Il resistore si adatta alla casella di destinazione e non si allunga mai o si ritaglia, quindi le proporzioni sono sicure. Quindi prendi quell'output Comprimi immagine e tira giù gli artefatti finché non riesci a dirlo a malapena - di solito 78 qualità 2 per le foto Visualizza in anteprima con lo zoom completo prima di commettere nascondi in gradienti e tonalità della pelle, non nella miniatura.

Un numero su cui ancorare: per i contenuti fotografici, la qualità 80 è la noiosa e affidabile risposta. io A/B&B'D 80 contro 90 su scatti di prodotto reali e, con lo zoom al 100% su un buon monitor, la maggior parte delle persone non può chiamarlo. Ma 80 è spesso il 40% più piccolo. Sotto circa 60 inizi a vedere artefatti a blocchi in aree lisce, quindi questo è il pavimento per tutto tranne una piccola miniatura.

Due browser gotcha che ti confonderanno

Entrambi mi costano un vero tempo di debug, quindi imparali gratuitamente.

PNG trasparente → JPEG rende lo sfondo nero, non bianco. Una volta ho convertito un logo trasparente in JPEG e le aree trasparenti sono uscite nere piene Ho supposto che lo strumento fosse rotto e ho passato venti minuti a fissarlo It's non è un bug - it's le specifiche HTML Quando serializzi una tela in un formato senza canale alfa (JPEG), i pixel trasparenti si compongono su nero pieno Se hai bisogno di trasparenza, mantieni PNG o usa WebP, che supporta alfa Se desideri specificamente uno sfondo bianco, metti prima giù un livello bianco.

Ogni ricodifica di strisce esemplifica i metadati EXIF e GPS. Poiché questi strumenti ridisegnano l'immagine su una nuova tela, l'output non ha EXIF, informazioni sulla fotocamera, coordinate GPS incorporate. That' è una vera vittoria sulla privacy - you' non pubblichi accidentalmente la latitudine/longitudine del tuo telefono stampata in una foto. Ma it' è anche un gotcha se ti affidavi a profili di colore incorporati o metadati di copyright; vanno anche quelli. Per SEO è così' non importa, ma sappilo' sta accadendo.

Come funzionano le immagini reattive e SRCset?

Un telefono rende le immagini a una larghezza di forse 390px. Spedirlo Un file 1920px spreca la maggior parte dei byte che hai appena compresso con cura. srcset Risolvi il problema consegnando al browser un menu di dimensioni e lasciandolo scegliere.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Matte-black wireless headphones on a walnut desk"
  width="800" height="600" loading="lazy" />

Per creare questi tre file, esegui la stessa fonte Ridimensionamento immagine a 400, 800 e 1200px, quindi converti ciascuno in WebP. sizes attributo è la parte che le persone saltano, e saltandola si rompe silenziosamente il tutto - senza di essa, il browser presuppone che l'immagine riempia il viewport e afferri il candidato più grande Digli quanto l'immagine rende davvero ampia e scarica quella giusta.

Come si scrive alt testo che aiuta davvero?

Alt Text è l'altra metà di Image SEO ed è la metà degli sviluppatori Rush. Fa tre lavori contemporaneamente: è ciò che uno screen reader legge ad alta voce a un utente cieco, è così che un crawler capisce cosa mostra l'immagine ed è il testo di fallback se l'immagine non riesce a caricarsi. Farlo bene riguarda principalmente la scrittura come una persona, non un robot per parole chiave.

La regola che uso: descrivi l'immagine nel modo in cui tu'd descrivila a qualcuno durante una telefonata Specifico, naturale, breve - sotto circa 125 caratteri in modo che gli screen reader don't troncala goffamente Salta & quot; immagine di& quot; o & quot;foto di," perché lo screen reader annuncia già che it's un'immagine; condurre con quelli spreca il tempo dell'ascoltatore's. E se la parola chiave di destinazione si adatta veramente all'immagine, includila una volta, naturalmente. Se si adatta a 't, lascialo fuori - una foto di una tastiera non ha bisogno di "buy cuffie wireless economiche" inceppato nel suo alt.

Alcuni prima/dopo da recensioni reali ho fatto:

• alt="image" → alt="Matte-black wireless headphones on a walnut desk"
• alt="chart" → alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"
• alt="best cheap headphones buy now free shipping sale" (parola chiave) → alt="Over-ear headphones with the carrying case open beside them"

Una sfumatura che le persone sbagliano: le immagini puramente decorative - un divisore, uno sfondo fioriscono - dovrebbero avere un vuotare alt="", non una descrizione. Un'alternanza vuota dice allo screen reader di saltarlo completamente, che è esattamente quello che vuoi per la decorazione. Riserva testo alternativo reale per immagini che contengono informazioni.

Mentre ci sei, nomina anche il file in modo descrittivo. wireless-headphones-matte-black.webp battute IMG_4532.jpg Perché i motori di ricerca leggono il nome del file come segnale e i trattini (non i caratteri di sottolineatura) sono il separatore che Google analizza come interruzioni di parole.

Quanto questo cambia effettivamente il nucleo vitale del Web?

LCP (pittura più grande e contenta): il tuo eroe è solitamente l'elemento LCP Servilo alle giuste dimensioni, in WebP, a qualità ~80, e - criticamente - fallo no Caricalo pigro. Caricamento pigro L'eroe sopra-fold è un classico autoproprietario, che ritarda l'esatto elemento che LCP sta misurando. Se è l'eroe, <link rel="preload" as="image"> esso invece.

CLS (spostamento cumulativo del layout): Metti sempre width e height sul <img>. Questi due attributi consentono al browser di riservare lo spazio prima dell'arrivo dell'immagine, quindi il testo non salta quando viene caricato. Questa è la singola correzione CLS più economica che ci sia e trovo ancora che i siti la manchino.

INP (Interazione a vernice successiva): Le immagini non guidano direttamente INP, ma una pagina che si soffoca su 3 MB di immagini non ottimizzate sta morendo di fame il thread principale e la rete della capacità di cui il tuo JavaScript ha bisogno per rispondere. Immagini più leggere, interazioni più scattanti, indirettamente.

alcune cose che ho imparato in modo fastidioso

Verifica prima di ottimizzare Esegui la pagina tramite PageSpeed Insights e risolvi prima il file più pesante: l'autore del reato da 1,2 MB conta più che radere 4 KB da un'icona File di nome come un essere umano: wireless-headphones-matte-black.webp battute IMG_4532.jpg nella ricerca di immagini perché il crawler legge il nome del file come segnale di contenuto Scrivi testo alternativo tu' in realtà dico di descrivere la foto a qualcuno al telefono - specifico, naturale, parola chiave-incluso solo dove sta, mai imbottito di parole chiave. E don't dimentica il tuo Grafico aperto condividi l'immagine; un 1200×630 di dimensioni corrette che hai realizzato Ridimensionamento immagine è ciò che appare nelle anteprime dei social e, a volte, nella ricerca.

Domande frequenti

L'ottimizzazione delle immagini influisce davvero sulle classifiche SEO?

Sì, attraverso i parametri vitali web principali. LCP e CLS sono segnali di classificazione di Google confermati ed entrambi sono fortemente basati sull'immagine. Le immagini ottimizzate in genere migliorano i punteggi della velocità della pagina mobile con un margine notevole e su dispositivi mobili che possono tradursi in movimento di classifica. Sblocca anche Google Images come sorgente di traffico separata.

Posso convertire le immagini in Avif con uno strumento online gratuito?

Di solito no, e il convertitore di formato di Toolz.dev non può. I convertitori nel browser disegnano su a <canvas>, e il browser's codificatore tela solo output JPEG, PNG, e WebP - there's nessun codificatore AVIF a sua disposizione Converti in WebP online per la maggior parte della vincita, e generare AVIF nella vostra pipeline di costruzione con strumenti come sharp o avifenc se ne avete bisogno.

Dovrei usare WebP o AVIF nel 2026?

WebP è il default sicuro e quello che raggiungo per primo - supporto universale, grandi risparmi, e puoi farlo nel browser AVIF comprime ancora più duramente e vale la pena aggiungere per immagini di grandi eroi e gallerie, ma generalo al momento della costruzione e servilo tramite <picture> con un fallback webp.

A quale impostazione di qualità dovrei comprimere JPEG e WebP?

Qualità 80 è la risposta affidabile per le foto. Di solito è indistinguibile dall'originale alla visione normale pur essendo drammaticamente più piccolo. Anteprima allo zoom al 100% prima di impegnarsi, poiché gli artefatti si presentano in sfumature e toni della pelle. Sotto 60, la compressione diventa visibile.

Perché il mio PNG trasparente è diventato nero dopo la conversione in JPEG?

Perché JPEG non ha un canale alfa. Le specifiche dell'area di disegno HTML affermano che i pixel trasparenti vengono composti su nero solido quando si serializza in un formato non alfa. È un comportamento previsto, non un bug. Mantieni l'immagine come PNG o WebP per preservare la trasparenza o componila prima su uno sfondo bianco se vuoi il bianco.

Questi strumenti caricano le mie immagini su un server?

No. Gli strumenti immagine su Toolz.dev elaborano tutto localmente su una tela nel tuo browser - il file non lascia mai il tuo dispositivo Un effetto collaterale che vale la pena conoscere: ogni re-encode rimuove EXIF e i metadati GPS, il che è buono per la privacy ma significa che anche i dati della fotocamera incorporati e i profili colore vengono eliminati.

Qual è la dimensione del file ideale per un'immagine web?

Come bersaglio approssimativo: immagini eroe sotto ~200 KB, immagini nel contenuto sotto ~ 100 KB e miniature sotto ~ 30 kb. Sono molto realizzabili una volta ridimensionato alla larghezza di visualizzazione reale e servire WebP. Il numero esatto conta meno dell'abitudine di ridimensionare, quindi si comprenda, poi si converte.

Letture e strumenti correlati:

• Comprimi immagine- taglia le dimensioni del file dopo il ridimensionamento
• Ridimensionamento immagine- crea dimensioni reattive e immagini social
• convertitore di formato- esporta PNG, JPEG o WebP
• La guida agli strumenti di immagine dello sviluppatore
• Compressione dell'immagine spiegata