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

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

その他, WEB関係

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

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

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

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

ホームページ制作ならRU DESIGN
ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。

関連記事

Welcart2.6にアップデートして画像が表示されなくなった場合の対処
2022/07/27
Welcart2.6から商品画像の登録方法の仕様変更があり、今まで不満だった内容が改善されました。それに伴い旧バージョンからアップデートすると、画像が表示されな...
ペライチで宣伝用ページを作ってみる
2022/07/23
ペライチでホームページ作成って今までやったことなかったので、なんとなく触ってみたくなったので試してみました。この記事を書きながら作成していきます。  ...
Mac版のGIMPにレイヤー効果を追加
2022/07/14
GIMPにPhotoShopのようなレイヤー効果を追加する方法をご紹介します。Windows版のやり方やレイヤー効果を追加するファイルはすぐに見つかったのですが...
HTML/CSSのブラウザ対応状況を確認できるサイトまとめ
2022/07/06
HTML/CSSのサポート状況を確認できるサイトをご紹介します。最新の機能を使ってみたい方はチェックしてみると良いかもしれません。ちなみにHTML5は最終バージ...
『やさしい日本語』AIがホームページのテキストを在留外国人に伝わりやすい「やさしい日本語」へ変換
2022/07/05
日立社会情報サービスは、ホームページのテキストを通常の日本語よりも平易な日本語に変換することができる「『やさしい日本語』変換サービス」の販売を開始しました。 在...