In che modo funziona la pagina di compressione senza perdita di immagini di Google?
-
12-11-2019 - |
Domanda
Quando si esegue il plug -in Pagespeed di Google per Firebug/Firefox su un sito Web, suggerirà casi in cui un'immagine può essere compressa senza perdite e fornire un link per scaricare questa immagine più piccola.
Per esempio:
- Comprimendo senza perdita http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg potrebbe risparmiare 33,5 kib (riduzione dell'85%).
- Comprimendo senza perdita http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg potrebbe risparmiare 18,5 kib (riduzione del 77%).
- Comprimendo senza perdita http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png potrebbe risparmiare 262b (riduzione dell'11%).
- Comprimendo senza perdita http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png potrebbe risparmiare 91b (riduzione del 51%).
- Comprimendo senza perdita http://www.gravatar.com/avatar/0b1bcebcd4c3c38cb5be805df5e4d42?s=45&d=mm potrebbe risparmiare 61b (riduzione del 5%).
Questo vale tra i filetipi JPG e PNG (non ho testato GIF o altri.)
Nota anche le miniature Flickr (tutte quelle immagini sono 75x75 pixel.) Sono alcuni risparmi piuttosto grandi. Se questo è davvero eccezionale, perché Yahoo non sta applicando questo lato server a tutta la loro libreria e riduce i loro carichi di archiviazione e larghezza di banda?
Anche stackoverflow.com rappresenta alcuni risparmi molto piccoli:
- Comprimendo senza perdita http://sstatic.net/stackoverflow/img/sprites.png?v=3 potrebbe risparmiare 1,7 kib (riduzione del 10%).
- Comprimendo senza perdita http://sstatic.net/stackoverflow/img/tag-chrome.png potrebbe risparmiare 11b (riduzione dell'1%).
Ho visto PagesPeed suggerire un risparmio abbastanza decente sui file PNG che ho creato usando la funzione "Salva per Web" di Photoshop.
Quindi la mia domanda è: quali cambiamenti stanno apportando alle immagini per ridurle così tanto? Immagino che ci siano risposte diverse per diversi filetipi. È davvero senza perdita di perdita per i jpg? E come possono battere Photoshop? Dovrei essere un po 'sospettoso di questo?
Soluzione
Se sei davvero interessato ai dettagli tecnici, controlla il codice sorgente:
Per i file PNG, usano optipng con un approccio di prova ed errore
// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};
Quando vengono applicate tutte e quattro le combinazioni, viene mantenuto il risultato più piccolo. Semplice come quella.
(NB: il optipng
Lo strumento di riga di comando lo fa anche se fornisci -o 2
attraverso -o 7
)
Per i file JPEG, usano jpeglib Con le seguenti opzioni:
JpegCompressionOptions()
: progressive(false), retain_color_profile(false),
retain_exif_data(false), lossy(false) {}
Allo stesso modo, WebP viene compresso utilizzando libwebp Con queste opzioni:
WebpConfiguration()
: lossless(true), quality(100), method(3), target_size(0),
alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}
C'è anche image_converter.cc che viene utilizzato per convertire senza perdite in formato più piccolo.
Altri suggerimenti
Io uso jpegoptim
Per ottimizzare i file JPG e optipng
Per ottimizzare i file PNG.
Se sei acceso bash
, il comando di ottimizzare senza perdite tutti i JPG in una directory (in modo ricorsivo) è:
find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;
Puoi aggiungere -m[%]
a jpegoptim
Per perdita di immagini JPG comprime, ad esempio:
find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;
Per ottimizzare tutti i PNG in una directory:
find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;
-o2
è il livello di ottimizzazione predefinito, puoi modificarlo da o2
a o7
. Si noti che un livello di ottimizzazione più elevato significa tempi di elaborazione più lunghi.
Date un'occhiata al http://code.google.com/speed/page-speed/docs/payload.html#compressimages che descrive alcune delle tecniche/strumenti.
È una questione di tempo di CPU dell'encoder commerciale per l'efficienza di compressione. La compressione è una ricerca di rappresentazioni più brevi e, se cerchi di più, ne troverai quelle più brevi.
Vi è anche una questione di utilizzare le capacità del formato di immagine al massimo, ad esempio png8+a invece di png24+a, tabelle Huffman ottimizzate in JPEG, ecc.
Photoshop non si sforza davvero di farlo quando si salva le immagini per il Web, quindi non sorprende che qualsiasi strumento lo battesse.
Vedere
- Imageoptim (senza perdita) e
- Imagealpha (perdita) per file PNG più piccoli (Descrizione di alto livello come funziona) e
- Jpegmini/Mozjpeg (Lossy) Per un migliore compressore JPEG.
Per replicare la compressione JPG di PagesPeed risulta in Windows:
Sono stato in grado di ottenere esattamente gli stessi risultati di compressione di Pagespeed utilizzando la versione Windows di JPEGTRAN a cui puoi ottenere www.jpegclub.org/jpegtran. Ho eseguito l'eseguibile usando il prompt DOS (usa start> cmd). Per ottenere esattamente la stessa dimensione del file (fino al byte) della compressione Pagespeed, ho specificato l'ottimizzazione di Huffman come segue:
jpegtran -optimize source_filename.jpg output_filename.jpg
Per ulteriori aiuto sulle opzioni di compressione, al prompt dei comandi, basta digitare: jpegtran
O per utilizzare le immagini generate automaticamente dalla scheda Pagespeed in Firebug:
Sono stato in grado di seguire i consigli di Pumbaa80 per ottenere l'accesso ai file ottimizzati di Pagespeed. Speriamo che lo screenshot qui Fornisce ulteriore chiarezza per l'ambiente Firefox. (Ma non sono stato in grado di accedere a una versione locale di questi file ottimizzati in Chrome.)
E per ripulire i file di file delle pagine disordinate utilizzando Adobe Bridge ed espressioni regolari:
Sebbene Pagespeed in Firefox sia stato in grado di generare file di immagini ottimizzati per me, ha anche cambiato i loro nomi trasformando semplici nomi come:
nice_picture.jpg
in
nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg
Ho scoperto che questa sembra essere una lamentela comune. Dato che non volevo rinominare tutte le mie foto a mano, ho usato lo strumento di rinominato Adobe Bridge insieme a un'espressione regolare. È possibile utilizzare altri comandi/strumenti di rinominato che accettano espressioni regolari, ma sospetto che Adobe Bridge sia prontamente disponibile per la maggior parte di noi che lavora con i problemi di page!
- Avvia Adobe Bridge
- Seleziona tutti i file (usando il controllo a)
- Seleziona Strumenti> Rinomina batch (o Control Shift R)
- Nel campo preimpostazione selezionare "Sostituzione delle stringhe". I nuovi campi di filamenti dovrebbero ora visualizzare "String Sostituzione", seguita da "FileName originale"
- Abilita la casella di controllo chiamata "Usa l'espressione regolare"
Nel campo "Trova", inserisci l'espressione regolare (che selezionerà tutti i caratteri a partire dal separatore più a destra di sottolineatura):
_ (?!.*_) (.*) . jpg $
Nel campo "Sostituisci con", inserisci:
.jpg
Facoltativamente, fare clic sul pulsante Anteprima per visualizzare i risultati di rinomina del lotto proposto, quindi chiudere
- Fare clic sul pulsante Rinomina
Si noti che dopo l'elaborazione, Bridge deseleziona i file che non sono stati interessati. Se vuoi pulire tutti i file .png, è necessario selezionare tutte le immagini e modificare la configurazione sopra (per "png" anziché "jpg"). È inoltre possibile salvare la configurazione sopra come preimpostazione come "immagini JPG di Pagespeed Clean" in modo da poter pulire rapidamente i file in futuro.
Schermatura di configurazione / risoluzione dei problemi
Se hai problemi, è possibile che alcuni browser non possano mostrare correttamente l'espressione di Regex (incolpare i miei personaggi di fuga) quindi per uno screenshot della configurazione (insieme a queste istruzioni), vedi: vedi:
A mio avviso, l'opzione migliore là fuori che gestisce efficacemente la maggior parte dei formati di immagini in una volta è trimage. Utilizza efficacemente optipng, pngcrush, advpng e jpegoptim Basato sul formato dell'immagine e offre una compressione senza perdita perfetta.
L'implementazione è abbastanza semplice se si utilizza una riga di comando.
sudo apt-get install trimage
trimage -d images/*
E voilà! :-)
Inoltre troverai un'interfaccia piuttosto semplice per farlo anche manualmente.
C'è uno script batch molto utile che ottimizza ricorsivamente le immagini sotto una cartella usando optipng (da Questo blog):
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G
UNA LINEA!
Se stai cercando un'elaborazione batch, tieni presente che il trimage si lamenta se non hai disponibile Xserver. In tal caso, scrivi solo uno script Bash o PHP per fare qualcosa di simile
<?php
echo "Processing jpegs<br />";
exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
echo "Processing pngs<br />";
exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>
Cambia le opzioni per soddisfare le tue esigenze.
Per Windows ci sono diverse interfacce Drag'n'Drop per un facile accesso.
https://sourceforge.net/projects/nikkhokkho/files/fileoptimizer/
Per i file PNG ho trovato questo per il mio divertimento, apparentemente 3 diversi strumenti avvolti in questo GIU. Basta trascinare e cadere e lo fa per te.
Tuttavia, prova a comprimere un file PNG da 1 MB: sono rimasto sorpreso da quanto CPU sia andato in questo confronto di compressione che deve essere ciò che sta accadendo qui. Sembra che l'immagine sia compressa in 100 modi e la migliore vince: D
Per quanto riguarda la compressione JPG che sentivo rischioso di striscia di profili di colore e tutte le informazioni extra - tuttavia - se tutti lo fanno - è lo standard di business, quindi l'ho fatto da solo: D
Ho salvato 113 MB su 5500 file su un'installazione WP oggi, quindi ne vale la pena!