1. TOP
  2. >WEB関係その他>
  3. 画像をWebPに変換してWEBサイトの表示測度を改善しましょう

画像をWebPに変換してWEBサイトの表示測度を改善しましょう

WEB関係その他, WEB関係

2022/07/11
画像をWebPに変換してWEBサイトの表示測度を改善しましょう

この記事は【2022年7月11日】が最後の更新のため、記事の内容が古い可能性があります。

WebP (ウェッピー)は、トラフィック量軽減と表示速度短縮を目的としてGoogleが開発した次世代画像フォーマット(2010年に仕様公表・提供開始)のことで拡張子は「webp」。
JPEG以上の圧縮率に加え、PNGと同様に透過も可能。GIFのようなアニメーションにも対応しています。

IEのサポートが2022年6月に終了し、WebPはほぼすべての環境で対応可能になったのでWebPを使用するメリットなどをご紹介していきたいと思いますが、まだ非対応ブラウザもありその際の対処方法も合わせてご紹介します。

WebP移行のメリット

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。
Wikipediaより

WebP変換ツール

JPEGやPNGなどからWebPに変換するには、以下のWebサービスがオススメです。

Squoosh


Syncer

WebP非対応ブラウザへの対処

2022年現在、世界で90%以上のブラウザで対応しているWebP。気にしないで使用しても問題はありませんが、以下のようにして非対応ブラウザで閲覧時には代替画像を切り替えることが可能です。

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">
</picture>

<picture>タグはIEでサポートされていませんが、下記CDNを読み込ませることで対応可能。

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

また、.htaccessファイルを配置すると、同じフォルダにある場合、指定した画像フォーマットはWebPに置き換えられます。

参考ページ
https://github.com/vincentorback/WebP-images-with-htaccess

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。


応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■MATIC
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B

ホームページ制作ならRU DESIGN

関連記事

ストックイラスト(イラストAC)に投稿中 参考になるか分からないダウンロード数についても
2024/05/15
 以前の記事(イラストACにオリジナルイラストの投稿を始めました)にも書きましたが、空いた時間を利用してイラストを投稿しています。ただ、誰かが使うことを想定した...
X(旧Twitter)条件を絞り込む「検索コマンド」について
2024/04/06
 X(旧Twitter)には「検索コマンド」を入力して条件を絞り込むという検索方法があります。もうひとつはブラウザ版X/Twitterに用意された「高度な検索」...
Wondershare Filmoraをお得に購入する方法と、短編アニメを制作してみました
2024/02/17
 Wondershare Filmora(ワンダーシェアー フィモーラ)という動画編集ソフトを購入してみました。CapCutでは商用利用不可(ブラウザ版は商用可...
無料で高性能な動画編集ソフト(アプリ)紹介
2024/02/06
 仕事の合間に創作を再開。どうせだったらいろいろ練習も兼ねてやってみようということで、オリジナルの創作アニメを制作しYouTubeでの公開を始めました。まだ、完...
スマートフォンに特化したアドネットワーク「nend」2024年3月29日にサービス終了
2024/01/06
 スマートフォンアドネットワーク「nend」について2024年3月29日をもってサービスを終了することを明らかにしました。 2010年に開始以来、今年で15年目...