Google Pagespeed: como satisfazer as novas regras de compactação de imagem?

14

Temos várias páginas com bons valores Pageseed - mesmo aquelas com 100/100. Porém, desde alguns dias, o Pagespeed alega em todos os sites (tecnicamente diferentes, servidores diferentes) que nossas imagens podem ser mais otimizadas.

Alguém sabe o que exatamente foi alterado pelo algoritmo? No caso do PS 100/100 (antes), usamos o jpegoptim, por isso não sabemos como otimizar ainda mais. As imagens são carregadas pelo nosso aplicativo e otimizadas.

Qualquer insight seria apreciado. Existe um changelog para PS em algum lugar?

google google-pagespeed

— Raphael Jeger
fonte

Você vê essa mensagem no teste de desktop ou móvel?

— Goyllo

os dois caíram ...

— Raphael Jeger

1

Não tenho certeza se pode fazer um trabalho melhor, mas o Google recomenda o uso do jpegtran para otimizar imagens JPEG. Parece também que o Google está lançando um novo formato de imagem chamado WebP, com tamanhos menores, mas com suporte insuficiente ao navegador.

— Stephen Ostermiller

Eu notei isso também. Eu sei que o WebPageTest usa 85% de qualidade para JPGs como sua linha de base. Mas não consigo me aproximar do tamanho recomendado pelo Google, a menos que tenha menos de 80% de qualidade.

— usar o seguinte

7

Vejo os mesmos resultados desagradáveis para páginas sem nenhum problema antes, é claro, usando estruturas responsivas como a ZURB Foundation com imagens responsivas.

No passado eu usei:

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

e obteve ótimos resultados.

Solução de janeiro de 2017: 85% da qualidade deve fazer o truque:

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

Voltar para 100/100 na velocidade da página do google.

Aqui está uma parte do meu método de implantação gulp / npm para o 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'));
}

Você precisa adicionar os módulos npm gulp-imagemin imagemin-jpegoptim

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

— S. Rieger
fonte

Bem vindo ao site. Apenas para esclarecer, você está afirmando que também recebeu a mesma notificação sobre como otimizar imagens, enquanto anteriormente não o fez? Em caso afirmativo, as opções jpegoptim adicionadas ajudaram a resolver isso?

— dan

tentamos também com configurações diferentes em jpegtran e jpegoptim, não é possível obter imagens tão pequenas como os estados do Google ... Além disso, acho que não tem nada a ver com tamanhos de imagem (em pixels), porque o pagespeed diversifica claramente problemas de compactação e tamanho de pixel.

— Raphael Jeger

Obrigado - isso é realmente útil. E também você pode fazer algo semelhante para pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

Você também pode observar a mensagem: " Faça o download de recursos otimizados de imagem, JavaScript e CSS para esta página " . Eles fizeram o trabalho para você se você estiver com problemas para obter a otimização que o Google espera. Às vezes, várias ferramentas não podem ser tão pequenas quanto o Google deseja.

— doublejosh
fonte

2

A recomendação mais recente do google é usar o imagemagick convert :

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

com o exemplo específico puzzle.jpg

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

usando esses mesmos argumentos em minhas próprias imagens, obtive os mesmos resultados que o arquivo JPG otimizado baixado.

— Kelly
fonte

1

Observe que se você estiver usando o Windows, tente magickse convertnão funcionar para você. 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