【脱初心者】新世代のWEB制作には.webpが有能すぎて必須という話

どうして…

どうして今まで無視していたの…ウェッピー…

WebPを今まで使っていなかったアナタ、今日から大好きになること間違いなしです。

新世代の画像フォーマットWebPが有能すぎる

こんにちは、ワタルです。

WEB制作に携わっていると、「xxx.webp」という画像を見たことがあるかと思います。

新世代の画像フォーマット「WebP」。読み方は「ウェッピー」です。

2010年にGoogleが公表した静止画のフォーマットで、拡張子は「.webp」。

軽い・透過・動くの超人フォーマットです。(Wiki情報)

jpgよりも軽く、pngと同じ透過OK、gifと同じアニメーションを再現可能。

コレを知っただけで使いたくなっちゃいますね。

お恥ずかしながらワタクシ、「よく分からん」状態で放置していたんです。

あんまり見かけないし、編集ソフトとかで読み込めないし、クソ拡張子だと勝手に思い込んでいました。

本当にごめんなさい。

なぜ使用に至ったのか

先日、サイトの表示速度をチェックするサービス Page Speed Insights (Google提供)でしらこデザインスタジオのHPをチェックしたところ、スマホの表示がまあ評価の低いこと。

制作した時はリリース優先で、画像最適化まで本気を出していなかった…

自分の制作物となると、後回しも後回し。

SEOにもこだわらず。

WEB制作やWEBマーケティングの仕事をしている立場として、これはいけません。

ということで、余裕のある日にページの改善に取り組みました。

そこで一番大きく降りかかったのは「画像ファイルが大きすぎる」という問題です。

写真の一番上に、「新世代のフォーマットで画像の容量を抑えろ」と書いています。

Googleが指す新世代のフォーマットとは、WebPやAVIFのことを指しています。

AVIFという新しい単語が出てきましたが、これは現在(2022年7月)ChromeとFirefoxにのみブラウザ対応しており、WEBサイトに実用化するには少し時代が追いついていません。なので今回は割愛します。

webPよりもポテンシャルが高い子なので、今後新情報があれば更新していきます。

とにかく、ここでwebPを使うことを決めました。

具体的な使用方法と注意点

では、具体的にどう使用するのかについて解説していきます。

方法はカンタンで、

1.画像を.webpに変換
2.imgタグからpictureタグにhtmlを書き換える

この2点で完了です。

まず1から見ていきましょう。

画像を.webpに変換

Googleが開発したサービスの中に、「Squoosh」という画像変換ツールがあります。

参考：Squoosh

容量を小さくしたい画像を読み込ませると、

こんな感じで画面が表示されます。

真ん中の線は、左がBefore・右がAfterで、マウスの操作で位置を動かすことができます。

右下の枠から、サイズ・拡張子・解像度などを操作し、ビフォーアフターを実際に見ながら感覚的に調節することができます。

pngからwebpへの変換をしているのですが、25%の圧縮率でこんな感じ。

見た目にほとんど差はありません。

アップにしてみると線がボケているのがわかります。

同画質で比較した場合、pngだと26%、jpgでは25〜34％ほど容量を抑えてくれます。

これはスゴイ！

imgタグからpictureタグにhtmlを書き換える

Squooshにて.webpの画像を書き出したら、次はhtmlの書き換えです。

WebPは、通常のimgタグでは出力されません。

代わりにpictureタグを使用します。

<source>タグの後に記述している<img>タグは、WebPを読み込めないブラウザで表示する用で入れていたのですが、唯一WebPが読み込めなかったIEが2022年6月15日をもってサポートを終了しています。

注意点は、現在もMac osにおいてはBig Sur以降、iOSは14以降のSafariでないと対応していませんので、imgタグにjpgやpngの元画像を入れるのを忘れないようにしましょう。

とにかくこれで完了です。

WebPを使用するメリット

もうお分かりいただいたかと思いますが、具体的なメリットをまとめましたので、ご覧ください。

可逆圧縮と、非可逆圧縮のどちらにも対応

知らないと驚くのですが、jpgなどの画像は、小さく保存…その後大きくして保存…みたいな事を繰り返すと劣化します。

元のサイズに戻したはずなのに画像がボケている！という経験はありませんか？

それは、画像が非可逆圧縮だからです。

何回潰しても完全に元の形に戻るスポンジは可逆圧縮、

一回潰したら元に戻してもシワのままの段ボール箱は非可逆圧縮

みたいに思っておけばOKでしょう。

jpgは非可逆圧縮、png、gifは可逆圧縮です。

.webpはこれらの両方に対応しています。

アニメーションにも対応

個人的には一番コレが恩恵を受けられるのかな？と思います。

gifを多用するサイトは現在あまり見かけませんが、それでも要所要所で使いますよね。

アニメーションの容量は少しでも減らしたいところなので、非常にありがたいです。

同画質で25%以上の容量カット

pngだと26%、jpgでは25〜34％ほど容量を抑えてくれます。

WEBサイトにおける軽量化は最重要事項の1つです。

一番容量を使う画像ファイルが25％軽減されるなんて最高ですね！

SEOにも好影響

軽量化によりサイトの表示速度が上がるので、SEOに良い効果が期待できます。

Googleが「使え」と言っているので、大人しく従うのが吉ですね。

WebPを使用するデメリット

最強超人フォーマットですが、やはりデメリットも存在します。

まだまだ汎用性が低い

公開されてまだ10年くらいしか経っていないので、WEBサイト以外の場所では活躍できない場合があります。

しかし、ことWEBサイトにおいては、一部を除きほぼ全てのブラウザでサポートされているので、使わない手はないでしょう。

背景画像への指定に手間がかかる

imgタグを使用しないので、background-image: url(./img.jpg);のような仕手ができません。

JSのライブラリを使用してcssでwebpを読み込ませます。詳しくはコチラ。

背景画像にWebPを使う方法

まとめ

サイトを軽くしたい、SEO対策でできる事をしたい、など、WEBサイトにおいてはたくさんの恩恵を与えてくれる新世代フォーマット、名前も可愛いWebP(ウェッピー)。

こういった新世代フォーマットがこの先もっと汎用性が上がり、jpgやpngがなくなる未来…

なんていうのも、そう遠くないかもしれませんね！

WEBサイトの軽量化は最重要事項の一つですので、まだ対策をされていない方は是非、この機会に試してみてください！

それでは、また。

（良い声）