Lavorando con alcuni temi di wordpress ho modificato alcuni dei file di immagine e ho notato che le mie versioni modificate sono talvolta 3-4 volte più grandi dell'originale (salvate usando lo stesso formato). Non voglio degradare la qualità: quali sono alcuni modi per ridurre le dimensioni di un file in modo che si carichi più velocemente?
In questo momento, ad esempio, utilizzo Photoshop e imposto il dispositivo di scorrimento della qualità dell'immagine su "8" (su 10).
Risposte:
Smashing Magazine ha pubblicato 2 fantastici articoli sull'ottimizzazione PNG e sull'ottimizzazione JPG .
Sono abbastanza approfonditi, spiegando in dettaglio alcune cose che potresti non sapere sui formati e sulle loro implementazioni. Ad esempio, l'articolo JPEG: "Tieni presente che quando imposti la Qualità su un valore inferiore a 50 in Photoshop, viene eseguito un algoritmo di ottimizzazione aggiuntivo chiamato down-sampling del colore, che calcola la media del colore nei blocchi adiacenti di otto pixel".
Entrambi gli articoli utilizzano tecniche specifiche che puoi utilizzare in Photoshop per preparare i tuoi file per una maggiore compressione. Che è di gran lunga più efficace delle tecniche utilizzate dopo il salvataggio di un file.
Dopo aver salvato questi file o su file che non sono abbastanza fortunati da avere file sorgente stratificati per modificarli in Photoshop, c'è ancora più compressione nel strappare questi file.
Uso un'app per Mac chiamata ImageOptim . Dal loro sito:
ImageOptim ottimizza le immagini, in modo che occupino meno spazio su disco e caricino più velocemente, trovando i migliori parametri di compressione e rimuovendo commenti e profili colore non necessari. Gestisce animazioni PNG, JPEG e GIF.
ImageOptim fornisce GUI per vari strumenti di ottimizzazione: AdvPNG di AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran di libjpeg, Gifsicle e facoltativamente PNGOUT .
È eccellente per la pubblicazione di immagini sul Web (riduce facilmente le immagini salvate per il Web in Photoshop) e utile anche per ridurre le applicazioni per Mac e iPhone.
Pezzo di torta. Trascina le tue immagini (o cartelle di immagini) sulla finestra, scorre tutti questi strumenti ottimizzando gli schemi di compressione e rimuovendo i metadati e le informazioni del profilo colore non necessari (che comunque non sono ampiamente supportati - dovresti correggere i profili colore prima di salvare, non salvarli e incorporarli).
Tutti gli strumenti collegati in quella citazione hanno versioni Windows / Linux / Mac tranne PNGOUT, ma per fortuna qualcuno ha portato PNGOUT su OS X e Linux perché sono così premurosi. Se scegli di usare ImageOptim, includerà tutto tranne PNGOUT in .app, quindi prendi la porta PNGOUT, rilasciala in / usr / local / bin (o ovunque) e indica a ImageOptim dove si trova.
Non è raro per me, soprattutto con le immagini PNG, vedere le dimensioni dei file scendere oltre il 30% anche dopo aver salvato tramite "Salva per Web e dispositivi" di Photoshop.
Protip: dopo aver eseguito l'ottimizzazione, ordina per colonna icona a sinistra e seleziona tutte le righe con l'icona (X) - file che non sono stati ulteriormente ridotti. Rimuovili dall'elenco e riesegui tutte le immagini con l'icona del segno di spunta. Posso quasi prometterti che avrai immagini che perdono ancora le dimensioni del file. Ripeti l'ordinamento, selezionando, rimuovendo, rieseguendo fino a quando non ottieni tutte le icone (X) e chiamalo un giorno.
Quando si salvano fotografie in Photoshop, si consiglia di utilizzare File > Save for Web and Devices. Ti permetterà di giocare con i livelli di compressione e vedere il risultato visivo in tempo reale. Sulle fotografie di solito è possibile salvarlo al di sotto del livello 8 e ottenere comunque ottimi risultati.
Potresti voler controllare Smush.it di Yahoo . Ho trovato che funziona molto bene.
Per le immagini PNG è possibile ridurre il numero di colori nella mappa colori e salvarli come PNG indicizzato. Ad esempio, considera un logo di 128x128 pixel (non compresso). Immagina che ci siano solo 16 colori che utilizza effettivamente.
Puoi vedere che senza ridurre la qualità dell'immagine (questo si applica solo a determinati tipi di immagini) puoi ridurre sostanzialmente le dimensioni.
Per i pulsanti e le icone del sito, puoi anche considerare di aggregarli in un'unica immagine e utilizzare CSS o JavaScript per controllarne la visualizzazione (sprite). Ciò consente di risparmiare sul numero di richieste HTTP effettuate per ogni immagine.
Prova altri formati.
Fondamentalmente, prova a salvare l'immagine in diversi formati e poi guarda le dimensioni del file.
Se stai usando JPEG, dovresti essere in grado di regolare la qualità dell'immagine su e giù in un editor grafico come paint.net. La qualità dell'immagine del 50% è generalmente abbastanza buona per il web e rende l'immagine molto più piccola.
Con PNG non puoi farlo, ma vale la pena notare che a volte PNG è molto più grande e talvolta molto più piccolo di JPEG. Il PNG è molto più piccolo per le immagini in bianco e nero, ad esempio, come i disegni in bianco e nero.
Il consiglio dato in questi giorni è di utilizzare gli sprite CSS per accelerare i tempi di caricamento riducendo le richieste, ma ancora una volta è necessario esaminare effettivamente la dimensione dell'immagine che si ottiene. È possibile che l'immagine di sprite CSS sia molto più grande delle immagini dei componenti, se, ad esempio, si combinano diversi PNG in bianco e nero con uno a colori.
Vuoi anche assicurarti di eliminare tutti i dati EXIF: quasi tutto ciò è irrilevante per gli utenti sul Web, devono davvero sapere che hai usato una Canon 5D per scattare la foto e che hai usato un F-Stop di 2,8, esposto per 0,5 secondi, con un ISO di 160, nessuna distorsione di esposizione e una lunghezza focale di 9 mm?
Tutti questi metadati aggiungono peso all'immagine e, in generale, dovrebbero essere eliminati.
Come sottolinea jessegavin , la maggior parte delle app di immagini ti mostrerà un'anteprima degli effetti della compressione: usali , poiché un'impostazione generale di "8" raramente ti darà il miglior compromesso possibile.
Infine, il plug -in Firefox / Firebug di Google Page Speed può darti una buona idea di quanto potresti ridurre le dimensioni dell'immagine (incluso consentire di visualizzare e salvare le versioni più piccole).
Dopo aver fatto tutti gli altri suggerimenti per garantire che l'immagine sia la più piccola possibile pur mantenendo il livello desiderato di qualità, vorrai anche configurare il tuo sito web in modo che offra immagini con intestazioni HTTP minime e assicurati che il le intestazioni fornite consentono di archiviare le immagini in modo appropriato memorizzando nella cache server proxy e browser Web.
Per ridurre la dimensione delle richieste, assicurarsi che il server Web sia configurato per non inviare intestazioni inutili come X-Powered-By. Inoltre, assicurati di offrire elementi come immagini, CSS e altri componenti statici da un host che non imposta cookie (ad esempio static.example.com).
Per le immagini statiche, imposta l'intestazione Scadenza su una data nel lontano futuro. Ciò garantisce che il browser Web e tutti i proxy di cache nel mezzo rimarranno sull'immagine il più a lungo possibile. L'unico aspetto negativo di questo è che se vuoi mostrare un'immagine diversa dovrai usare un nome file diverso e collegarti a quello. La numerazione delle versioni nel nome del file (ad esempio myimage_1.png o /images/3/logo.png) può essere un modo efficace per farlo. Per pagine meno statiche, imposta un'intestazione Expires realistica (accesso più X ore) e assicurati di impostare l'intestazione Last-Modified o l'intestazione eTag (non entrambe) in modo che i browser che hanno precedentemente scaricato i file possano testare rapidamente se hanno la versione corrente confrontando le intestazioni invece di abbattere l'intera immagine.
Sebbene ci siano molte risorse disponibili per discutere di queste tecniche, Yahoo ha fatto un ottimo lavoro portando molti suggerimenti per migliorare le prestazioni della consegna dei contenuti in un unico posto.