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?

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

Respostas:

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