RIOTで画像を軽量化してページ読み込み速度を早くする設定方法
ホームページの表示速度を調べられるGoogle PageSpeed Insightsで当サイトの表示速度を調べてみたところ、改善点が色々と見つかりました。
指摘してくれる修正点の中には技術的に改善が難しそうなものも多いですが、その中でも最も手軽に修正可能な、画像を圧縮してデータサイズを大きく削減することを試みてみたいと思います。
画像のデータサイズを圧縮するために、RIOT - Radical Image Optimization Toolというソフトを用意しました。
RIOT - Radical Image Optimization Toolというソフトについて
RIOT - Radical Image Optimization Toolは、画像を軽量化できるフリーソフト。JPEG、PNG、GIF画像から余計な情報を削除したり圧縮したりすることで軽量化を図ります。
最大の特徴は、圧縮後の画像の画質とサイズを確認しながら設定をいじることが可能ということで、JPEGなど圧縮率がダイレクトに画質に反映されるような画像形式を圧縮するときでも、画質とサイズを確認しながら最適なところを簡単に探せます。
読み込んだJPEGをPNGに変換するなど、手軽なファイル形式変換ソフトとしても使えます。ただし画像は本来(?)のフォーマットを使用した方が結果的に軽くなりやすいみたいです。
RIOTのダウンロードとインストールについて
RIOTのダウンロードはRIOT Radical Image Optimization toolから。
Downloadボタンからダウンロードが可能です。英語なので少し戸惑うかもしれませんが、インストールでは特に難しいことはありません。
RIOTで軽量化するとどれくらい軽くなるのか
RIOTを使って当サイトのロゴ画像を試しに圧縮してみました。
たかが258×83ピクセルの画像で白と黒しか使ってない画像ですが、1560バイトから574バイトに減りました。半分以下です。これはすごい。
画質の劣化具合とサイズを見ながら設定をいじくれるというのは想像以上に便利で、これまで使ったことのある画像圧縮ソフトとは一線を画す使いやすさです。
ちなみに当記事の画像もRIOTで圧縮したPNG画像を使っているのですが、画質の劣化がほとんど分からないのにどれもこれもサイズが半分以下になっていて本当に効果抜群です。流石に過去の画像をすべて圧縮し直すのは辛すぎるのでやりませんが、早くやっておけば良かったというところです。
Blogger(Googleフォト)で高画質圧縮されたときのファイルサイズ
Google Bloggerの容量は実質無限という過去記事で触れましたが、Google Bloggerに画像をアップロードするとGoogleフォトの高画質圧縮と同じように画像を圧縮してくれる機能があります。
RIOTで圧縮した画像と前の画像では、Googleのシステムで圧縮された後のファイルサイズにはどのような違いが出るのか気になったので、JPEG画像とPNG画像で比べてみました。
JPEG画像で画像サイズを比べてみた
| Before | After | ||
 |
 |
||
| 21.8→19.47 | 9.79→15.48 |
JPEG画像はGoogleフォトの高画質圧縮にかけられた後、何故かファイルサイズが増えています。それでもRIOTで圧縮する前よりはファイルサイズよりは遥かに小さいですが、少し残念な結果に。
PNG画像で画像サイズを比べてみた
| Before | After | ||
 |
 |
||
| 162.78→162.69 | 33.53→49.62 |
こちらも少しファイルサイズが増えています。どうやらGoogleフォトで再圧縮されると逆にファイルサイズが増えてしまうみたいですね。RIOT圧縮前と比べると圧倒的にサイズが小さいのは同じですが、残念なのは否めません。それだけRIOTが優秀ということでしょう。
RIOTの設定と使い方
RIOTは英語のフリーソフトではありますが、かなり直感的に使えます。なので説明をわざわざ読む必要はありませんが、メモ的なものを含めて残しておきます。
上部バーの設定について
ここの部分の操作方法についてです。
Open…
圧縮したい画像ファイルをここから開けますが、ドラッグ＆ドロップでも開けるので個人的にはあまり使いません。
Save
圧縮した画像ファイルを保存するにはこのボタンを押します。
圧縮前と圧縮後の画像形式が同じだと、こんな英語メッセージがでます。
画像ファイルを圧縮後の奴で上書きするかどうかを聞かれているので、
圧縮前のファイルが必要無ければYesを選択しましょう。
Noを選択すると保存先を選択するエクスプローラーが起動します。
Paste
クリップボードの画像を直接貼り付けて、そのまま圧縮して保存するのが可能です。個人的にはかなりの神機能です。
ちなみにPrint Screenなどでデスクトップ全体をキャプチャしていた場合は、こんなアラートが表示されます。
「画像がでかいから、RIOTはこのサイズのファイルも扱うことはできるけど時間がかかっちゃうから、先にリサイズすることを推奨するよ」
といったことを言っています。
そのまま貼り付けたいならNOを、
先にリサイズしたいならYesを選択します。
リサイズ画面はこんな感じになります。
New sizeに数字を入力すると、その数字に画像が縮小されます。
Keep aspect ratioにチェックを入れると、縦幅と横幅の比率を維持します。意味が分からなければチェックを入れておきましょう。
Unitでは縮小するサイズをPixel(ドット)で入力するか、Percent(割合)で入力するかを選択します。個人的にはサイズが分かりやすいPixelでの指定が好みです。
Resampling filterは、どれくらい綺麗に圧縮するかを選択します。
圧縮率を上げれば上げるほどキレイに圧縮されますが、処理に時間がかかります。
画質を維持しつつ早く処理したいならCatmull-Rom、
画質最優先ならLanczos3を選べば良いと思います。
Batch
複数のファイルを一気に圧縮したり処理したいときに便利です。
ただしBatchをクリックしたときにこんなメッセージが出てくるように、Batchウィンドウを開くためには現在読み込んでいる画像をアンロード（読み込み解除）しなければなりません。
使い方は簡単で、
まずAdd images、またはドラッグ＆ドロップで処理したい画像を放り込みます。
Add all images from folderを選択すると、選択したフォルダ内の画像をすべて読み込みます。including subfolderを選択すると、選択したフォルダの下層にある画像まですべて読み込みます。
選択した画像を処理リストから外したい場合は、Remove selectedボタンでリストから削除できます。
Additional tasksを選択すると、特殊な処理を追加することが可能で、行われる処理は左側のサイドバーに表示されます。表示されている処理はすべて適用されるので不必要な処理は表示しないようにしましょう。
- Compress to size
圧縮後のファイルサイズを指定して、そのファイルサイズに見合った圧縮を自動で行ってくれます。低すぎる数字を設定すると圧縮後の画質が崩壊するので、上級者向けの設定です。 - Resize
圧縮後の画像の大きさを変えます。Keep aspect ratioを指定すると縦幅と横幅の比率を維持したままサイズ変更を行い、W(Width:横幅)かH(Height:縦幅)のどちらかに数字を入力するともう片方は自動で調整されます。 - Rotate
画像を回転します。Directionで回転する方向、Angleで角度を設定します。 - Flip
verticalで上下反転、horizontalで左右反転します。同時に選択はできないので、上下左右反転したい場合はRotateで180°回転を選択します。
設定が終わったら、Output folderで圧縮後のファイルの展開先を指定してStartを押すと自動的に圧縮されます。Batchでは上書き保存はできないので、元の画像ファイルを同じ場所を選択しないようにしましょう。
なおBatchで行われる圧縮方法は、Compress to sizeを指定しない限りは、通常ウィンドウ下部の圧縮設定をそのまま使用します。なのでBatchウィンドウを開く前にこちらの設定を終えておきましょう。
フォーマットの選択
「Manual Mode」「Auto, suggest format」などを選択可能です。
自分で設定を変更すると自動的にManual Modeになります。
Auto系の設定を選択すると、オススメの圧縮方法をsuggest(提案)してくれます。
「Auto, suggest format」「Auto, original format」を選択するとサイズが劇的に軽くなり、メタ情報が自動的にすべて削除されます。suggest formatはファイル形式も含めてオススメの圧縮方法を提案してくれて、original formatだと元のファイル形式のままでオススメの圧縮方法を提案してくれるのですが、PNGのときはあんまり良い圧縮方法を提案してくれない気がするのでAuto, suggest formatをオススメします。
JPEG画像には位置情報などが記録されていることがあり、その位置情報からうっかり写真の撮影場所がバレてしまうなんてこともありますが、どの設定を使用してもデフォルトでメタ情報はすべて削除する設定になっているのでそういうのが怖い方にも安心です。
ウィンドウ中部と下部の設定
（▲ウィンドウ上部で画像サイズを比較可能。便利！）
圧縮後の画質を設定したり、画像を拡大した状態で確認したり、回転させたりすることが可能です。画面中部の設定については、画像に書き込んだ文字で大体把握していただけると思います。
In-place compareは、ボタンを押し続けている間だけ左右の画像表示を入れ替えます。同じ位置に重ねて表示されることで、画質の劣化を見比べる作業がとても楽になります。
Compress to sizeは圧縮後のサイズを指定して処理する設定ですが、低い数字を入れすぎると画質が激しく劣化することになるので、妥当なファイルサイズが分かっている上級者向けの設定だと思います。SNSで使うアイコンなどファイルサイズの上限が決まってる際に便利な設定です。
JPEG Optionsについて
JPEGは画質のクオリティとサイズがほぼ比例します。
Quality：
バーをスライドさせることで、何％ほど圧縮するかを決定します。
数字が小さければ小さいほどファイルサイズが小さくなり画質が劣化します。
画像を比較してサイズを見ながらバーをスライドさせていきましょう。
80％程度でかなりサイズが軽くなります。
Chroma subsampling：
色の圧縮具合を設定します。
下の画像を見ていただけると大体イメージしていただけると思いますが、数字が大きいほどキレイに色が保存されます。
By Stevo-88 - Own work, Public Domain, https://commons.wikimedia.org/w/index.php?curid=10942363
Encording
あまり詳しいことは分かりませんが、Standard optimizedの方が処理が速く、Progressiveの方がサイズが小さくなるようです。
ヘルプを参照した限りではStandard optimizedはTis encoding modeというものらしく、Progressiveの半分程度のスピードで圧縮できるのがポイントのようです。
ファイルサイズを極限まで小さくするならProgressiveですが、好みかなと思います。
Metadata
EXIFなどのメタデータが画像に含まれている際は、下部にMetadataのタブが表示されます。ここではメタデータを削除するかしないかの設定が可能です。
デフォルトではすべてチェックが入っており、すべてのメタデータを削除する設定になっています。カメラや画像の詳しい知識を持っている玄人向けの設定項目なので、意味が分からなければすべてチェック入れたままにしておけば良いでしょう。
Image adjustments
ここは画像に特殊な効果をかけられるみたいです。
Grayscalにチェックを入れると白黒画像に、
Invertにチェックを入れると色調が反転したりするみたいです。
個人的にはあまり興味のない設定項目なので、あまり触っていません。
ガンマ補正とかよくわかんないですし！
Save values on exitは値を保存する項目で、Brightness、Contrast、Gammaの値を保存します。
PNG Optionsについて
PNGは圧縮するときに画質に影響するのは色の鮮やかさだけです。
（おそらく）
他の設定項目は、処理の速さと画像サイズのどちらを優先するかを設定しているということになると思います。
画質を最優先すると結構処理に時間がかかってストレスなので、私は結構速さを優先した設定にしています。それでも結構画像サイズは軽くなってくれるので…
なおJPEGと設定項目が被るMetadataの項目などは省略しています。
Color reductionとReduce color to
True Colorが最もキレイで重く、下に行くほど色が減り軽くなります。また、Reduce colors toの数字をいじることで細かく色の減色設定が可能です。
画質と軽さのバランスを考えるなら、Optimal 256 Colors PaletteでReduce colors toの数字を最大にするのが最適だと思います。
Compression
lowにすると処理は早くなりますが画像サイズは大きくなります。
maximumにすると処理は遅くなりますが画像サイズは小さくなります。
私は読み込むたびにローディングで待たされるのが嫌なのでlowを使っています。
Color quantization algorithmとExternal optimizers
なんか色々設定できるようですが、fastを設定すると処理が早くなって画像が重くなります。
圧縮方式を追加したりできるみたいですが、よく分かりません。処理速度と画像サイズの変化は目に見えて分かるので、適当に自分好みの設定をすれば良いと思います（投げやり）。
Mask
画像に含まれる透明情報を保持するかどうかの設定です。JPEG画像では透明情報を保持できないので、PNGとGIF以外では実質意味のない設定です。
Keep tansparencyにチェックを入れると、透明の部分を透明のまま処理します。
Thresholdはしきい値のことで、スライダーを右に動かせば動かすほどしっかり透明に、左に動かせば不透明になります。
Blend with solid backgroundは、透明の部分を別の色で差し替えます。
Set opaqueは透明な部分を不透明にします。
GIF Optionsについて
GIFの設定はPNGと被るところが多いです。そしてこれはGIFアニメなど動く画像を作りたいときによく使われる圧縮形式ですが、RIOTではGIFアニメを圧縮することはできません。なのでこの設定にお世話になることは無さそうなので何も触れずに終わろうと思います。
【Tools】＞【Options】について
Save setting on exit
変換終了時に設定を保存します。とりあえずチェックを入れておいていいでしょう。
Show captions for main toolbar buttons
ウィンドウ上部のボタンにキャプション（説明）を表示するか否かの設定です。
文字を非表示にしてクールにしたいならチェックを外しましょう。
Ask to resize on open images larger than xxx megapixels
ここで指定した数字より大きい画像ファイルを読み込んだ場合、リサイズするかどうかを聞くウィンドウを表示するかどうかです。
メガピクセルとかいう単位はかなり巨大なので、１のまんまでいいかなと思います。大きい画像を読み込むことが多くてリサイズしたくないならもっと大きい数字を入れましょう。
Zoom factor percent: xxx
ウィンドウでズームボタンを押したときに、何パーセント拡大するかを設定します。
細かくズームをしたいなら数字を小さく、一発でぐわっと拡大したいならもっと大きな数字を入れましょう。
個人的にはデフォルトの20が最適です。
Auto-rotate images according to camera info from EXIF profile
確かめたわけではありませんが、EXIF情報を参照して自動的に画像ファイルの傾きを矯正してくれる設定かと思われます。
Show dialog on Save (rather than requesting overwrite confirmation)
ファイルを保存するとき、同じ場所に同じ名前のファイルがあったときに上書きするかどうかを聞くウィンドウを表示するか否かの設定です。毎回上書きしたいときに。
PNGでCompressionをlowに設定したときに表示されるダイアログは非表示にできないのが少し不満です。
PNG Performanceの設定について
PNG圧縮時の設定を変更できます。
Remember high/maximum compression settingは、
最高品質で圧縮する設定を覚えておくという意味の設定ですが、もう１つの「Save "Always apply PNG Optimizer" state」もそうですが、ここの設定を変更することで具体的にどう挙動が変化したのかを確認することができていません。
常にPNGをある程度圧縮しつつ高画質をキープしたい場合、文面を読む限りでは両方チェックを入れておいて問題はないと思います。
RIOTで画像容量を節約してHPを軽くしよう
画像ファイルの重さについてはあまり気にしていませんでしたが、Google先生に重いよって怒られたことですし、軽くて損することは何も無いのでこれからは画像をなるべく軽量化していこうと思います。ただGoogleフォトで再圧縮されてサイズが増えたためか、Google PageSpeed Insightsには「もっと圧縮できるよ」って言われたままになってしまいました。
それはともかくとして、RIOTは本当に使いやすく、使っていて気持ちがいいソフトでした。ファイルサイズを軽減するサービスやソフトは多少他のも使ったことはありましたが、今まで使ったものの中ではピカイチです。是非お試しあれ。
