画像変換ツール：PNG・JPG・WebP。
PNG、JPG、WebP の間で、画像を 1 枚でも複数枚でもまとめて変換し、変換前後のファイルサイズを比べられます。ブラウザ内で動くので、画像がアップロードされることはありません。
ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。
画像を変換する方法
- 画像を選ぶか、上の枠にドロップします。複数枚まとめて追加できます。
- 変換先の形式を選びます：PNG、JPG、WebP。
- JPG と WebP では、画質を 40% から 100% の間で設定します。初期値は 85% で、低くするほどファイルは小さくなりますが、圧縮の跡が目立ちやすくなります。PNG は可逆圧縮なので、画質の設定はありません。
- 変換したら、ファイルを 1 つずつダウンロードします。リストには、各ファイルの変換前後のサイズが表示されます。
知っておきたいこと：
- 透明部分。 PNG と WebP は透明な部分をそのまま保ちます。JPG は透明を保存できないため、透明な部分は白になります。
- サイズとファイル名。 画像の幅と高さはそのままで、ファイル名は拡張子だけが変わります。
hero.pngはhero.webpになります。 - 読み込める画像。 PNG、JPG、WebP のほか、GIF などブラウザで開ける画像も追加できます。アニメーション画像は、1 枚の静止画として保存されます。
- メタデータ。 各画像はピクセルから描き直されるため、カメラの情報や GPS の位置情報などのメタデータは新しいファイルにコピーされません。
- ブラウザの対応状況。 ブラウザがある形式で保存できない場合、ツールは別の形式で保存せずに、そのことをお知らせします。別の形式かブラウザをお試しください。
Codex で作るページを WebP で速くする
ページの中で一番重いのは、たいてい画像です。WebP ファイルは、同程度の画質の JPG より目に見えて小さいことが多く、写真の PNG と比べればはるかに小さくなります。主要なブラウザはすべて WebP を表示できます。プロジェクトに入れる前に画像を変換するのが、いちばん手軽な高速化です。
- コミットする前に変換する。 ヒーローの写真、スクリーンショット、デザイン用に生成した画像を画質 75〜85% の WebP に変換し、見た目が崩れていないか確認してから、
public/imagesなどプロジェクトの画像フォルダに入れます。 - 必要なところは PNG のままに。 WebP にすると図版の細い線や小さな文字がぼやける場合は、その画像だけ PNG のままにしましょう。ロゴやアイコンは、たいてい SVG が最適です。
- 大量の画像は自動化する。 このツールは数枚の画像なら最速です。何十枚もあるなら、ビルドに変換の工程を追加するよう Codex に頼みましょう。
そのうえで、新しいファイルを使うよう Codex に伝えます。
[ランディングページ] では、[public/images] にある WebP 画像を使ってください。PNG や JPG への参照をすべて、対応する .webp ファイルに置き換え、読み込み中にレイアウトがずれないよう、すべての <img> に width と height を指定し、最初の画面より下の画像は遅延読み込みにしてください。
よくある質問
画像変換ツールは無料ですか？
はい。登録も透かしも、1 日あたりの上限もありません。
画像はアップロードされますか？
されません。ブラウザがお使いのデバイス上で各画像を読み込み、描き直し、保存します。変換したファイルは、もう一度変換するかタブを閉じるまで、ページのメモリ上に残ります。サイトが記録するのはツールが使われたという回数だけで、入れた内容は記録しません。
WebP は PNG や JPG より優れていますか？
Web サイトのほとんどの画像では、そのとおりです。WebP ファイルは同程度の画質の JPG より小さいことが多く、JPG と違って透明にも対応しています。それでも、メールや WebP を開けない古いソフトウェアには JPG がいちばん安全です。また PNG はすべてのピクセルを正確に保つので、一部のスクリーンショットや図版ではそれが重要になります。
変換したらファイルが大きくなったのはなぜ？
JPG や WebP を PNG に変換すると、たいていファイルは大きくなります。PNG は非可逆圧縮をせずにすべてのピクセルを保存するためです。画質の設定がとても高い場合も、WebP や JPG が元のファイルより大きくなることがあります。ファイルを小さくしたいなら、WebP を選ぶか、画質を下げてください。