画像圧縮
2018.04.08PageSpeed 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