[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

WebPってなに?Googleが作った新しい画像フォーマットは、軽くてアルファチャンネルもサポート!表示高速化するなら検討してみよう!

Webで利用できる画像の種類はいくつかあります。Webで使えるというと、端的にいうとWebブラウザで表示できるかどうか、ということになるかと思います。

(2018年11月追記) このブログと弊社アイデアマンズのコーポレートサイトでも、試験的にWebPを導入したところ画像ファイルサイズが-62.38%も軽量化されました。

WebPは、軽くてキレイでアルファチャンネルをサポートする新しい画像フォーマット

2018-04-12-ogp.jpg

WebPの開発は、Googleが行なっています。まずは、WikiPediaをみてみましょう。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIFPNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。ただし、競合各社の思惑もあってブラウザでの採用が進んでいないため、ウエブサイトでも採用が進んでいない。

もっとも特徴的なのは、非可逆圧縮でもアルファチャンネルを扱えることでしょう。これができるということは、GIFやPNGのように透過した画像を作ってもWebPで書き出せるということになります。JPGの欠点を補うことができます。

問題はサポートブラウザ、スマホ全盛のいま、InternetExplorerをどう考えるか

JPGと違い、サポートブラウザの種類が少ないのが現状です。そのため、導入する場合は、非対象ブラウザに対するアプローチを考える必要が出てきます。そのため、WebPの導入には以下の判断を求められます。

  1. ユーザーエージェントを判定して、WebP以外の画像を表示する
  2. 非対象ブラウザは切り捨てる

サポートブラウザは、まだまだ少ないのが現状です。

Webmasters interested in improving site performance can easily create optimized WebP alternatives for their current images, and serve them on a targeted basis to browsers that support WebP.

  • WebP lossy support
    • Google Chrome (desktop) 17+
    • Google Chrome for Android version 25+
    • Opera 11.10+
    • Native web browser, Android 4.0+ (ICS)
  • WebP lossy, lossless & alpha support
    • Google Chrome (desktop) 23+
    • Google Chrome for Android version 25+
    • Opera 12.10+
    • Native web browser, Android 4.2+ (JB-MR1)
    • Pale Moon 26+
  • WebP Animation support
    • Google Chrome (desktop and Android) 32+
    • Opera 19+

MicrosoftのInternetExplorerやEdgeは入っていません (Edgeはバージョン18から対応予定)。Firefoxも見当たりません (Firefoxはバージョン65から対応予定)。Chromeについても、iPhone版ではサポートされていません。Googleの領域にあるデバイスはサポートされていますね。現状では、このサポートブラウザの少なさがデメリットです。

どうやってWebP画像をつくるの?

Photoshopで作る

Webデザイナーの方は、コマンドラインよりもPhotoshopの方が利用頻度は高いと思います(最近ではgulpなどでコマンドラインを扱う人もかなり増えてきました)。PhotoshopでWebPを書き出すには、プラグインをインストールすれば可能です。利用は自己責任でお願いします。

なんと、MacのPhotoshopであればCS2から対応しているっぽいです!

cwebpコマンドで作る

コマンドラインからも作成できます。WebPはHomebrewを使うと、すぐにインストールすることができます。コマンド例はこんな感じです。

$ cwebp [options] -q quality input.png -o output.webp

以前コチラの記事にもWebPの使い方を書いているので、参考まで。

今の制作フローにどうやって取り込むのか?

現在運用しているサイトに取り込むのには、検討すべき事項が多くあります。開発が必要になるケースもあるでしょう。最もかんたんなのは、Googleが用意している mod_pagespeed を利用することです。このモジュールを入れることで、開発は不要になり、画像の作成も今まで通りで良くなります。

画像作成の枚数が増えればその分負荷は増えます。UA判定をいれればずっとブラウザのアップデートに追随する必要が出てきます。mod_pagespeedは、Apacheもnginxも出ているので、これらのウェブサーバであれば、導入が可能です。CDNが入っている場合は、master側に入れておいてmod_pagespeedが生成したファイルもCDNに乗せてしまえば問題ないでしょう。

WebP入れるのが難しい場合、どうすればいい?

どうしても入れられないケースももちろん存在するはずです。WebPの導入を考えるケースは、画像を軽くしたいというケースです。であれば、既存のJPGやPNGを軽くすることが有効です。

PNGは重い。透過していなければ、JPGやPNG-8を使おう

基本的に、PNGはJPGよりも重くなる傾向があります。

ただし、色数が少ない場合は、PNGの方が軽いです。そのため、ロゴやなにかしらの図版などは、PNGやGIFが良いでしょう。PNGにはPNG-8とPNG-24があります(PNG-32もあります)。それぞれ扱える色数が異なるので、GIFと同じPNG-8は軽いです。約1678色扱うことができるPNG-24はどうしても重いデータになります。

まずは、以下を確認しましょう。

  1. PNG画像のうち、明らかに重いデータが存在しないかどうか(約1MB以上あれば、それはウェブページの表示としては相当重い)
  2. JPGファイルがどのくらいあり、容量がどのくらいあるか

ウェブページで利用されているJPGファイルの数や容量は、無料のLightFileシミュレータをご利用ください。かんたんに調べることができます。

LightFileは開発不要なので、導入もかんたん!作業フローもかわりません!

WebPの導入は、mod_pagespeedをいれるとかんたんです。しかし、それも難しい場合もあります。そんな時は、弊社の画像最適化ツールLightFileを検討してみてください。LightFileシミュレータで出た結果と同じだけの画像最適化が行なえます。開発不要ですし、自動処理なので気にすることはもうなにもありません。

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。

最後に

いかがでしたでしょうか?WebPは本当に優れた画像フォーマットですが、まだ導入の障壁を高いかもしれません。Firefox陣営がJPGと比べてもそんなに変わらないとコメントしているのも気になります(ただ、JPGはアルファチャンネルを扱えない)。何事もチャレンジしてみて、良ければ採用するようにしましょう。まずは挑戦!

画像軽量化のLightFileでどのぐらい効果が出るのか興味のある方は、こちらのフォームからリクエストいただければ処理結果をレポートいたします!無料で利用できますので、お気軽に!

リクエストはこちらから

前へ前へ

月刊アイデアマンズブログ 2018年3月の人気ブログ記事は?画像最適化がチェックできる無料のLightFileシミュレータがテスト公開中!

次へ次へ

高画質な4K・8K時代に備えて、画像のファイルサイズを知っておこう!TVの進化はオリンピックとともに。