In che modo funziona la pagina di compressione senza perdita di immagini di Google?

StackOverflow https://stackoverflow.com/questions/5451597

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:

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:

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?

È stato utile?

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

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!

  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 preimpostazione selezionare "Sostituzione delle stringhe". I nuovi campi di filamenti dovrebbero ora visualizzare "String Sostituzione", seguita da "FileName originale"
  5. Abilita la casella di controllo chiamata "Usa l'espressione regolare"

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

    _ (?!.*_) (.*) . jpg $

  7. Nel campo "Sostituisci con", inserisci:

    .jpg

  8. Facoltativamente, fare clic sul pulsante Anteprima per visualizzare i risultati di rinomina del lotto proposto, quindi chiudere

  9. 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:

Come utilizzare lo strumento Rinomina batch di Adobe Bridge per ripulire immagini di pagine ottimizzate che hanno filettami disordinati

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.

https://pnggauntlet.com/

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!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top