Ottimizzazione delle immagini

Silktide scarica le immagini delle tue pagine e verifica se è possibile ridurne significativamente le dimensioni senza modificarne visibilmente l'aspetto. Le immagini che possono essere ridotte vengono segnalate insieme al possibile risparmio, così puoi dare priorità agli interventi più efficaci.

Perché è importante

Le immagini costituiscono solitamente la maggior parte del peso di una pagina web, quindi rappresentano spesso la principale opportunità di miglioramento delle prestazioni. Le immagini sovradimensionate rallentano la visualizzazione delle pagine, aumentando sensibilmente il rischio che gli utenti le abbandonino, soprattutto con connessioni mobili, e consumando una quantità maggiore di dati e batteria dei tuoi visitatori. La velocità delle pagine influisce anche sul posizionamento nei risultati di ricerca tramite i .

A differenza della maggior parte degli interventi sulle prestazioni, l'ottimizzazione delle immagini raramente comporta compromessi: un'immagine compressa correttamente appare e si comporta allo stesso modo. È un miglioramento delle prestazioni quasi gratuito.

Come risolvere il problema

Comprimi le immagini segnalate. Quasi tutti gli strumenti per le immagini possono farlo durante l'esportazione; in genere le fotografie dovrebbero essere JPEG con una qualità intorno all'85%, ottenendo una notevole riduzione delle dimensioni del file con una perdita visiva minima.
Usa il formato corretto: JPEG (o WebP/AVIF) per le fotografie; PNG o SVG per loghi, icone e altre immagini con colori uniformi. I formati moderni come WebP e AVIF sono migliori in entrambi i casi quando la tua piattaforma li supporta.
Automatizza il processo. La maggior parte dei , delle pipeline di compilazione e delle può comprimere e convertire le immagini durante il caricamento o la distribuzione: correggere la pipeline impedisce che il problema si ripresenti.
Distribuisci le immagini alle dimensioni con cui vengono visualizzate, usando immagini responsive (srcset) invece di inviare un'unica immagine enorme a ogni dispositivo:

<img src="hero-800.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="Vigneto al tramonto">

Come Silktide esegue il controllo

Raccoglie le immagini che ogni pagina carica effettivamente.
Ricomprime ogni immagine con tecniche appropriate al relativo formato: JPEG progressivo con qualità dell'85%, ricompressione PNG con e senza perdita, degli SVG e nuova ottimizzazione delle GIF.
Confronta il risultato migliore con l'originale. Un'immagine viene segnalata solo quando il risparmio è significativo: oltre il 20% in meno e oltre 40 KB risparmiati.
Segnala la possibile riduzione per ogni immagine, così i risparmi maggiori risaltano.

Risoluzione dei problemi

L'immagine sembra già compressa

Il risparmio segnalato è misurato, non stimato: Silktide ha effettivamente prodotto un file più piccolo. Tra i motivi più comuni per cui un'immagine apparentemente ottimizzata può comunque ridursi del 20% vi sono i metadati incorporati, la codifica JPEG non progressiva e l'uso di PNG per le fotografie.

Utilizziamo una CDN che ottimizza le immagini

Silktide verifica ciò che la pagina ha effettivamente distribuito; quindi, se un'immagine segnalata è passata dalla tua CDN, l'ottimizzazione non è stata applicata oppure non è stata sufficiente. Controlla le impostazioni della CDN per i percorsi o i formati interessati.

Il risparmio sembra ridotto

Le immagini che si trovano entro il 20% o i 40 KB dal risultato ottimale non vengono segnalate. Se un risparmio segnalato sembra minimo, ricorda che si applica a ogni visualizzazione della pagina da parte di ogni visitatore.