Come funziona la compressione delle immagini senza perdita di velocità della pagina di Google?

Quando esegui il plug-in PageSpeed ​​di Google per Firebug / Firefox su un sito Web, verranno suggeriti casi in cui un'immagine può essere compressa senza perdita di dati e fornirà un link per scaricare questa immagine più piccola.

Per esempio:

• La compressione senza perdita di http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg potrebbe consentire di risparmiare 33,5 KiB (riduzione dell'85%).
• La compressione senza perdita di http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg potrebbe consentire di risparmiare 18,5 KiB (riduzione del 77%).
• La compressione senza perdita di http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png potrebbe consentire di risparmiare 262 B (riduzione dell'11%).
• La compressione senza perdita di http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png potrebbe consentire di risparmiare 91 B (riduzione del 51%).
• La compressione senza perdita di http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm potrebbe consentire di risparmiare 61 B (riduzione del 5%).

Questo vale per entrambi i tipi di file JPG e PNG (non ho testato GIF o altri.)

Nota anche le miniature di Flickr (tutte quelle immagini sono 75x75 pixel). Sono un risparmio piuttosto grande. Se questo è davvero eccezionale, perché Yahoo non applica questo lato server all'intera libreria e riduce i carichi di archiviazione e larghezza di banda?

Perfino Stackoverflow.com rappresenta alcuni risparmi molto minori:

• La compressione senza perdita di http://sstatic.net/stackoverflow/img/sprites.png?v=3 potrebbe consentire di risparmiare 1,7 KiB (riduzione del 10%).
• La compressione senza perdita di http://sstatic.net/stackoverflow/img/tag-chrome.png potrebbe consentire di risparmiare 11 B (riduzione dell'1%).

Ho visto PageSpeed ​​suggerire risparmi abbastanza decenti sui file PNG che ho creato usando la funzione "Salva per Web" di Photoshop.

Quindi la mia domanda è: quali modifiche stanno apportando alle immagini per ridurle di così tanto? Immagino che ci siano risposte diverse per tipi di file diversi. Questo è davvero senza perdite per i JPG? E come possono battere Photoshop? Dovrei essere un po 'sospettoso di questo?

Se sei veramente interessato ai dettagli tecnici, controlla il codice sorgente:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

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: lo optipngstrumento da riga di comando lo fa anche se si fornisce -o 2tramite -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 è compresso usando 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 perdita di dati nel formato più piccolo.

Uso jpegoptimper ottimizzare i file JPG e optipngper ottimizzare i file PNG.

Se sei attivo bash, il comando per ottimizzare senza perdita di dati tutti i JPG in una directory (ricorsivamente) è:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

È possibile aggiungere -m[%]a jpegoptimimmagini JPG compressi con perdita di dati, 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 cambiarlo da o2a o7. Si noti che un livello di ottimizzazione più elevato significa tempi di elaborazione più lunghi.

Dai un'occhiata a http://code.google.com/speed/page-speed/docs/payload.html#CompressImages che descrive alcune delle tecniche / degli strumenti.

Si tratta di scambiare il tempo della CPU dell'encoder per l'efficienza di compressione. La compressione è una ricerca di rappresentazioni più brevi e se cerchi di più, troverai quelle più brevi.

Si tratta anche di utilizzare al massimo le funzionalità del formato immagine, ad esempio PNG8 + a anziché PNG24 + a, tabelle Huffman ottimizzate in JPEG, ecc.

Photoshop non si impegna davvero a farlo quando si salvano immagini per il Web, quindi non sorprende che qualsiasi strumento lo batti.

Vedere

• ImageOptim (lossless) e
• ImageAlpha (lossy) per file PNG più piccoli ( descrizione di alto livello come funziona ) e
• JPEGmini / MozJPEG (lossy) per un miglior compressore JPEG.

Per replicare i risultati della compressione JPG di PageSpeed ​​in Windows:

Sono stato in grado di ottenere esattamente gli stessi risultati di compressione di PageSpeed ​​usando la versione Windows di jpegtran che puoi trovare su www.jpegclub.org/jpegtran . Ho eseguito l'eseguibile utilizzando il prompt di DOS (utilizzare Start> CMD). Per ottenere esattamente le stesse dimensioni 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 informazioni sulle opzioni di compressione, al prompt dei comandi digitare semplicemente: jpegtran

Oppure per utilizzare le immagini generate automaticamente dalla scheda Velocità della pagina in Firebug:

Sono stato in grado di seguire i consigli di Pumbaa80 per ottenere l'accesso ai file ottimizzati di PageSpeed. Eventualmente 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 nomi di file PageSpeed ​​disordinati usando Adobe Bridge ed espressioni regolari:

Sebbene PageSpeed ​​in FireFox sia stato in grado di generare file di immagine ottimizzati per me, ha anche cambiato il loro nome trasformando nomi semplici come:

nice_picture.jpg

in

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Ho scoperto che questa sembra essere una lamentela comune. Dal momento che non volevo rinominare tutte le mie foto a mano, ho usato lo strumento Rinomina di Adobe Bridge insieme a un'espressione regolare. Potresti utilizzare altri comandi / strumenti di rinomina che accettano le espressioni regolari, ma sospetto che Adobe Bridge sia prontamente disponibile per la maggior parte di noi che lavora con problemi di PageSpeed!

1. Avvia Adobe Bridge
2. Seleziona tutti i file (usando il controllo A)
3. Seleziona Strumenti> Rinomina batch (o Control Shift R)
4. Nel campo Predefinito selezionare "Sostituzione stringa". I campi Nuovi nomi file ora dovrebbero visualizzare "Sostituzione stringa", seguito da "Nome file originale"
5. Abilita la casella chiamata "Usa espressione regolare"

6. Nel campo "Trova", inserisci l'espressione regolare (che selezionerà tutti i caratteri a partire dal separatore di sottolineatura più a destra):

   _ (?!. * _) (. *) \. Jpg $

7. Nel campo "Sostituisci con", inserisci:

   .jpg

8. Facoltativamente, fai clic sul pulsante Anteprima per visualizzare i risultati della ridenominazione batch proposti, quindi chiudi

9. Fai clic sul pulsante Rinomina

Dopo l'elaborazione, Bridge deseleziona i file che non sono stati interessati. Se vuoi pulire tutti i tuoi file .png, devi selezionare nuovamente tutte le immagini e modificare la configurazione sopra (per "png" invece di "jpg"). Puoi anche salvare la configurazione sopra come preimpostazione come "Pulisci immagini jpg Page Speed" in modo da poter pulire rapidamente i nomi dei file in futuro.

Schermata di configurazione / Risoluzione dei problemi

Se hai problemi, è possibile che alcuni browser non mostrino correttamente l'espressione RegEx sopra (biasimi i miei caratteri di escape), quindi per uno screenshot della configurazione (insieme a queste istruzioni), vedi:

Come utilizzare lo strumento Rinomina batch di Adobe Bridge per ripulire le immagini PageSpeed ​​ottimizzate con nomi di file disordinati

Secondo me l'opzione migliore là fuori che gestisce efficacemente la maggior parte dei formati di immagine in un colpo solo è il trimage . Utilizza efficacemente optipng, pngcrush, advpng e jpegoptim in base al formato dell'immagine e offre una compressione quasi perfetta senza perdita.

L'implementazione è piuttosto semplice se si utilizza una riga di comando.

sudo apt-get install trimage    
trimage -d images/*

e voilà! :-)
Inoltre troverai un'interfaccia abbastanza 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 l'elaborazione batch, tieni presente i reclami di trimage se non hai Xserver a disposizione. In tal caso basta scrivere uno script bash o php per fare qualcosa del genere

<?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 {} \;");
?>

Modifica le opzioni in base alle 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 racchiusi in questo GIU. Basta trascinare e rilasciare e lo fa per te.

https://pnggauntlet.com/

Tuttavia, ci vuole tempo, prova a comprimere un file png da 1 MB: sono rimasto sorpreso dalla quantità di CPU impiegata in questo confronto di compressione, che deve essere quello che sta succedendo qui. Sembra che l'immagine sia compressa in 100 modi e vince il migliore: D

Per quanto riguarda la compressione JPG, mi sento rischioso per la striscia di profili di colore e tutte le informazioni extra - tuttavia - se tutti lo fanno - è lo standard aziendale, quindi l'ho fatto da solo: D

Oggi ho salvato 113 MB su 5500 file su un'installazione WP, quindi ne vale la pena!