ブログで趣味でプログラミングからお料理まで呟いています。よろしくー。(^-^)/


先月  2022年 8月  来月

1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31



文字サイズ変更:
トップページ > デザインについて

●デザインについて●

2022-08-13 05:18:25

画像:WebP(ウェッピー)について



最近新しい画像形式を見かけましたので、記事を張り付けようと思います。


WebP(ウェッピー)とは、ウェブサイトのトラフィック量を削減し、表示高速化を目的として作られた新しい画像フォーマットです。ファイルの拡張子は「.webp」です。
実はWebPが開発されたのは2010年と、意外に古いのです。
対応ブラウザが少なかったため、なかなか普及しない状況がありました。
しかし、2018年にEdgeとFirefox、2020年にiOS 版Safariが次々とWebPに対応。




【参考】https://caniuse.com/webp

現在では、主要ブラウザにほぼ対応しており、「次世代画像フォーマット戦争」がついに終結したと言われるまでになっています。

WebPを導入するにあたっての、メリット・デメリットをそれぞれ解説します。

*メリット
Googleの公式文書(https://developers.google.com/speed/webp/)によれば、JPGより25~34%、PNGより26%も軽量化できると言われています。
ウェブサイトの表示速度が改善されますので、SEOにも効果が見込めます。
表示速度の遅さから、ウェブサイトの閲覧者がストレスを感じたり、ページを離脱したりということも抑止できますので、ユーザー体験の向上にも繋がります。

・アルファチャンネルが使える(透過できる)
アルファチャンネルを使えるというのは、PNGやGIFのように画像を透過できるということです。
ちなみに、PNGやGIFは「可逆圧縮」といって、圧縮率が低いというデメリットのある画像フォーマットです。そのかわり、透過できます。

一方、WebPは「可逆圧縮」だけでなく、「非可逆圧縮」にも対応しています。
「非可逆圧縮」とはJPGと同様の圧縮方法で、圧縮率が高いフォーマットなのですが、PNGやGIFのように透過も可能です。
つまり、透過できないというJPGのデメリットを補い、なおかつファイルサイズを小さくできるのです。
PNGは画質がきれいで透過もできて便利なので、つい多用してウェブサイトが重くなってしまった……という経験のある方も多いのではないでしょうか。
WebPを導入すれば、そんな問題も解決できるはずです。

・アニメーションも利用可能
WebPはGIF同様、アニメーションも作成できます。
GIFは色数が256色であることから画質が粗いというのが難点ですが、WebPはそうした制限なくきれいなアニメーションを作成することが可能です。


*デメリット
画像の変換に手間がかかる
画像変換には、WebP用の画像変換オンラインサービスやプラグインを利用したり、コマンドラインツールを用いたりする必要があります。
PhotoshopやIllustrator、XDといったアプリケーションにWebP書き出し機能は標準搭載されていないため(2021年6月現在)、いくらか手間がかかる部分は否めません。

具体的な変換方法は、のちほどご説明します。


・IE非対応
対応していないブラウザに対しては、WebPではなく、JPG、PNG、GIFといった画像フォーマットを設定する必要があります。
設定方法はのちほどご紹介します。

画像フォーマット圧縮方法透過アニメーション
WebP非可逆圧縮
可逆圧縮
JPG非可逆圧縮××
PNG可逆圧縮×
GIF可逆圧縮
※色数が256色のみ


*WebPの作成・変換方法
WebP画像の作成・変換にはいくつか方法がありますので、代表的なものを解説します。

・オンラインの変換アプリケーション
Squoosh(https://squoosh.app/
Google が無料で提供しているサービスです。

簡単にWebPに変換できます。圧縮率やリサイズなどの機能も搭載されています。
他にも様々なアプリケーションがありますが、操作がしやすいものをいくつかご紹介します。

SYNCER WEBP変換ツール(https://lab.syncer.jp/Tool/Webp-Converter/

サルカワ道具箱 画像をWebPに変換(https://saruwakakun.com/tools/png-jpeg-to-webp/

サルカワ道具箱のアプリは、複数画像の一括変換もできるため、とても便利です!
使いやすいツールを活用してみてくださいね。

・Photoshopプラグイン「WebPShop」

Photoshoの標準機能では、残念ながらWebP未対応です。
ですが、このプラグインを使えば、WebP画像を表示・作成できます。WebPShopは、Google公式のプラグインです。
https://developers.google.com/speed/webp/docs/webpshop


・コマンドラインツール「cwebp」
「cwebp」というGoogle公式のコマンドを使って、画像を変換できます。
コマンドラインに慣れていないと難易度が高い方法ではありますが、圧縮率や品質変更、リサイズ、切り抜き、複数画像の一括変換など、多くの機能が用意されています。
https://developers.google.com/speed/webp/download


*WebPの実装方法、HTML/CSSの記述
JavaScriptや.htaccessファイルで表示画像を振り分ける方法もありますが、ここでは「picture」タグを使用した対応策をご紹介します。

以下が、サンプルのHTMLです。
<picture> <source srcset=”../test.webp” type=”image/webp”> <img src=”../test. jpg “> </picture>

※「picture」タグは、1つ以上の「source」タグと、1つの「img」タグを子要素に含みます。

ブラウザは、「source」タグを上から順番に検討し、条件に該当した画像を表示します。
上記のソースを解説すると、
1.WebPに対応しているブラウザの場合、test.webpを表示
2.WebPに対応していないブラウザの場合、test.jpgを表示
となります。
ただし、ここで問題となるのは、そもそもIEが「picture」タグに対応していないことです。

これは、Picturefill.jsというポリフィルを使うことで解決できます。
ポリフィルとは、新しい機能が搭載されていない古いブラウザでも、その機能を使えるようにするための代替コードを指します。

<script src=”https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js”></script>

CDNで提供されており、ファイルを読み込むだけですので、簡単です。
公式サイト(https://scottjehl.github.io/picturefill/)からダウンロードしたファイルを設置することもできます。

これだけで、IEでも「picture」タグを使用できるようになります。

・CSSで画像を読み込む場合
JavaScriptで使用ブラウザを検出する方法があります。ここでは、「Modernizr」というJSプラグインをご紹介します。

https://modernizr.com/からダウンロードできます。
<script type=”text/javascript” src=”modernizr-custom.js”></script>

ダウンロードしたjsファイルを読み込んでください。

【WebP対応ブラウザの場合】
<html lang=”ja” class=”webp webp-alpha webp-animation webp-lossless”>


【WebP未対応ブラウザの場合】
<html lang=”ja” class=”no-webp”>


・CSSの記述例
タグに追加されたクラスを使って、CSSで画像の出し分けを行います。

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



*WordPressにおけるWebP導入
ワードプレスの場合、もっと簡単にWebPを導入できます。
プラグインを導入するだけで、自動で従来画像をWebPに変換し、ブラウザによる表示振り分けまで行ってくれます。
手間のかかる画像変換や、HTML・CSSの記述が不要ですので、非常に便利です。

WebP Converter for Media
WebP Express
EWWW Image Optimizer
この他にもWebPを手軽に導入できるプラグインがありますので、ぜひ活用してみてください。


*SEO対策への影響は
WebPはウェブサイトの高速表示に繋がることからSEO施策としても有効です。
Googleは「Core Web Vitals(コアウェブバイタル)」をランキング要因に組み込むことを発表しました。2021年6月中旬から徐々に導入される予定となっています。

Core Web Vitalとは、ウェブ上においてユーザー体験の向上を図るための考え方・取り組みであり、その指標としてウェブページの読み込み時間が含まれています。具体的には、ページを読み込んでから2.5秒より速く表示する必要があると言われています。

【参考】Web Vitals の概要: サイトの健全性を示す重要指標
https://developers-jp.googleblog.com/2020/05/web-vitals.html

SEOにおいて今後はこれまで以上に表示速度が重視されていきます。
WebP導入によるウェブサイト最適化は効果的な施策といえるでしょう。


*まとめ
以上のように、WebPには画質を損なわず、ファイルサイズを軽量化できるという優れたメリットがあります。
2021年6月中旬から徐々に導入される「Core Web Vitals」という観点からも、SEO施策として非常に有効です。
以前は対応ブラウザが少ないことから、導入がためらわれるところもありましたが、現在ではそうした問題もほとんど解消されています。

この機会にぜひWebP導入をおすすめします!


記事はここまで。
WebPお普及率は、正直な話未知数ですが、有用な画像フォーマットであると言えるでしょう。
知っていていいと思います。

出典「E-port,llc WebP(ウェッピー)とは? JPG、PNGとの違いや変換方法
Print Twitter(test) short URL いいね:22

back to the TOP


PR (i)

カタログ通販ベルーナ(Belluna)
QVCジャパン