Come comprimere le immagini: una Guida di Web Designer

Sep 13, 2025

Come si fa

La velocità media di una moderna connessione internet sembrerebbe molto futuristico ai maestri web del passato. Torna nei primi giorni del Web, la quantità di dati trasferiti è stata fondamentale, sia in termini di tempo che in costi, quindi tutti coinvolti nell'hosting di qualcosa online hanno provato a rendere le immagini più piccole.

Ironia della sorte, il problema non è andato via al giorno d'oggi. Ogni volta che visiti un sito Web di Script-Heavy (come la mainstream World News), spesso tira una dozzina di megabyte di codice JavaScript, immagini, video e whatnot. Potrebbe comunque essere dolorosamente lento e persino costare un bel centesimo per alcuni utenti di dati mobili (questo non dovrebbe essere un problema se usi un decente Builder del sito web , e bene web hosting dovrebbe tenerlo occhio per te).

In questo tutorial, scopriremo i modi in cui puoi dimagrire i file bitmap per il web. Finché utilizza i bei vecchi formati PNG e JPEG (vedi di più su Formato file immagine. qui, e assicurati di salvare i tuoi file a destra deposito cloud. pure), vedremo come possiamo renderli più piccoli senza compromettere la qualità, usando un po 'di caldo Progetti open source. . Alla fine, avremo file sostanzialmente più piccoli che sembreremo comunque buoni ma richiedono meno tempo e dati per il rendering dei browser Web degli utenti.

Continua a leggere per immergersi nei dettagli. Innanzitutto, una nota rapida sul software. Tutti gli strumenti menzionati qui sono open source - salta in basso per una guida a Come ottenere il software hai bisogno.

I migliori temi del portfolio WordPress

Scegli il formato giusto

Può sembrare banale per essere ancora richiamato sulla dimensione del file, ma ci sono abbastanza esempi in cui un'immagine è troppo massiccia senza alcuno scopo o sembra terribile nonostante sia piccolo. Per evitare tali errori, scegliere un formato per salvare o convertire con saggezza un'immagine. L'utilizzo di JPEG implica la rottura di un'immagine in piastrelle di 8x8 pixel, dove ogni tessera viene compressa. Il livello di compressione dipende dall'utente (è quel cucchiaino quando si salva un'immagine) ma in genere JPEG consente un guadagno di dimensioni del file 10: 1 con una perdita accettabile di qualità.

La differenza percettiva tra i file JPEG realizzata con alto rapporto di compressione (80-100) e basso (40-60) è minimo per immagini fotografiche ma altamente notevoli per cose come opere d'arte digitale, icone e screenshot. Pertanto si consiglia di scegliere JPEG per le foto e andare con qualcos'altro per gli altri tipi di immagini bitmap.

PNG è uno dei formati più adatti per la grafica di rete (in realtà, questo è ciò che significa la sua abbreviazione). Mentre il formato JPEG è sempre lossy (anche con qualità impostata a 100), il formato PNG può essere perdita o meno. Inoltre, anche quando lo è, comprime i dati riducendo il numero di colori utilizzati nell'immagine, in modo che il risultato comunemente sia ancora croccante e chiaro. Quindi scegli PNG per raffigurante screengrab o qualsiasi altro tipo di immagini con riempimento solido.

Inizia con metodi convenienti

Imagine is based on Electron and provides a friendly interface for processing several images at once — Imagine si basa su elettrone e fornisce un'interfaccia amichevole per l'elaborazione di diverse immagini contemporaneamente

Ottimizzazione dei file bitmap è possibile con un grappolo di strumenti freeware, quindi non devi fare affidamento su un editor di immagini a pieno titolo. Immagina una tale applicazione ed è incredibilmente facile da usare. Basta trascinare un'immagine (o una pila di immagini) sulla finestra Imagina e utilizzare i piccoli cursori per regolare il rapporto di compressione.

Immagina di funzionare con i file JPEG, PNG e WebP ed è ideale per la codifica perdita di perdita. Il più grande vantaggio è che lo strumento è interattivo; Ti mostra immediatamente come l'immagine guarderà con le impostazioni correnti e visualizza la dimensione del file proposto. Immagina di funzionare ideale per l'elaborazione batch - almeno può salvare tutte le immagini aperte contemporaneamente se necessario.

Inutile dire che ci sono dozzine, se non centinaia, di altri ottimizzatori JPEG e PNG, compresi alcuni utili servizi online (come Tinyjpg. ). Ma non precipitarti ancora, ancora, abbiamo qualcosa di meglio sulla manica.

Tecniche di compressione avanzate

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — Per JPEG, abbiamo usato una foto di prova di un cappello di paglia su uno sfondo sfocato; Guetzli Dimensione del file ridotto del 33% e Lepton da un altro 23 per cento

A prima vista, sembra che non possiamo richiedere molto più un boccone fuori dalle dimensioni dei file JPEG perdite, qualcosa che può essere immediatamente dimostrato da tentativi futili di archiviare ulteriormente le immagini usando la zip o qualsiasi altra tecnica di compressione. Ma qui arriva Guetzli, un biscotto svizzero intelligente e un sofisticato encoder percettivo per JPEG.

Guetzli fa un jpeg medio più piccolo del 20-30 per cento aumentando la sua densità di compressione. Il segreto è che l'algoritmo è consapevole del modo in cui gli umani percepiscono ciò che vedono, quindi l'immagine risultante sembra ancora grande per gli occhi. Guetzli è uno strumento a riga di comando multipiattaforma, che utilizza la seguente sintassi:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

L'immagine originale può essere PNG o JPEG, mentre l'uscita è sempre JPEG. Pertanto, è possibile utilizzare Guetzli per convertire PNG in JPEG grazie alla sua compressione all'avanguardia. La qualità dovrebbe cadere tra 0-100. Guetzli è un software incredibilmente risorse-pesanti; Consuma quasi 300 MB di memoria per 1 megapixel e anche un sacco di potenza della CPU. Speriamo che i tuoi jpeg super-ottimizzati non stiamo aumentando il riscaldamento globale ...

La grafica di rete portatile è una storia diversa, fintanto che è stata progettata per la codifica delle immagini senza perdita di immagini. Quando si salva un'immagine come PNG in un editor di immagini come GIMP, si dispone di un cursore del rapporto di compressione con valori da 0 a 9. qui 0 significa nessuna compressione e rende l'immagine come se fosse stata salvata come TIFF. Al contrario, 9 si allontanano la maggior parte delle informazioni del colore non desiderate e dei risultati in un file che è 15-20 volte più piccolo del TIFF.

Questa volta proveremo a fare un file PNG già piccolo (con il rapporto di 9) ancora più piccolo. A tale scopo, useremo Zopfli, un altro strumento open source che ha nuovamente radici in Google Labs. Zopfli è un compressore di alta qualità per la codifica dei dati Deflate, Gzip e Zlib.

La parte interessante è che Zopfli contiene due encoder in un bundle: il binario generico e lo strumento "Zopflipng" dedicato. Quest'ultimo è esattamente ciò di cui abbiamo bisogno! Zopflipng è un encoder a deflati con determinati algoritmi backport dal formato di webp. È abbastanza intelligente da scegliere automaticamente la migliore strategia usando i codici di scansione e la rimozione di vari blocchi non necessari all'interno del PNG. Usalo con questa semplice sintassi:

zopflipng original_png output_png

Zopflipng può probabilmente fare il lavoro ancora meglio con le seguenti opzioni esplicite:

 Zopflipng \iterations = 500 --filters = 01234Mepb --lossy_8bit --lossy_Transparent Original_png
output_png

Il prezzo che paga è lo stesso di Guetzli: lo strumento richiede molto tempo per elaborare un'immagine, specialmente se è grande. Più iterazioni usi, più a lungo ci vorrà, ma 500 è un numero ragionevole. Il guadagno della dimensione del file con Zopfli si trova tra l'8 al 20%, il che è molto buono per immagini visivamente perfette. In breve, guadagnando l'8% è comune per gli screenshot, mentre il 20% è possibile con fotografie (quando è necessario memorizzarle come PNG).

Aggiorna ai formati di file successivi

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — L'immagine PNG TEST era uno screenshot ordinario 1920x1080; conseguente compressione di zopflipng e poi Flific ha guadagnato il 14% senza ridurre il numero di colori

Formalmente, questa parte va oltre lo scopo di PNG e JPEG ma è molto pratico, dal momento che è possibile organizzare la conversione dei file sul volo. Ciò che intendiamo qui utilizzando formati alternativi e nuovi di immagini che sovraperformano i migliori standard del settore (leggi Webp).

Uno è Flific, un nuovo formato di immagini senza perdita basato sul metodo di compressione Maniac (Meta-adattivo vicino ad Aritmetic Aritmetico), che può sovraperformare PNG, FFV1, WEBP senza perdita di perdita, BPG senza perdita di Lossless e Lossless JPEG 2000 in termini di rapporto di compressione. Flific è disponibile per tutte le piattaforme e alcuni spettatori di immagini lo supportano già ma ha una lunga strada per andare a colpire il mainstream. In questo momento, ha senso usando Flific per la conservazione o sul lato server. Può comportarsi come un formato di archiviazione efficiente. Avrai bisogno di prendere il codice dalla pagina GitHub del progetto e compilarlo. Una volta che hai il flipio Installato binario, utilizzare il seguente comando per codificare un'immagine PNG:

 flif -e originale output_flif

Sostituire -e. con -D. e inserisci i file in contrario per "non comprimere la tua immagine a PNG. In termini di strumenti, in questo momento ci sono il componente API Flif WIC per Windows, il plugin QT FLIF per Linux e il visualizzatore di immagini PHEW e il plugin Quicklook per MacOS (vedere la sezione dei collegamenti per i dettagli). Rispetto all'immagine precedentemente torturata da zopflipng, Flif riduce la dimensione del file più avanti del ~ 10%. Risultati impressionanti!

Il nostro ultimo eroe è Lepton, un altro formato open source pubblicato generosamente dagli sviluppatori Dropbox. Lepton fa con JPEG che Flific fa con PNG. Lepton può dimagrire JPEG fino al 22% nella modalità senza perdita di perdita, il che significa che l'encoder non causa alcuna perdita di qualità rispetto al file JPEG originale. Sotto il cofano Lepton implica tecniche intelligenti di comprimere quei blocchi JPEG 8x8. Invece di scrivere Zeros e quelli, Lepton codifica i dati bitmap utilizzando il programmatore aritmetico VP8, che rispetta il contesto attorno a ciascun blocco.

Il nostro test ha dimostrato che Lepton è molto efficiente e veloce. Il comando sembrava quanto segue:

 Lepton Original.jpg Uscita.Lep

E in un secondo o due lo strumento ha prodotto il file .Lep più piccolo di quasi un quarto dell'originale. Rispetto al Guetzli che richiede tempo, Lepton è velocemente veloce. Puoi usare Lepton allo stesso modo. Il formato consente di ridurre i costi di conservazione del 20-25% e poiché è così scattato, è possibile eseguire sequenze di codifica / decodifica on-the-fly senza gravi inconvenienti. A proposito, il comando decodifica è ugualmente semplice, ha solo bisogno di scambiare i due file e il file risultante è identico all'originale JPEG:

 Lepton Original.Lep output.jpg

Utilizzare le tecniche descritte per ottimizzare la memorizzazione dei dati dell'utente o migliorare ulteriormente le velocità di caricamento dei tuoi progetti Web.

Come ottenere il software

Ogni pezzo di software descritto in questo tutorial è open source, quindi puoi usarlo liberamente. Non è necessario disturbare la compilazione di tutto da fonti, poiché la maggior parte degli strumenti di seguito dispone di download binari. Ecco come ottenere il software in alto e in esecuzione.

Prendi il binario di Guetzli Qui . È la cosa più semplice da fare. Zopfli dà solo il codice (costruiscilo con "fare") a Github. . Tuttavia, potrebbe essere più saggio per farlo superare il gestore del pacchetto Node.js:

  NPM Installa Node-Zopfli

Alcuni collegamenti utili per Flific:

Flif-hub. : Implementazione di riferimento, fonti e binari di Windows
Xnview MP. : Un visualizzatore di foto multipiattaforma con supporto Flific integrato
qt-flif-plugin : Un paradiso per gli utenti Linux
Frotto : Un plug-in Viewer e Quicklook per MacOS
Lepton. : Codice sorgente e binari di Windows

Questo articolo è stato originariamente pubblicato in questione 316 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 316 qui o Iscriviti qui .

Articoli Correlati:

La guida definitiva alla risoluzione dell'immagine
Come creare il testo degli impianti e gli effetti dell'immagine in CSS
La Guida del designer per usare le immagini in modo più efficace
4 punte di ottimizzazione dell'immagine essenziale

Come comprimere le immagini: una Guida di Web Designer

Scegli il formato giusto

Inizia con metodi convenienti

Tecniche di compressione avanzate

Aggiorna ai formati di file successivi

Come ottenere il software

Come si fa - Articoli più popolari

Utilizzare lo strumento Pen e le texture per aggiungere profondità in Photoshop

Come dipingere un castello con SketchUp

Crea set di icone del prodotto in Illustrator

Genera tavolozze di colori senza fine con Khroma

Come dipingere un zombie in clip studio vernice

Dipingi un ritratto come van Gogh

Fai una GIF animata in Photoshop

Crea un autoritratto con solo 4 colori

Categorie