EagleLand

【翻訳】We should optimize images

Published at 2015-05-25

※この記事はMediumに投稿したWe should optimize imagesの日本語訳です。

Steve SoudersはHigh Performance Web Siteで、次のように述べています。

エンドユーザーへのレスポンスに費やされる時間の80-90%はフロントエンド において発生している。まずはフロントエンドを最適化することだ。

Webサイトのパフォーマンスの多くはフロントエンドに起因するものです。つまりWebサイトを速くするためには、フロントエンドを最適化しなければなりません。例えば、最適化には次のような要因があります。

中でもペイロードサイズの最小化は、最も実施しやすいものの1つです。ペイロードサイズの最小化には、HTML、CSS、そして画像のファイルサイズを削減します。中でも特に、画像データはネットワーク帯域の多くを占めます。そこで、画像を最適化するためのツールをいくつか紹介したいと思います。

これらはGUIアプリケーションなので、簡単に利用することができます。ここにPNGを圧縮したサンプルがあります。

未圧縮のPNG画像（71,834bytes）

これは圧縮されていないオリジナルの画像です。24bitのPNGで、位置情報・日付・時刻といった様々なメタ情報が含まれています。

ImageAlphaとImageOptimで圧縮したPNG画像 (28,369 bytes)

これはImageAlphaで8bitにダウンコンバートし、ImageOptimでメタ情報を削除するなどして最適化したPNGです。ほぼ劣化していないように見えます。

ImageOptimでメタ情報を削除したが劣化を伴う処理はされていないJPEG画像（213,171 bytes）

こちらはJPEGのサンプルです。メタ情報はImageOptimで削除済ですが、劣化を伴う減色処理はされていません。

JPEGminiで非可逆の減色処理をされたJPEG画像（71,874 bytes）

更にJPEGminiによって減色処理を施しています。劣化は目立ちませんが、ファイルサイズはオリジナルのおよそ34%程（66%も削減されています！）になっています。写真のような画像は非常に多くの色があるため、減色処理を行った後によく確認しなくてはならないでしょう。これは面倒な作業ですが、より良いことです。

私はコマンドラインのツールも欲しかったので、GruntとGulp用のモジュールを作りました。

これらを使ってPNG・JPEG・GIF・SVGを最適化することができます。インストール？もしGruntやGulpを使ったことがあればとても簡単です（きっと一度は使ったことがあるでしょう☺）。

# download them using npm
$ npm install —-save-dev grunt-image
$ npm install —-save-dev gulp-image

詳細な設定はGitHubのプロジェクトリポジトリを参照してください。

WebPも素晴らしいです。WebPはGoogleが開発する新しい画像フォーマットで、公式サイトで次にようにあります。

可逆圧縮のWebPはPNGと比較して、ファイルサイズが26%小さくなります。非可逆圧縮のWebPは同等画質のJPEGと比較して、ファイルサイズが25%-34%小さくなります。

WebPは、Chromeやその他のChrome Frameをバンドルしているブラウザがサポートしています。FirefoxとSafariはWebPをサポートしていません。しかし興味深いことに、SafariのWebKitを利用しているはずのiOSのChromeはWebPを表示することが可能です（おそらくChrome Frameを内包しているものと思われます）。

WebPは公式サイトから利用することができます。WebPに変換した画像をお見せしたいところですが、悲しいことにMediumではまだ使えないようです☹しかし、私が試した結果では、変換する前のPNGは 28,369 bytes でしたが、WebPに変換したところ 17,382 bytes になり劣化はありませんでした！

もし今まで画像の最適化について無関心だったのであれば、より良いWebパフォーマンスのために最適化を実施してください。最後に、画像についてもっと知るために参考になる記事を紹介します。

最後まで読んでくれて、どうもありがとうございます。

タイトルと URL をコピーしました