Ottimizzazione JPEG per il Web - Guida definitiva
La compressione dell'immagine si trova in ogni formato multimediale nativo. Tuttavia la differenza tra GIF, PNG e JPEG è Come l'informazione è compressa e visualizzata sullo schermo. Ci sono tanti consigli per comporre fantastici supporti di immagini pubblicati sul web, eppure molti designer non capiscono ancora alcuni dei fondamenti.
In questa guida mi piacerebbe condividere alcune idee per una corretta compressione JPEG. Vuoi ottimizzare le tue immagini per ridurre i tempi di caricamento delle pagine web, pur mantenendo un buon livello di qualità. Si tratta di trovare l'equilibrio tra le dimensioni dei file e la rappresentazione dello schermo. Non c'è una soluzione perfetta per i progettisti da seguire. Ci vuole un po 'di pratica iniziale, ma una volta capita la compressione JPEG diventa molto più facile lo sviluppo di siti Web in futuro.
Evita di risparmiare sempre al 100%
Non dovresti quasi mai salvare le tue immagini JPEG con una qualità del 100%. Questo sarà non produrre il più possibile “ottimizzato” Immagine. In realtà calcola attraverso una formula di limite di ottimizzazione che aumenta le dimensioni del file in modo esorbitante. Anche rispetto al 90% o al 95% della qualità vedrai un calo significativo delle dimensioni del file.
Nella maggior parte dei casi, ti consigliamo di salvare immagini di qualità inferiore al 90%. Se apri la finestra di dialogo Salva per Web in Photoshop noterai che offrono valori preimpostati tra cui scegliere. Ho aggiunto i possibili valori JPEG qui sotto - noti le convenzioni di denominazione inerenti.
- Basso - 10%
- medio - 30%
- alto - 60%
- Molto alto - 80%
- Massimo - 100%
Anche in Adobe Photoshop la qualità dell'immagine del 60% è considerata "alta". Molti sviluppatori web garantiranno tra il 50% e il 70% è una gamma sicura con cui attenersi.
Quanto è basso è troppo basso?
I valori che scegli per l'ottimizzazione dipendono completamente dal progetto in questione. Dovrai considerare quali tipi di grafici produrranno le dimensioni dei file più alte - questi sono quelli che hanno davvero bisogno di compressione.
Direi che al di sotto del 30% stai davvero tagliando la qualità dell'immagine fondamentale. Altri designer giureranno il 50% come a “limite” a diminuire il valore ottimale. Ma il miglior consiglio qui è di provare diverse impostazioni e vedere cosa è meglio! Non puoi sbagliare con alcuni studi di prova che ottimizzano le immagini JPEG per il web.
Opzioni di compressione
Dovremmo prima chiarire i due termini "compressione" e "qualità" che sono l'inverso l'uno dell'altro. Ciò significa che se si salva un JPEG al 40% di compressione si ottiene il 60% di qualità (rispetto a un massimo del 100% di qualità senza compressione).
Queste sono le opzioni più basilari da utilizzare e dovrebbero essere sufficienti per il salvataggio sul Web. Gli utenti generici non entrano in personalizzazioni molto più profonde. Il sottocampionamento si trasforma in questioni più complicate in cui converti le immagini RGB in YCbCr (Luminance, Chroma Blue, Chroma Red).
(Fonte immagine: Kara Monroe)
Il luminanza o l'impostazione della luminosità viene sempre mantenuta al valore più alto possibile nella compressione JPEG. Con questo valore di luminosità su un canale separato è più facile ottimizzare i valori dei singoli colori del rosso e del blu. Questo è anche noto come chroma subsampling. I progettisti interessati a sporcarsi le mani ameranno leggere un po 'di più su questo algoritmo di compressione. Dai un'occhiata a questo fantastico post sul chroma sampling specificamente incentrato sulle immagini JPEG.
(Fonte immagine: Derek Hatfield)
Come nota interessante, Adobe Photoshop non utilizza sempre il sottocampionamento per la compressione. Qualsiasi immagine salvata tramite il “Salva per Web” la finestra di dialogo utilizzerà solo il sottocampionamento del croma sotto un valore di qualità del 50%.
Media Web diversi
Il web è anche pieno di diversi tipi di media di immagini. Puoi avere fotografie, icone, pulsanti, badge e tonnellate di altri elementi grafici. Ma è degno di nota il fatto che confrontare la qualità tra un pulsante e una fotografia non ha senso.
Quando si utilizzano fotografie o immagini dettagliate, prendere in considerazione il collegamento a un file JPEG compresso meno separato. Quindi puoi configurare le anteprime sul tuo sito con un rapporto di compressione più elevato e dimensioni di file molto più ridotte. L'unico svantaggio è che dovrai fornire due serie di immagini per una galleria multimediale. Prendi nota delle molte diverse grafiche che hai cucito su un sito web e prendi in considerazione le tecniche di ottimizzazione per ognuna individualmente.
Pianificazione di un modello grafico
Vuoi avere un file system organizzato che sia abbastanza facile da rovistare. Alcuni webmaster sceglieranno di ospitare le loro foto altrove sul Web, come Flickr o Picasa. Tuttavia, vorrai comunque utilizzare uno strumento di compressione per ridurre le dimensioni delle immagini, ma il modo in cui le visualizzerai sul tuo sito varierà. Ciò è particolarmente vero con l'ascesa popolare dei dispositivi mobili con accesso a Internet.
Ho trovato un interessante articolo sulla codifica JavaScript JPEG che si sarebbe verificato nel tuo codice di frontend. Non c'è molto vantaggio per le gallerie di immagini di alta qualità, ma può ridurre i tempi di caricamento per i tuoi visitatori mobili. Sarebbe anche una tecnica utile quando si eseguono hotlinking di immagini o ri-ritaglio di miniature in modo dinamico.
Un altro strumento di fantasia da provare è Yahoo! Smush.it. È un'app Web basata su browser in cui è possibile caricare un'immagine e Smush.it rimuoverà tutti i byte extra non necessari per ottimizzare le dimensioni del file. È privo di perdita del 100%, il che significa che la qualità dell'immagine non diminuirà affatto. E ancora meglio puoi caricare in gruppo le immagini dagli URL diretti se li hai ospitati sul tuo sito web o su un server di terze parti.
Strumenti aggiuntivi
C'è un sacco di software da provare per quanto riguarda la manipolazione delle immagini. Eventuali extra byte che è possibile eliminare dalla dimensione di ciascun file sono cruciali. Non c'è un sacco di software là fuori, ma le opzioni disponibili sono incredibili.
IrfanView
Questo software gratuito per Windows consente di visualizzare e ottimizzare qualsiasi set di immagini di grandi dimensioni. Mi piace soprattutto questo software perché supporta la conversione in batch da immagini in più directory. È possibile applicare automaticamente le stesse funzioni su centinaia di immagini JPEG.
Ciò che è ancora meglio è il supporto per i plugin di sviluppatori di terze parti. Uno di questi esempi è RIOT (Radical Image Optimization Tool). Questo plugin funziona per altri editor di grafica open source simili come GIMP. Offre una visualizzazione a doppia immagine in cui è possibile regolare manualmente i parametri di compressione per ciascuna delle immagini.
Il supporto software è meraviglioso e le funzionalità di RIOT sono molto facili da usare. Insieme alla compressione delle immagini hai anche accesso alla rimozione di metadati aggiuntivi come EXIF e Adobe XMP. Questi bit extra di dati possono solo aggiungere al file totale e sono raramente necessari.
ImageOptim per Mac
Se stai usando OS X e hai bisogno di una potente app di compressione, non cercare oltre. ImageOptim è un potente strumento per comprimere le immagini per il web - a volte anche meglio di Photoshop.
L'intera applicazione supporta la funzionalità di trascinamento della selezione in modo che sia facile ottimizzare grandi serie di immagini. Allo stesso modo è possibile eseguire comandi direttamente dal terminale e configurare gli script della shell. Controlla la pagina del codice di Google per ulteriori informazioni e supporto tecnico.
Ci sono stati alcuni problemi minori con l'ultima release stabile 1.3.3 nel rendering di immagini JPEG pixelate in Opera. Prova a controllare tutte le immagini ottimizzate nei 4 principali browser: Chrome, Safari, Firefox e Opera (e forse IE). Se qualcosa sembra storto puoi provare a scaricare ImageOptim 1.3.0 che converte un po 'più pulito.
Risorse utili
- JPEG 101: una guida al corso accelerato su JPEG
- Impostazioni di compressione giuste per salvare le immagini JPG per WordPress
- Clever JPEG Optimization Techniques
- Come ottimizzare le immagini JPEG per i siti Web
- Tutto ciò che devi sapere sulla compressione dell'immagine
Conclusione
La compressione JPEG è complicata poiché è necessario trovare il giusto equilibrio tra qualità e sostanza. Anche se le nostre moderne velocità di connessione Internet aumentano, è ancora necessario ridurre le dimensioni delle pagine web. Nuovi framework come jQuery e Typekit possono fare affidamento su centinaia di kilobyte aggiuntivi, anche su un design ben ottimizzato.
Devo ancora consigliare Adobe Photoshop come software per la modifica delle immagini in anteprima. Esistono altri esempi forse migliori per il processo di ottimizzazione JPEG. Ma i web designer possono cavarsela con soluzioni open source ancora meno conosciute. Se hai trucchi o idee simili sulla compressione JPEG, condividi con noi nell'area di discussione successiva di seguito.
