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

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

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>
  <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

ホームページ制作ならRU DESIGN
「スタードメイン」は、年額100円からの独自ドメイン+無料サーバーも付いてきます。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。


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

関連記事

Googleの検索結果の件数が普段と違うと感じた方への対処法
2023/11/06
 Googleの検索結果が普段と全然違うってことはありませんか?Googleアカウントにログインした状態でGoogleから検索をすると、アカウントに基づく情報を...
Photoshopの代替品として使える「Photopea」
2023/04/10
 以前ご紹介した「Photoshopの代替品として使える「Pixelmator Pro」」の記事とは別の画像編集アプリケーションをご紹介します。ブラウザで利用で...
WEBサイトの集客・宣伝についての戯れ言
2023/04/07
 今更感はありますが、この「RU DESIGN」のサイトでは、Googleアドセンスによる自動広告や各種アフィリエイトへのリンク等を表示・添付させてもらってます...
GPT-4を駆使したロゴデザインサービスのサービス提供を開始
2023/03/19
 GenAi合同会社は、AI技術であるGPTとプロのデザイナーがコラボレーションし、ロゴデザインを素早く提供するサービス「Aden」を開始。画像生成AIを活用し...
「AIOne」GPT-4を無制限で無料提供中(期間限定)
2023/03/19
 Topaz合同会社は、画像生成AIを始め様々なAIを手軽に利用可能なAIプラットフォーム「AIOne」を通じて、「GPT-4」を2023年3月18日から無制限...