サイトの軽量化：画像

2019.07.23

この記事は約18分で読めます。

記事の内容に行く前に、この記事を読む時間の表示について先にお知らせです。記事の最初に「この記事は約xx分で読めます。」と出てきますが、この記事では約18分と出る！（汗）
自動計測による分数表示なのですが、実際そこまでかかりません。記事内に出てくる画像エンコード文字によるのではないかと考えられます。10分未満かなと思います。ご了承ください。

先日書いたサイトの軽量化：Webフォントに続き、今度は画像による軽量化を考えます。Test My Siteによる指摘の中で主に画像に関するのは★印の部分です。ただ後にも書きますが全ての対策を行うことは今回しません。理由も併記します。

ウェブフォントの読み込み中もテキストを表示する（解決済み）
次世代フォーマットで画像を配信する★
CSSを軽量化する
レンダリングを妨げるリソースを削除する
適切なサイズの画像を用意する★
テキストの圧縮を有効にする
不要なCSSを削除する
画像を効率的にエンコードする★
ネットワークペイロードを過度に大きくしない
合理的なキャッシュポリシーで静的アセットを配信する★

次世代フォーマットで画像を配信する

先に書きますがこの対策は今回行っていません。後に詳細を書きますがブラウザがまだ対応しきれていないフォーマットだからです。ブラウザによって表示されたりされなかったりを考えてあれこれ今触るのは無駄というか「修正が今じゃない」かなと思います。ブラウザもどんどん進化していくので今後を見守りたいと思います。詳細を知らなくてよい場合は次の適切なサイズの画像を用意するへお進みください。

まず「次世代フォーマット」って何？と思いますよね。Test My Siteの説明にはこうあります。

JPEG 2000、JPEG XR、WebP で画像をエンコードすると、読み込み時間が短くなり、モバイル通信のデータ量も少なくすることができます。フォールバック用に PNG 画像や JPEG 画像も用意し、未対応ブラウザにはそちらを配信するようにしましょう。

JPEG 2000、JPEG XR、WebPはあまり馴染みないかもしれませんが、フォーマットと呼ばれる種類です。PNGやJPEGをこれらのフォーマットに変換するとより軽量化を図れるというものです。試しにこの記事でサンプルを置いてみます。

元画像JPEG

サンプルに使用したのはこの画像です。640×480ピクセルで25.6KB。

JPEG2000

左の画像が見えるならば、JPEG2000に対応したブラウザです。見えない場合はテキストで「見えない場合のテキストです」と表示されます。同サイズで73.7KB。元々のJPEGをJPEG JP2 変換。Convertioで変更してみました。なぜか容量は大きくなりました…。

左の画像が見えるならば、JPEG2000に対応したブラウザです。見えない場合はテキストで「見えない場合のテキストです」と表示されます。同サイズで44.8KB。今度はPhotoshopからJPEGを開いてJPEG2000として保存しました。さっきのコンバーターよりは軽いようですが、元画像よりは容量大きい…。

JPEG XR

残念。Photoshopにプラグインを入れXRに保存しなおしたら0バイト…。なのでオンラインで挑戦。試したのはaconvert.com

左の画像が見えるならば、JPEG XRに対応したブラウザです。見えない場合はテキストで「見えない場合のテキストです」と表示されます。同サイズで119KB。これもなぜか容量は大きくなりました…。

WebP

これもオンラインで変換を行いました。WEBP変換ツール (jpg、pngとwebpを相互変換)

左の画像が見えるならば、webPに対応したブラウザです。見えない場合はテキストで「見えない場合のテキストです」と表示されます。同サイズで10KB。これは軽くなりましたね！

例を挙げて見てきましたが先にも書いたこの対策をしなかった理由、それはブラウザ対応がまだ完全でないところにあります。Googleの提案は常に先を進み後から他がついて行ってるような印象を受けます。2018年12月現在のブラウザ対応表を分かりやすく記載されている方がいらっしゃいますのでリンクを貼ります。

主要ブラウザごとのJPEG2000 / JPG XR / WebP画像対応状況

フォーマットによってばらつきがありますよね。この不安定さだとスピード重視のためにいくつも画像を用意しないといけないし、画像枚数によってはサーバ容量を圧迫すると思います。もちろんJPEGでもPNGでも枚数や容量で圧迫するのですが、今のタイミングで無理やり軽さを求めず、もう少し様子見しようというわけです。

適切なサイズの画像を用意する

一番分かりやすくできそうなところです。縦横サイズという意味合いもありますが、目に見えて大きい小さいが分かるものだけでなく、容量のほうが色々と調整が必要です。
ちなみに先に言いますが、Google PageSpeed Insightsに従って画像を最適化すると粗い画像になることがあります。
※今はリンクがないのかサービスが変わったのか分からないのですが、かなり前に指示に沿ってページ内リンクからやってみたら、ひどい画像になるものもありました（汗）
なので荒れない程度に容量を落とすことが必要になります。

今回このサイトでもサイズと容量をいくつか落としました。全部書くと大変な数なので代表例としてTOPのメインイメージは容量を1/4ほどにしています。

TinyPNG：pngの最適化におススメ

画像最適化で検索するとよく出てくるお馴染みのサイト。パンダが目印です。

https://tinypng.com/

特にpng画像が荒くなりすぎず最適化できますね。

Optimizilla：日本語対応＆サンプル画像表示ありでオススメ

今度はワニが目印です。アニマルキャラ多いな～ｗ

https://imagecompressor.com/ja/

画質を確認しながら調整できるのがいいですね。

I love IMG：gif画像の圧縮もできる

うって変わってシンプルなサイトです。ほかにもツールがあるので便利ですよ。

https://www.iloveimg.com/ja/compress-image

こちらも日本語で分かりやすい。

画像を効率的にエンコードする

「画像を効率的にエンコードする」とは？にも、Test My Siteの説明があります。

帯域幅の取り合いが少ないほど、ブラウザがコンテンツをダウンロードして画面に表示するまでの時間も短くなります。画像を最適化することで、ウェブサイトのパフォーマンスが向上します。

先に書きますがこの対策も今回行っていません。エンコードすることでサーバへのリクエストの負担を減らせることは分かるのですが、意外に手間もかかるためです。
ちなみにこの記事のアイキャッチ（タイトルの背景画像）をエンコードすると以下になります。
※エンコードすると容量としては増えます。なので大きい画像はフリーズしちゃいますので、100×75ピクセルと小さくしてやってみます。

変換に使用したのはオンラインツールBase64エンコーダーです。

data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAyAAD/4QMvaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0NSA3OS4xNjM0OTksIDIwMTgvMDgvMTMtMTY6NDA6MjIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4OTJCMEEyQUFEMkUxMUU5QTBDMDhDQkEwQjc5ODI3RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4OTJCMEEyQkFEMkUxMUU5QTBDMDhDQkEwQjc5ODI3RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg5MkIwQTI4QUQyRTExRTlBMEMwOENCQTBCNzk4MjdFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg5MkIwQTI5QUQyRTExRTlBMEMwOENCQTBCNzk4MjdFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQACAYGBgYGCAYGCAwIBwgM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

文字列でも画像が表示できるというサンプルです。元の画像が4.24KB、エンコードすると5.67KBになります。容量よりもリクエストを減らすというのが目的なのですね。

詳細を分かりやすく書かれている方がいらっしゃいますのでリンクを貼ります。

身につけておきたいWebサイト高速化テクニック #5｜リクエスト数削減テクニック01：インラインイメージ編

合理的なキャッシュポリシーで静的アセットを配信する

「合理的なキャッシュポリシーで静的アセットを配信する」え？え？って？　Test My Siteの説明があります。

HTTP キャッシュを使用すると、ユーザーが再度訪れた際のページの読み込み時間を短縮できます。再訪時にページを迅速に表示できるよう、キャッシュの有効期間を長くしておきましょう。

…キャッシュ時間の設定ですね。基本は.htaccessに記述でいいと思います。
これも詳しく記載されている方がいらっしゃいますのでリンクを貼ります。

.htaccessファイルのブラウザキャッシュ設定方法！最適化してページを高速表示させる

私もいくつか参考にして、下記のように記述しました。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"  
ExpiresByType image/jpeg "access plus 1 months" 
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/svg+xml "access plus 1 months" 
ExpiresByType image/x-icon "access plus 6 months" 
ExpiresByType text/css "access plus 1 months" 
ExpiresByType text/javascript "access plus 1 months" 
ExpiresByType application/javascript "access plus 1 months" 
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-font-woff "access plus 1 months"
</IfModule>

修正後、再度Test My siteで確認

対策していないもの＋対策の一部を行っていない（画像の圧縮も見栄えの関係で限界があるから）ので、Googleからの指摘は消えませんがPageSpeed Insightsでは少々改善されました。

補足：軽くすることは大事だけれど

ここまで書いておいていうのもなんですが…

Test My Siteでの指摘やPageSpeed Insightsでの改善はとても大事！だけれど…
パーフェクトを目指す＝閲覧者にとって最善だとは言えない

と思うのです。

少し脱線しますが、昔務めていた会社で駆け出しの頃、HTMLの記述をW3Cでパーフェクト目指せと言われてきたのですが、そこで小さい事件がありました。まだXHTMLだった頃のことで、metaタグにreply-toでメールアドレスを書き、このサイトへの連絡先として書くという頃がありました（今でも記述は問題ないのかな、使用していないので知らないのですが）。結論言えば書かなくても減点にはならないので個人的に採用していませんでした。しかし人によっては指摘無しを目指したためにメールアドレス書いちゃって、結果スパムメールが来るようになった…という話もあるほどです。

つまり最善のサイトにするために必要なことだけれど、最終目的が何であるのかを見失わないようにしないといけないので、ある程度は検討も必要だと思います。ソースを美しくするのもサイトを軽量化するのもナチュラルなSEOや閲覧される方の満足度へのためなのですから。
サイトを軽量化したいと思う方のお役に立つ記事になっていれば幸いです。

によ