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