Indice dei contenuti dell'articolo:
Sapevi che i tempi di caricamento lenti sono una delle sfide più comuni per avere una buona User Experience? Ecco alcune tecniche per accelerare i tempi di caricamento e rendere il tuo sito Web molto più intuitivo.
Il formato immagine JPEG è uno dei formati immagine più comunemente usati sul web. Il formato viene spesso utilizzato per immagini colorate e complesse come le fotografie. La specifica JPEG include una gamma di estensioni di file valide, tuttavia le più comuni sono .jpg e .jpeg.
JPEG sta per Joint Photographic Experts Group ed è stato sviluppato appositamente per le foto. JPEG comprimerà una foto o un’immagine con gradazioni in modo più efficiente rispetto a PNGS. Quando si salvano i file JPEG, è possibile salvare l’immagine con diversi livelli di qualità per ridurre le dimensioni del file. Come accennato, puoi salvare la foto come JPEG o JPEG progressivo a seconda del tuo pubblico e obiettivo. Potresti anche vedere riferimenti a JPEG2000, sebbene questo formato abbia una compressione migliore, non è supportato da tutti i browser.
Indipendentemente dall’estensione utilizzata, tutte le immagini JPEG verranno trattate più o meno allo stesso modo. Sebbene non tutte le immagini JPEG siano create allo stesso modo. Nella specifica dei formati di immagine esiste un’impostazione meno nota. Questa impostazione, denominata Modalità progressiva, può migliorare drasticamente l’esperienza di utilizzo dei file JPEG sul Web.
JPEG normale vs JPEG progressivo
Il più grande fattore che definisce un formato immagine è generalmente la compressione: i metodi variano ampiamente. In effetti è ciò che rende alcuni formati più adatti di altri a seconda di come viene utilizzata l’immagine. Anche all’interno del formato JPEG puoi ottenere risultati estremamente variabili in base alle impostazioni di esportazione utilizzate.
Nella maggior parte dei programmi di immagini, il tipo di JPEG creato durante il salvataggio sarebbe considerato “Baseline”. Per essere brevi, il modo migliore per immaginare la modalità linea di base o baseline è che l’immagine inizi dall’alto e venga interpretata riga per riga. Spostamento verso il basso dell’immagine ogni riga di pixel alla volta mentre comprime e/o visualizza l’immagine.
Per chi ricorda ancora i fondamenti delle vecchie GIF. il formato JPEG Progressive può essere inteso come l’equivalente del formato GIF Intelaced.
Una GIF interlacciata non mostra la sua linea di scansione linearmente dall’alto verso il basso, ma invece la riordina in modo che il contenuto della GIF diventi chiaro anche prima che termini il caricamento. Ad esempio, il visualizzatore GIF può visualizzare linee nella parte superiore dell’immagine, poi al centro, quindi alla fine e continuerà a riempire gli spazi vuoti fino a quando l’immagine non sarà completamente caricata.
I JPEG progressivi sono simili alle GIF interlacciate, ma il loro schema di rendering è generalmente superiore a quello utilizzato con le GIF. Con alcune applicazioni è anche possibile modificare l’ordine in cui vengono visualizzate le scanline. A differenza delle GIF interlacciate, le JPEG progressive sono spesso più piccole delle loro controparti di base.
Il compromesso qui è che carica solo alcuni dei dati dell’immagine alla volta. Ciò significa che l’immagine verrà caricata a grandezza naturale con un aspetto pixelato e diventerà più chiara durante il caricamento.
Guardalo in azione
A volte il modo migliore per capire qualcosa è vederlo in azione. Quindi è esattamente quello che faremo qui, avremo la stessa immagine esatta salvata come entrambi i tipi di JPEG da confrontare.
Quindi iniziamo prendendo un’immagine di alta qualità con cui testare; nel nostro caso useremo una foto di Pexels di alcuni gattini che dormono . Poiché si tratta di un’immagine ad alta risoluzione, la ridimensioneremo un po’ prima del nostro test, quindi la ridimensioneremo di circa la metà. Ora che è stato ridimensionato, esporteremo due versioni dell’immagine, una in linea di base e una progressiva. (Entrambe le immagini utilizzeranno le stesse identiche impostazioni diverse da questa opzione e stiamo usando GIMP per creare le immagini.)
JPEG NORMALE
JPEG PROGRESSIVO
Quindi, anche se queste immagini sono piuttosto grandi, a volte è difficile vedere la differenza nel loro processo di caricamento. Sotto ogni immagine è inclusa una vista “timeline” di come l’immagine viene caricata nel tempo. Tieni presente che la visualizzazione della sequenza temporale fornita è molto drammatizzata per illustrare l’idea. Se dovessi caricare la pagina senza alcuna cache locale, potresti effettivamente vedere questo comportamento durante il caricamento delle immagini!
Vantaggi del JPEG progressivo
Su un sito Web, il JPEG progressivo può migliorare l’esperienza dell’utente. Sebbene sfocata, i visitatori possono già vedere l’intera immagine a prima vista. Inoltre, essendo generalmente di dimensioni inferiori, il JPEG progressivo può anche ridurre l’utilizzo di risorse come larghezza di banda e spazio su disco, aiutando il tuo sito Web a caricarsi più velocemente.
I browser più diffusi, come Firefox e Chrome, supportano anche le immagini progressive. Ma se utilizzi una versione precedente di Internet Explorer (prima di Windows 7), assicurati di installare l’ultimo aggiornamento per abilitare la funzione.
Conclusione
Se vuoi che le immagini sul tuo sito web si carichino più velocemente, è meglio cambiarle nel formato JPEG progressivo anche qualora utilizzassi formati moderni come webp o AVIF avrai sempre da servire vecchi formati JPEG come fallback per browser che non ancora li supportano.
