Google Pagespeed: come soddisfare le nuove regole di compressione delle immagini?

14

Abbiamo diverse pagine con buoni valori di Pageseed, anche quelle con 100/100. Da alcuni giorni tuttavia, Pagespeed afferma su tutti i siti (tecnicamente diversi, server diversi) che le nostre immagini potrebbero essere più ottimizzate.

Qualcuno sa cosa è stato esattamente modificato dall'algoritmo? Su quello con PS 100/100 (prima), utilizziamo jpegoptim, quindi non sappiamo davvero come ottimizzare ulteriormente. Le immagini vengono caricate dalla nostra applicazione e quindi ottimizzate.

Qualsiasi approfondimento sarebbe apprezzato. Esiste un log delle modifiche per PS da qualche parte?

google google-pagespeed

— Raphael Jeger
fonte

Vedi quel messaggio sul desktop test o nel test mobile?

— Goyllo,

entrambi caddero ...

— Raphael Jeger il

1

Non sono sicuro che possa fare un lavoro migliore, ma Google consiglia di utilizzare jpegtran per ottimizzare le immagini JPEG. Sembra anche che Google stia spingendo un nuovo formato di immagine chiamato WebP che ha dimensioni più ridotte, ma uno scarso supporto del browser.

— Stephen Ostermiller

Ho notato anche questo. So che WebPageTest utilizza come base la qualità dell'85% per i JPG. Ma non riesco ad avvicinarmi alle dimensioni consigliate di Google se non vado sotto l'80% della qualità.

— DisgruntledGoat

7

Vedo gli stessi risultati sgradevoli per le pagine senza alcun problema prima, ovviamente usando framework responsive come ZURB Foundation con immagini responsive.

In passato ho usato:

find . -iname "*.jpg" -exec jpegoptim --strip-all -o -p {} \;

e ottenuto grandi risultati.

Soluzione gennaio 2017: la qualità dell'85% dovrebbe fare il trucco:

find . -iname "*.jpg" -exec jpegoptim --strip-all -m85 -o -p {} \;

Torna a 100/100 sulla velocità della pagina google.

Ecco una parte del mio metodo di distribuzione gulp / npm per ZURB Foundation 6

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, imagemin(
      [
        imagemin.gifsicle({interlaced: true}),
        imageminJpegoptim({
          max: 85,
          progressive: true
        }),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({plugins: [{cleanupIDs: false, removeEmptyAttrs: false, removeViewBox: false}]})
      ],
      {
      },
      {
        verbose: true
      }
    )))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

Devi aggiungere i moduli npm gulp-imagemin imagemin-jpegoptim

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');

— S. Rieger
fonte

Benvenuti nel sito. Solo per chiarire, stai affermando di aver ricevuto anche la stessa notifica sull'ottimizzazione delle immagini, mentre in precedenza no? In tal caso, le opzioni jpegoptim che hai aggiunto hanno aiutato a risolverlo?

— dan

abbiamo provato anche con impostazioni diverse in jpegtran e jpegoptim, nessun modo per ottenere immagini così piccole come gli stati di Google è possibile ... Inoltre, non penso che abbia nulla a che fare con le dimensioni dell'immagine (in pixel) perché la velocità della pagina si diversifica chiaramente problemi di compressione e dimensione dei pixel.

— Raphael Jeger,

Grazie - è davvero utile. E anche tu puoi fare qualcosa di simile per pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

Potresti anche notare il messaggio: " Scarica risorse ottimizzate per immagini, JavaScript e CSS per questa pagina " . Hanno fatto il lavoro per te se hai problemi a ottenere l'ottimizzazione che Google si aspetta. A volte vari strumenti non possono essere ridotti come vuole Google.

— doublejosh
fonte

2

L'ultima raccomandazione di google è di usare imagemagick convert :

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

con l'esempio specifico puzzle.jpg

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

usando quegli stessi argomenti sulle mie immagini ho ottenuto gli stessi risultati del file JPG ottimizzato scaricato.

— Kelly
fonte

1

Nota che se stai usando Windows, prova magickse convertnon funziona per te. magick puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg. imagemagick.org/discourse-server/viewtopic.php?t=19679

— user2875289