Google Pagespeed: Wie werden die neuen Bildkomprimierungsregeln erfüllt?

14

Wir haben mehrere Seiten mit guten Pageseed-Werten - auch solche mit 100/100. Seit ein paar Tagen behauptet Pagespeed jedoch, dass unsere Bilder auf allen Websites (technisch unterschiedliche Server) optimiert werden könnten.

Weiß jemand, was genau durch den Algorithmus geändert wurde? Auf dem mit PS 100/100 (vorher) verwenden wir jpegoptim, daher wissen wir wirklich nicht, wie wir weiter optimieren sollen. Die Bilder werden von unserer Anwendung hochgeladen und anschließend optimiert.

Jede Einsicht wäre dankbar. Gibt es irgendwo ein Changelog für PS?

google google-pagespeed

— Raphael Jeger
quelle

Wird diese Meldung im Desktop-Test oder im mobilen Test angezeigt?

— Goyllo

beide fielen ...

— Raphael Jeger

1

Ich bin nicht sicher, ob es eine bessere Arbeit leisten kann, aber Google empfiehlt , jpegtran zur Optimierung von JPEG-Bildern zu verwenden. Es sieht auch so aus, als würde Google ein neues Bildformat mit dem Namen "WebP" verwenden, das zwar eine geringere Größe, aber eine schlechte Browserunterstützung aufweist.

— Stephen Ostermiller

Ich habe das auch bemerkt. Ich weiß, dass WebPageTest für JPGs eine Qualität von 85% als Basis verwendet. Aber ich kann die von Google empfohlene Größe nur annähern, wenn die Qualität unter 80% liegt.

— DisgruntledGoat

7

Ich sehe die gleichen unansehnlichen Ergebnisse für Seiten ohne Probleme, natürlich mit responsiven Frameworks wie ZURB Foundation mit responsiven Bildern.

In der Vergangenheit habe ich verwendet:

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

und habe tolle Ergebnisse.

Jan 2017 Lösung: 85% Qualität sollte den Trick machen:

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

Zurück zu 100/100 bei Google Page Speed.

Hier ist ein Teil meiner gulp / npm-Bereitstellungsmethode für 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'));
}

Sie müssen die npm-Module gulp-imagemin imagemin-jpegoptim hinzufügen

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

— S. Rieger
quelle

Willkommen auf der Seite. Geben Sie zur Verdeutlichung an, dass Sie dieselbe Benachrichtigung bezüglich der Optimierung von Bildern erhalten haben, während Sie dies zuvor nicht getan haben? Wenn ja, haben die von Ihnen hinzugefügten jpegoptim- Optionen das behoben ?

— Dan

wir haben es auch mit verschiedenen einstellungen in jpegtran und jpegoptim versucht, da keine möglichkeit besteht, so kleine bilder wie in google zu erzielen. ich glaube auch nicht, dass dies mit der bildgröße (in pixel) zu tun hat, da die seitengeschwindigkeit deutlich variiert Komprimierungs- und Pixelgrößenprobleme.

— Raphael Jeger

Danke - das ist wirklich nützlich. Und auch für pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah am

2

Möglicherweise wird auch die Meldung angezeigt: " Optimierte Bild-, JavaScript- und CSS-Ressourcen für diese Seite herunterladen. " Sie haben die Arbeit für Sie erledigt, wenn Sie Probleme haben, die von Google erwartete Optimierung zu erhalten. Manchmal können verschiedene Tools nicht so klein werden, wie Google es möchte.

— doublejosh
quelle

2

Die neueste Empfehlung von Google ist, imagemagick convert zu verwenden :

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

mit dem konkreten Beispiel puzzle.jpg

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

Wenn ich die gleichen Argumente für meine eigenen Bilder verwende, erhalte ich die gleichen Ergebnisse wie die heruntergeladene optimierte JPG-Datei.

— Kelly
quelle

1

Beachten Sie, dass Sie unter Windows versuchen sollten, magickfalls convertdies bei Ihnen nicht funktioniert. 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