Google Pagespeed : 새로운 이미지 압축 규칙을 만족시키는 방법?

우리는 좋은 페이지 시드 값을 가진 여러 페이지가 있습니다-심지어 100/100 인 페이지도 있습니다. 그러나 며칠이 지나서 Pagespeed는 모든 사이트 (기술적으로 다르고 다른 서버)에서 이미지가 더 최적화 될 수 있다고 주장합니다.

알고리즘에 의해 정확히 무엇이 바뀌 었는지 아는 사람이 있습니까? PS 100/100 (이전)이있는 것에서는 jpegoptim을 사용하므로 더 최적화하는 방법을 모릅니다. 응용 프로그램에서 이미지를 업로드 한 다음 최적화합니다.

모든 통찰력은 인정 될 것입니다. PS에 대한 변경 로그가 어디에 있습니까?

ZURB Foundation과 같은 반응 형 프레임 워크를 반응 형 이미지와 함께 사용하여 이전에 아무런 문제없이 페이지에 대해 동일한 결과를 얻었습니다.

과거에는 다음을 사용했습니다.

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

좋은 결과를 얻었습니다.

2017 년 1 월 솔루션 : 85 % 품질이 트릭을 수행해야합니다.

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

Google 페이지 속도에서 100/100으로 돌아갑니다.

다음은 ZURB Foundation 6에 대한 gulp / npm 배포 방법의 일부입니다.

// 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'));
}

npm 모듈 gulp-imagemin imagemin-jpegoptim을 추가해야합니다.

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

" 이 페이지에 최적화 된 이미지, JavaScript 및 CSS 리소스를 다운로드하십시오 ."라는 메시지가 표시 될 수 있습니다 . Google에서 기대하는 최적화를 얻는 데 문제가있는 경우 작업을 완료했습니다. Google이 원하는만큼 다양한 도구가 다운되지 않는 경우가 있습니다.

Google의 최신 권장 사항은 imagemagick convert 를 사용하는 것입니다 .

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

구체적인 예 퍼즐 .jpg

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

내 자신의 이미지에서 동일한 인수를 사용하여 다운로드 한 최적화 된 JPG 파일과 동일한 결과를 얻었습니다.