画像圧縮

2018.04.08

PageSpeed Insights と画像圧縮についての備忘録。

 

JPEGについて

ImageMagickを使用する。Jpegtranが利用できればなお可。

 

ImageMagickについて

convert

convertコマンド、プラスオプションで大抵のことは実行可能。

identify

identify -verboseでファイル情報についてもexifなど含め取得可能。

 

 

X Settings

JPEG Identify

JPEG Optimize

PNG Identify

PNG (GIF) Optimize

Code from Google PageSpeed Insights

$ identify -verbose sample.jpg 
Image: sample.jpg
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Class: DirectClass
  Geometry: 2280x800+0+0
  Resolution: 72x72
  Print size: 31.6667x11.1111
  Units: Undefined
  Type: TrueColor
  Endianess: Undefined
  Colorspace: RGB
  Depth: 8-bit
  Channel depth:
    red: 8-bit
    green: 8-bit
    blue: 8-bit
  Channel statistics:
    Red:
      min: 0 (0)
      max: 255 (1)
      mean: 221.298 (0.867834)
      standard deviation: 52.9303 (0.20757)
      kurtosis: 4.78749
      skewness: -2.29684
    Green:
      min: 0 (0)
      max: 255 (1)
      mean: 193.482 (0.758752)
      standard deviation: 72.1353 (0.282883)
      kurtosis: 0.28533
      skewness: -1.15721
    Blue:
      min: 0 (0)
      max: 255 (1)
      mean: 190.969 (0.748898)
      standard deviation: 74.2512 (0.291181)
      kurtosis: 0.0453654
      skewness: -1.05491
  Image statistics:
    Overall:
      min: 0 (0)
      max: 255 (1)
      mean: 201.916 (0.791828)
      standard deviation: 67.1276 (0.263246)
      kurtosis: 1.30868
      skewness: -1.48907
  Rendering intent: Undefined
  Interlace: None
  Background color: white
  Border color: rgb(223,223,223)
  Matte color: grey74
  Transparent color: black
  Compose: Over
  Page geometry: 2280x800+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: JPEG
  Quality: 94
  Orientation: Undefined
  Properties:
    date:create: 2018-04-08T18:13:10+09:00
    date:modify: 2018-04-08T18:13:10+09:00
    jpeg:colorspace: 2
    jpeg:sampling-factor: 1x1,1x1,1x1
    signature: ad1973d5b185e6a4bdca5e88b24183403c5344c5c9f174fec108c1274d7e28b2
    xmpMM:DerivedFrom: 
  Profiles:
    Profile-APP12: 15 bytes
    Profile-exif: 22 bytes
    Profile-xmp: 768 bytes
  Artifacts:
    verbose: true
  Tainted: False
  Filesize: 570KBB
  Number pixels: 1.824MB
  Pixels per second: 30.4MB
  User time: 0.050u
  Elapsed time: 0:01.060
  Version: ImageMagick 6.7.2-7 2017-03-22 Q16 http://www.imagemagick.org

// 以下(convert)を実行すると PageSpeed Insights でダウンロードできる圧縮ファイルと全く同じファイルサイズとなる。
// jpegtran のコマンドは実行しなくても PageSpeed Insights で圧縮推奨としてでない。
// jpegtran の -progressive はオプション(プログレッシブ化)

$command = '/usr/bin/convert ' . $upload_dir . $input_file . ' -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG ' . $upload_dir . $output_file1;
$escaped_command = escapeshellcmd($command);
system($escaped_command, $result);

$command = '/usr/bin/jpegtran -copy none -optimize -outfile ' . $upload_dir . $output_file2 . ' ' . $upload_dir . $output_file1;
// $command = '/usr/bin/jpegtran -copy none -optimize -progressive -outfile ' . $upload_dir . $output_file2 . ' ' . $upload_dir . $output_file1;
$escaped_command = escapeshellcmd($command);
system($escaped_command, $result);

$ identify -verbose sample.png 
Image: sample.png
  Format: PNG (Portable Network Graphics)
  Class: DirectClass
  Geometry: 2560x1000+0+0
  Resolution: 72x72
  Print size: 35.5556x13.8889
  Units: Undefined
  Type: TrueColorMatte
  Endianess: Undefined
  Colorspace: RGB
  Depth: 8-bit
  Channel depth:
    red: 8-bit
    green: 8-bit
    blue: 8-bit
    alpha: 1-bit
  Channel statistics:
    Red:
      min: 0 (0)
      max: 255 (1)
      mean: 228.967 (0.897908)
      standard deviation: 14.3842 (0.0564085)
      kurtosis: 32.7602
      skewness: -2.16698
    Green:
      min: 0 (0)
      max: 255 (1)
      mean: 41.3527 (0.162168)
      standard deviation: 82.1926 (0.322324)
      kurtosis: 1.88575
      skewness: 1.91589
    Blue:
      min: 0 (0)
      max: 255 (1)
      mean: 37.591 (0.147416)
      standard deviation: 77.7958 (0.305082)
      kurtosis: 2.81594
      skewness: 2.1098
    Alpha:
      min: 255 (1)
      max: 255 (1)
      mean: 255 (1)
      standard deviation: 0 (0)
      kurtosis: 0
      skewness: 0
  Image statistics:
    Overall:
      min: 0 (0)
      max: 255 (1)
      mean: 76.9776 (0.301873)
      standard deviation: 57.041 (0.22369)
      kurtosis: 16.7127
      skewness: 4.92549
  Rendering intent: Undefined
  Interlace: None
  Background color: white
  Border color: rgba(223,223,223,1)
  Matte color: grey74
  Transparent color: none
  Compose: Over
  Page geometry: 2560x1000+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: Zip
  Orientation: Undefined
  Properties:
    date:create: 2018-04-08T18:58:46+09:00
    date:modify: 2018-04-08T18:58:46+09:00
    PNG:IHDR.bit_depth       : 8
    PNG:IHDR.color_type      : 6
    PNG:IHDR.interlace_method: 0
    PNG:IHDR.width,height    : 2560, 1000
    signature: 8926c1e15be9250c5aed81e11d85c79744bbaabbf67f95a1a6fe6061161424ec
  Artifacts:
    verbose: true
  Tainted: False
  Filesize: 10.26MBB
  Number pixels: 2.56MB
  Pixels per second: 21.33MB
  User time: 0.110u
  Elapsed time: 0:01.119
  Version: ImageMagick 6.7.2-7 2017-03-22 Q16 http://www.imagemagick.org
// 以下を実行すると PageSpeed Insights でダウンロードできる圧縮ファイルに近いファイルサイズとなる。
// optipng のコマンドは実行しなくても PageSpeed Insights で圧縮推奨ファイルとしてでない。
// optipng の -o 2 はオプション(2はデフォルト)

$command = '/usr/bin/convert ' . $upload_dir . $input_file . ' -strip ' . $upload_dir . $output_file1;
$escaped_command = escapeshellcmd($command);
system($escaped_command, $result);

$command = '/usr/bin/optipng ' . $output_file1;
// $command = '/usr/bin/optipng -o 2 ' . $output_file1;
$escaped_command = escapeshellcmd($command);
system($escaped_command, $result);
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png