ウェブ担当の嶋です。
シリーズ「画像容量を小さくする方法」、第3回までは画像の基礎知識、画像サイズ、フォーマットなどの話を進めてきました。
インターネット経由で画像をキレイに速く表示させるには、という観点で進めてきましたが、時にはECサイトの商品画像や細かい図表など「大きい画像サイズで見せたい」「原寸大で見せたい」ということもあると思います。
単純にページ内に大きい画像を埋め込むだけでは、画像1枚で大きなデータ転送が発生してしまい、ページの表示速度やレスポンスに影響を及ぼします。また、Page Speed InsightやGTmetrixなどの表示速度計測サイトでも評価が大きく下がってしまいます。
今回はいくつかのケースを想定し、対応を考えてみたいと思います。
その1：書類などのスキャン画像を掲載する場合はPNG8で
プレスリリースなど元々のデータが紙ベースのものだったり、PDFだったりするものを大きめの画像として掲載したい、というケースを考えてみましょう。
まず書類では「白地に黒テキスト」が主体になるかと思います。このような画像をJPEGで用意すると文字の周りにモヤモヤとしたノイズが載りやすくなりますのでPNGで掲載するようにしましょう。また、PNGで掲載する場合も減色処理を行ってなるべく画像容量が小さくなるようにしましょう。
だいたい同じ容量になるよう調整した画像のサンプル。左がJPEG、右がPNG。
また、PNG8は256色、という印象があるかもしれませんがあくまで最大色数が256ですのでテキストのみであれば8色とか16色まで減色して更に画像容量を小さくすることが可能です。
フォーマット上は「2色（白黒2値）」も設定できますが、文字の縁が滑らかでなくなってしまうので避けたほうがいいでしょう。
減色した際に書類中の画像の劣化が気になる場合は、文章中のテキスト部分と画像部分とを別々の画像にして「文章（PNG）＋画像（JPG）」の形で配置する、という方法もあります。
テキスト部分はPNG8で、画像の部分だけJPEGにする
その2：「クリックして拡大」をうまく活用する
ECサイト・ショッピングサイトを見ていると「小さめのサムネイル画像をクリックすると拡大画像が表示される」という仕組みをよく目にします。
いわゆる「クリックして拡大」です。
このユーザーインターフェースはかなり前から色々なサイトで使われていて認知度が高く、操作がわかりやすいということもありますが、ページ表示速度の面から見ても大きなメリットがあります。
拡大用の画像はページ内に「表示させる画像」として埋め込まれておらず、クリックした際に改めて「読み込んでから表示する画像」という形になっています。ページの表示時には画像容量の小さいサムネイル画像を使い、ユーザーがクリックした時にその画像だけを改めて読み込む、という形にすることで、ページにアクセスした際の表示速度の向上を図っているわけです。
「クリックで拡大」はページに実装する場合はColorboxやfuncyboxなどのJavascriptを埋め込んで利用するのが一般的ですが、ブラウザの機能だけを使っても実装が可能です。
下の2つの画像は左にcolorboxでのポップアップを仕込んでいます。クリックするとページ内にモーダルウィンドウが開き、画像が読み込まれます。右の画像はクリックすると別ウィンドウ（別タブ）が開き、そこに画像が読み込まれます。後者はHTMLを書く時に一工夫するだけなので比較的楽に実装できます。
Colorboxで拡大表示
別タブで拡大表示
CMS環境であれば、サムネイルは手作業で作成するのではなく弊社のSmartJPEGなどのようなソリューションを組み合わせるのが理想です。「大きい画像をアップロードしたら自動的にサムネイルサイズの画像が生成される」という仕組みを作ってしまえば、リサイズの手間が全くなくなります。
その3：表示されていない部分の画像を後から読み込む
もう一つの方法は最近になってブラウザに実装されるようになった遅延読み込み機能を利用することです。この遅延読み込みは「lazyload」と呼ばれます。
lazyloadはページの下の方にある画像の読み込みを後回しにし、スクロール量に応じて徐々に読み込みを行っていくという仕組みです。余計なデータを最初に読み込まなくて済むので、最初のページビューまでの時間を短縮することが可能です。
設定方法はシンプルで、画像表示の<img>タグに「loading=”lazy”」というパラメータを追加するだけです。また、このブログでも利用しているWordpressでは自動で「loading=”lazy”」を追加してくれるようになっています。（Ver.5.5以降で対応）
<img src="foo.jpg" loading="lazy" width="200" height="100" alt="" />
画像の他にもiframeに指定することもできるので、YouTube動画の埋め込みなども遅延させることができます。
注意点として、この記事の公開時点でSafariが未対応という事が挙げられます。「画像が表示されない」という事態にはなりませんが、loading=”lazy”を指定しても遅延読み込みされないため、GitHubで公開されているJavascriptを自前で組み込んでやる必要があります。
また、width属性とheight属性を指定してやらないと、後から読み込まれた画像が何もなかったところにいきなり挿入され、その分他のコンテンツがガタガタと下の方に移動していってしまいます。指定してやればその分余白が確保された状態でコンテンツが配置され、画像が読み込まれると余白を埋めるように画像が表示されるので、表示がガタガタになることはありません。
画像の遅延読み込みでガタガタとコンテンツの表示が崩れるのはCLS（Cumulative Layout Shift）と呼ばれるコアウェブバイタルの指標に影響を与えます。Google PageSpeed Insightでもこの数値の確認ができます。
右下がCLS
今の所コアウェブバイタルの指標が低くても検索順位への影響はありませんが、CLSの指標が悪いということは「タップしようとしたボタンの表示位置がいきなりずれた」などユーザービリティを著しく悪くすることになるので念頭に置いてウェブページを作成する必要があるでしょう。
