ウェブ

【2022年版】画像をWebPに変更する方法「jpegやpng」を軽量化できる【表示速度を改善】

webpアイキャッチ画像

従来の画像はpngjpgなどでしたが、現在主流はwebpになっており画像フォーマットを変更する必要があります。

avif画像もありますが、Chrome、Firefoxのみのサポートになるのでここではふれません。

webp(ウェッピー)は画質の劣化を最小限に、画像サイズを軽量化することを目的として使用。圧縮しても画質が落ちづらくWEBサイトの高速化にも繋がり、webpjpegと比べて20%くらいファイルサイズが小さくなります。

jpgとwebp
jpgとwebp

JPGからWebPに画像変換

▪ Syncer(jpg~webpに変換できるサイト)
https://lab.syncer.jp/Tool/Webp-Converter/

変換サイト
変換サイト

【変換前の画像】のファイル選択をクリック→使用するjpg画像選択→【返還後の画像】をクリックするとダウンロードできます。

WEBP変換
WEBP変換

【返還前の画像】(2.3MB)→【変更後の画像】(245.1KB)とファイルサイズが大幅に圧縮されているのが確認できます。

image.webp元ファイル名.jpgの2枚用意できたら、次はHTMLの記述方法についてです。

webpとjpg
webpとjpg

WebPのHTML記述方法

HTML記述では、webpjpgの両方を記述する方法をとります。

webpのHTML記述
webpのHTML記述

pictureタグで囲みその中でsource要素でwebpを指定し、imgタグでjpgを記述します。

alt代替テキストが不要な場合は削除してください。

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

2022年のwebpの対応ブラウザ

▪caniuse.com(ブラウザ対応状況が確認できるサイト)
https://caniuse.com/webp

IE・KaiOS Browser以外のすべてブラウザに対応していることが確認できます。

  • 緑色:対応
  • 黄色:一部対応
  • 赤色:未対応
対応
一部対応
未対応
caniuse.com
各ブラウザ対応状況

ファイル形式の比較

webサイトで使用されているwebpjpegpnggifの違いについて。

画像形式webpjpegpnggif
圧縮方法可逆圧縮
非可逆圧縮
非可逆圧縮可逆圧縮可逆圧縮
透過×
アニメーション××
ファイル形式

非圧縮と可逆圧縮と非可逆圧縮

・非圧縮:圧縮していないデータ。

・可逆圧縮:圧縮したデータを元に戻す時に、完全に元に戻す事ができるデータ。

・非可逆圧縮:圧縮したデータを元に戻す時に、元に戻す事ができないデータ。
※元に戻す場合は画質が劣化してしまう。

透過

背景色の透過ができるか、できないか。

アニメーション

画像でのアニメーションに関してgifからwebpに変換した場合、逆にデータが大きくなってしまいます。アニメーションはまだgifのままで使用する方がいいです。

webpとgif
webpとgif

GIF圧縮サイト

▪ILOVEIMG
https://www.iloveimg.com/ja/compress-image/compress-gif

ILOVEIMG
ILOVEIMG

画像圧縮サイト

▪TinyPNG
https://tinypng.com/

TinyPNG
TinyPNG

Webサイト全体の高速化に関しては、下記記事でまとめています。

webサイトを速く表示する方法
【2022年版】Webサイトの表示速度を改善するプラグイン【WEBページ高速化】Webサイトの動きプラグイン導入やデザインを追加する際に、どうしてもサイトが重くなりパフォーマンスが悪くなってしまい、Googleの評価とユーザーの離脱率が上がってしまいます。Webサイトを見る環境にもよりますが、使用しているネット回線の速度が遅ければ、ダウンロードに時間がかかります。レンタルサーバーの契約している速度プランにも影響がある為、速度が遅い場合はどこに問題があるのかを特定しなければいけません。Webサイトの表示処理を速くしたい、そういった時はページを読み込む時のコード圧縮や画像を圧縮して出来るだけページを読み込む負担を減らす必要があります。高速化プラグイン設定で速度改善した内容をまとめました。...

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA