Google Pagespeed: ¿Cómo satisfacer las nuevas reglas de compresión de imágenes?

14

Tenemos varias páginas con buenos valores de Pageseed, incluso aquellas con 100/100. Sin embargo, desde hace unos días, Pagespeed afirma en todos los sitios (técnicamente diferentes, diferentes servidores) que nuestras imágenes podrían ser más optimizadas.

¿Alguien sabe qué ha cambiado exactamente el algoritmo? En el que tiene PS 100/100 (antes), usamos jpegoptim, por lo que realmente no sabemos cómo optimizar aún más. Nuestra aplicación carga las imágenes y luego las optimiza.

Cualquier idea sería apreciada. ¿Hay un registro de cambios para PS en alguna parte?

google google-pagespeed

— Raphael Jeger
fuente

¿Ves ese mensaje en la prueba de escritorio o en la prueba móvil?

— Goyllo

ambos cayeron ...

— Raphael Jeger

1

No estoy seguro de si puede hacer un mejor trabajo, pero Google recomienda usar jpegtran para optimizar las imágenes JPEG. También parece que Google está impulsando un nuevo formato de imagen llamado WebP que tiene tamaños más pequeños, pero un soporte pobre para el navegador.

— Stephen Ostermiller

También he notado esto. Sé que WebPageTest utiliza 85% de calidad para JPG como base de referencia. Pero no puedo acercarme al tamaño recomendado de Google a menos que vaya por debajo del 80% de calidad.

— DisgruntledGoat

7

Veo los mismos resultados antiestéticos para páginas sin ningún problema antes, por supuesto, usando marcos receptivos como ZURB Foundation con imágenes receptivas.

En el pasado solía:

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

y obtuve excelentes resultados.

Solución de enero de 2017: el 85% de calidad debería ser suficiente:

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

Volver a 100/100 en la velocidad de la página de google.

Aquí hay una parte de mi método de implementación gulp / npm para 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'));
}

Debe agregar los módulos npm gulp-imagemin imagemin-jpegoptim

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

— S. Rieger
fuente

Bienvenido al sitio. Solo para aclarar, ¿estás afirmando que también has experimentado la misma notificación sobre la optimización de imágenes que antes no? Si es así, ¿las opciones de jpegoptim que agregó ayudaron a resolver eso?

— dan

también lo intentamos con diferentes configuraciones en jpegtran y jpegoptim, no hay manera de lograr imágenes tan pequeñas como los estados de Google ... Además, no creo que tenga nada que ver con los tamaños de imagen (en píxeles) porque la velocidad de página se diversifica claramente problemas de compresión y tamaño de píxeles.

— Raphael Jeger

Gracias, esto es realmente útil. Y también puedes hacer algo similar para pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah 03 de

2

También puede notar el mensaje: " Descargue recursos optimizados de imagen, JavaScript y CSS para esta página " . Han hecho el trabajo por usted si tiene problemas para obtener la optimización que Google espera. A veces, varias herramientas no pueden llegar a ser tan pequeñas como Google quiere.

— doublejosh
fuente

2

La última recomendación de google es usar imagemagick convert :

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

con el ejemplo específico puzzle.jpg

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

usando esos mismos argumentos en mis propias imágenes obtuve los mismos resultados que el archivo JPG optimizado descargado.

— Kelly
fuente

1

Tenga en cuenta que si está utilizando Windows, pruebe magicksi convertno funciona para usted. 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

— usuario2875289