We Blog Weblog

WebP

Web

2022年9月15日

WebP(ウェッピー)

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「WebP」について調べました。

参考:デジタルマーケティングブログ|WebP(ウェッピー)とは?フォーマットの違いや作成方法をご紹介!

参考:Web Design Trends|そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説!

実はトップページが一番重かった

前回作ったローディングアニメーションをトップページにも設定してみたのですが、アニメーションが終わってもまだ画像の読み込みが終わりませんでした。

原因を調べてみたらハーバーブリッジの画像が1.78MBもあったせいでした。

画像はこちらです。

JPEG ハーバーブリッジ

やれやれだ.........ヘヴィすぎるぞ!

何とかしましょう。

WebPとは

WebP(ウェッピー)とは、Googleが開発した新世代の画像フォーマットです(拡張子は.webp)

2010年頃からあったみたいです。

JPEGと比較して25~34%、PNGと比較して26%、ファイルのサイズが軽くなるようです。

参考:Google Developers|An image format for the Web

画像のフォーマットは、

・JPEG→高圧縮・非可逆

・PNG→透過・可逆

・GIF→アニメーション

だいたいこんな感じだと思いますが、WebPは「高圧縮・可逆/非可逆・透過・アニメーション」と、いいとこどりのようです。

現在は対応するOS、ブラウザも増えてきているようです。macOSはBig Sur以降、iOSは14以降、Firefoxは65以降、Safariは14以降だと対応しています。IE?知らんな

WebPに変換

オンライン上でWebPに変換する方法がいくつかあるようです。

Google Chrome Labs|Squoosh
Syncer|WEBP変換ツール
サルワカ道具箱|PNG・JPEGをWebP画像に一括変換

サルワカ様のは50ファイルまで一括で変換できて、しかも元のファイル名+.webpにしてくれるのでかなり助かりました。


早速さっきのハーバーブリッジの画像をWebPに変換してみましょう。

WebP

全然違いがわかりませんね。

サイズは1.78MB→275KBまで軽くなりました。なんと85%カットです。すご。

ただ、ウェブサイトにおいては画像1枚あたり100KBを切るのが望ましいらしいので、まだまだ重いです。

WebPを実装

普通の画像と同じく<img>タグで設置するだけです。

<img src="img/Harbor_bridge.webp">

が、非対応の場合に代わりの画像を表示できるように<picture>タグを使って以下のように記述するのがよいそうです。

<picture>
  <source srcset="img/Harbor_bridge.webp" type="image/webp">
  <img src="img/Harbor_bridge.jpg">
</picture>

でもIEは<picture>タグも非対応らしいです(え~)

Picturefillポリフィルという、IEに<picture>タグを対応させる方法が一応あるようです。

CDNで読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>

WebPを背景画像にする

背景画像(background-image)の場合は<picture>タグが使えないので、Modernizr(モデナイザー)を使います。


Modernizrにアクセス→Add your detects


②Webpを選択→BUILD


③ Download→modernizr-custom.jsを</body>の上あたりに設置

<script src="js/modernizr-custom.js"></script>

これで、WebPに対応している場合はwebp、対応していない場合はno-webpというクラスが<html>に対して付与されるようになります。

あとはCSSでWebPとJPEG(またはPNG)を設定すれば完了です。

.webp .example {
  background-image: url(img/Harbor_bridge.webp);
}

.no-webp .example {
  background-image: url(img/Harbor_bridge.jpg);
}

参考:Qiita|【IE11・Safariにも対応】WebPをPictureタグとCSSで使う方法

参考:ジャム!|【CSS3】BackgroundプロパティでWebPを使う方法

まとめ

もう全部WebPでいいんじゃないかな。

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

トップページはちょっとだけ軽くなった気がします。ついでにブログ一覧ページも全部WebPにしました。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP