JストリームBlog

J-Stream Blog

2019.11.27

Webサイトの表示が遅い?新世代画像フォーマットの検討を!

Webサイトでよく使われる画像のファイル形式はJPEG/GIF/PNG/SVGなどの種類があり、それぞれの特徴を踏まえて利用することはWebサイトの管理者や制作者であればご存じでしょう。
昨今ではこれらの形式に加えて、次世代画像フォーマットと呼ばれる形式が登場していることはご存じでしょうか?存在は知っているけど詳しくは、、、という方に向けてそのメリットと課題と対策についてご紹介します。

【次世代画像フォーマット】
・JPEG 2000(.jpf)
・JPEG XR(.jxr)
・WebP(.webp)
主にこれらのフォーマットが次世代画像フォーマットと呼ばれています。Webサイトの画像をこれらの形式に対応することで以下のようなメリットがあります。

■次世代画像フォーマットのメリット①:Webページの表示高速化

Webサイトの画像を対応することで、画像のクオリティはそのままにファイルサイズを小さくすることができます。
形式にもよりますが、Google社が開発する「WebP(ウェッピー)」では20~30%小さくすることができるとしています。
ユーザーデバイスがパソコンからスマートフォン中心にシフトしていくなかで、サイト表示の遅延はユーザビリティを大きく損ねます。表示速度の高速化やデータ消費量の削減において、画像データのファイルサイズを抑えることは非常に重要な要素となってきます。

<WebP(ウェッピー)フォーマットについて>

WebPは米Google社が開発しているオープンな静止画フォーマットです。Webサイトのトラフィック量軽減と表示速度短縮を目的としているため、同一画像、同一画質のJPGと比較すると20~30%程度ファイルサイズを小さくすることができます。WebPを採用することによって、ひとつひとつの画像におけるファイルサイズの削減は数KBかもしれませんが、膨大な画像を扱うWebサイトでは大きな差となります。

参照元:https://developers.google.com/speed/webp/

■次世代画像フォーマットのメリット②:ストレージコストの抑制

サイト運営者は大量の画像ファイルによるサーバーストレージの容量増大について、頭を悩ませることも多いのではないでしょうか?
今や画像はWebサイトで当然のように使用され、様々な解像度のデバイスに対応するため同一画像でも複数用意されることも多く、サーバーストレージ容量を占める画像容量は日増しに増大しています。
画像ファイルの容量を減らすことは、サーバーストレージコストの抑制につながる点も見逃せない要素です。

■WebPのメリット3:PageSpeed Insightsのスコア向上(SEO効果)

メリット①と関連しますが、Google社で提供しているページの表示速度を定量評価できるPageSpeed Insightsでは、改善できる項目欄に「次世代フォーマットでの画像の配信」という項目が存在しています。
ページ表示速度を速めることでのスコアアップは、SEOの観点でも重要な要素となってきます。

■次世代画像フォーマット対応の課題

次世代画像フォーマットにはこういったメリットがある一方で使用に際しては課題があり、本記事を作成した時点(2019年11月)で主要ブラウザをすべてカバーできる形式がないという点です。

<各フォーマットの対応状況(2019年11月)>
・JPEG 2000

・JPEG XR

・WebP

WebPはsafariの対応がまだではあるものの、主要ブラウザであるChrome、Firefox、Edgeに対応しています。
世界的にはおよそ80%のユーザーがWebPを閲覧できるとされており、日本ではiPhoneのシェアが高いためかグローバルよりは少ないですが、50%のユーザーがすでに閲覧可能のようです。

参照元:https://caniuse.com/(2019年11月)

■画像変換対応サービスによる対応

最も普及しているWebPを採用したとしても、safari、IEへ対応の必要があるため複数の画像フォーマットを用意する必要があります。
すでに解像度違いのデバイスへの対応で同一画像のサイズ違いを展開されている場合もあるでしょうから、さらにパターンを増やすことは容易ではありません。

J-Streamが提供するCDNサービスの「CDNext」では、旧来の画像形式JPG、PNG、GIFといった画像フォーマットからWebPに変換することができるオプション(CDNext画像変換サービス)を備えています。
J-Stream CDNextではWebPへの対応だけでなく、1枚の画像をもとに画像の拡大縮小、切り抜き、合成などで各デバイスに最適化された画像を簡単に生成することもできます。

これらの機能は画像データを配置している既存ストレージをそのまま利用可能なので、画像データを既存のストレージやサーバーから移動する手間なく利用を開始できます。

増加の一途をたどる画像ファイルの増大問題に対する策として検討してはいかがでしょうか?

  • このエントリーをはてなブックマークに追加

関連サービス

関連記事

電話でのお問い合わせは

0120-65-8140

TEL03-5765-7000

(受付時間:平日9:30-18:30)

電話でのお問い合わせは
0120-65-8140