UltKit

JPGをWebPに変換

Webサイトで使っているJPG写真を、現在のすべてのブラウザで表示できるWebPに変換して軽量化しましょう。まとめてアップロードし、画質は80のままでも調整しても構いません。ダウンロードしたファイルは通常、容量が4分の1〜3分の1ほど軽くなります。

画像変換

またはJPG, JPEG, JPE … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力

ファイルは当社のサーバーで処理され、30分後に削除されます。

このツールの使い方

  1. 1

    サイトのJPGをアップロード

    商品写真、ブログのヘッダー画像、ギャラリー用の写真をアップロードエリアにドラッグします。1回で20ファイルまで、1ファイルあたり95 MBまで処理できます。

  2. 2

    WebPの画質を設定

    音質の初期値は80です。85–90のJPGで保存した写真なら、ここから始めるのが一般的です。可逆はオフのままにしてください。写真の容量が増えるだけで、画質は良くなりません。

  3. 3

    変換して差し替え

    WebPに変換を押して、ファイルまたはZIPをダウンロードし、既存のJPGと並べてアップロードすれば、両方を配信できます。

回答

JPGをWebPに変換する価値はありますか?

自分で運営するウェブサイトに掲載する画像なら、価値があります。WebPは同じ画質で通常4分の1から3分の1ほど容量を減らせ、2020年以降に公開されたすべてのブラウザで表示できます。元のJPGはフォールバック用に残しておいてください。

JPGをWebPに変換してページの表示を速くする

ウェブページで最も重いのはたいてい画像で、その多くは、カメラやスマートフォン、ストックフォトで使われているJPGのままです。WebPは、まさにそうしたファイルを小さくする後継として、2010年にGoogleが公開しました。非可逆モードはVP8動画コーデックを基にしており、JPEGのように8 × 8のブロックを個別に符号化せず、隣接するブロックから各ブロックを予測します。

実用上は、同じ画像をより少ないバイト数で表示できるということです。150 KBの写真が12枚ある商品ページで、それぞれを4分の1から3分の1削ると、1回の訪問あたり数百KBの節約になります。これは、画面上で最大の画像やテキストブロックの表示時間を測るCore Web VitalsのLargest Contentful Paintにそのまま表れます。

閲覧者側の対応状況は、もう問題になりません。ChromeはWebPを10年以上前から表示しており、Firefoxは2019年のバージョン65から、Safariは2020年のバージョン14から対応しています。対応が遅れているのはブラウザの外で、メールソフト、リンクプレビューを作る一部のSNS、デスクトップソフトなどです。そのため、ブラウザにはWebPを配信し、それ以外のためにJPGを残す構成が適切です。

JPG写真に適したWebPの画質の選び方

  1. 50

    サムネイルや小さなカード向け。大きな画面では甘さが目立ちます

  2. 70

    細部の少ない背景画像や、全幅のバナー

  3. 80

    ここでの初期値。商品写真やブログの写真がJPGと同じ見た目になります

  4. 90

    細かい文字、布の質感、シャープな輪郭がある写真

picture要素でJPGをフォールバックにしてWebPを配信する

HTML:WebPを優先し、JPGをフォールバックにする
<picture>
  <source srcset="/images/sofa.webp" type="image/webp">
  <img src="/images/sofa.jpg" alt="グレーの3人掛けソファ" width="1200" height="800">
</picture>

JPG

JPEG画像

JPEG(JPG)は最も広く使われている写真形式で、1992年にJoint Photographic Experts Groupが標準化しました。目につきにくい細部を捨てる非可逆圧縮を使うため、写真をウェブ、メール、スマートフォンの保存に適した小さなサイズにできます。滑らかなグラデーションや自然な風景は得意ですが、くっきりした文字、線画、べた塗りの色ではブロック状やぼやけたノイズが目立ちます。JPEGには透過もアニメーションもなく、保存し直すたびに少しずつ画質が落ちます。すべてのブラウザ、スマートフォン、カメラ、画像エディタで開けます。

圧縮方式
非可逆
透過
非対応
アニメーション
非対応
登場時期
1992 · Joint Photographic Experts Group
JPG 変換

WEBP

WebP 画像

WebP は、ウェブページの表示を速くするために Google が 2010 年に公開した画像形式です。非可逆圧縮と可逆圧縮の両方、アルファ透過、アニメーションを 1 つの形式で扱えます。非可逆 WebP は、同程度の画質の JPEG と比べて一般に 25–35% 小さくなり、可逆 WebP も通常は PNG より小さくなります。現行のブラウザーはすべて対応していますが、古いデスクトップソフト、印刷サービス、アップロードフォームの中には、今でも受け付けないものがあります。Windows、macOS、最近のほとんどの画像編集ソフトで WebP を開けます。

圧縮方式
非可逆または可逆
透過
対応
アニメーション
対応
登場時期
2010 · Google
WEBP 変換

自分で公開する画像のページ容量を減らすために、サイト運営者はJPGをWebPに変換します。パソコンに保存するだけのファイルや印刷用のファイルには、WebPは必要ありません。

不具合を起こさずにWebPへ移行する方法

上の<picture>のコードを使うと、各ブラウザが対応している最初のソースを選ぶため、古いブラウザの訪問者には自動的にJPGが表示されます。<img>のwidthとheightは残してください。表示領域が確保され、画像の読み込み中にレイアウトがずれるのを防げます。

WordPressのバージョン5.8以降では、メディアライブラリにWebPをアップロードできるため、変換したファイルをそのままアップロードできます。多くのCDNもその場で変換できますが、このページは、メインバナーのように手作業で管理したい画像向けです。

公開する前に、フォルダ全体の容量を比べてください。WebPの合計が明らかに小さくならない場合、JPGがすでに強く圧縮されていて、変換してもほとんど効果がありません。変換後もバイト数の上限に収める必要がある画像には、画像圧縮を使ってください。

サイト運営者からのJPG→WebP変換に関する質問

同じJPGと比べてWebPはどれくらい容量が小さくなりますか?

Googleが公開している比較では、視覚的な類似度を示す標準的な指標であるSSIMが同等の場合、非可逆WebPはJPEGより25–34%小さくなっています。実際の削減率は写真によって異なり、なめらかな空やスタジオの背景は大きく縮み、ノイズの多い暗所撮影は縮み方が小さくなります。すでに強く圧縮されたJPGは、ほとんど変わらないこともあります。

JPGの画質85に相当するWebPの画質はいくつですか?

2つの品質スケールは同じではないため、数値は1対1では対応しません。多くの写真では、WebPの75–80が、通常の表示サイズでJPGの85–90に近い見た目になります。フォルダ全体を処理する前に、1枚を100%表示で確認してください。

WebPに変換した後もJPGは必要ですか?

残しておいてください。メールソフト、一部のSNSの共有プレビュー、古いデスクトップソフトはいまだJPGを前提としており、<picture> 要素にもフォールバック用のJPGが必要です。WebPはJPGを置き換えず、並べて保管してください。

JPGをWebPに変換すると写真の見た目は良くなりますか?

なりません。WebPはデコードしたJPGからエンコードされるため、JPGにすでにあるブロックノイズや色のバンディングはそのまま引き継がれます。変換で変わるのは画素の保存効率だけで、ディテールの量は増えません。

カメラのJPGのEXIF情報はWebPでも保持されますか?

WebPはEXIFを保持できますが、メタデータを削除は初期設定でオンになっており、GPSの位置情報やカメラの情報が取り除かれます。公開ウェブサイトに載せる画像では、通常この設定が適しています。データを残したい場合は詳細設定でオフにしてください。

サイトにはWebPではなくAVIFを選ぶべきですか?

AVIFは写真をさらに小さくできますが、エンコードがはるかに遅く、画像プラグインやCDNによっては対応がまだ不安定です。まずはWebPのほうが安全です。WebPを導入したら、メインビジュアルの数枚でJPGをAVIFに変換も試してみてください。