一度クライアントのサイトに変換したロゴを出荷したところ、透明な背景があった黒い長方形が戻ってきました。 PNG を何も考えずに JPEG に変換しました。 奇妙な部分は、私が 予想されている 白 - 私が読んだすべての記事には透明性と引用が記載されていました;白になります。 "黒になり、HTML 仕様を読んでブラウザが言われたことを正確に実行していることが判明する前に、コードが壊れていると仮定して 20 分を費やしました。
それがこのガイドの正直なテーマです。 ザ・ 画像フォーマット変換器 on Toolz.dev is a thin wrapper over the browser's own canvas encoder. that gives it real advantages - nothing uploads, it's instant, it works offline once loaded - and real limits that most "convert any image to any format" pages will not admit to.これでtellは、ブラウザ& #39; s自身のキャンバスエンコーダの上に薄いラッパーです。
tl;dr: ザ・ 画像フォーマット変換器 ブラウザが開いて再エンコードできる画像をすべて取ります PNG、JPEG、または ウェブPーその3 つ、そして、その3 つだけ ツールはbrowser& #39; s canvasエンコーダを使用しているため、AVIF、GIF、またはSVG出力はありません、そしてそれがcanvasがサポートしているものです ターゲットをピックし、品質スライダをドラッグします (JPEGとWebPのみ - PNGは無視します) 、 ダウンロード変換する前に知っておくべき2 つのこと: JPEG をターゲットにした場合、透明度複合を黒にします。、仕様ごと、および EXIF メタデータが取り除かれる キャンバスの再エンコードはピクセルのみを運ぶため、変換ごとにすべての変換が行われます。 ファイルを縮小するには、 画像圧縮機 そして、 画像のサイズ変更 ツール。
このコンバーターは実際に何をサポートしていますか?
ほとんどのフォーマット ガイドがオーバーセルするのは、ここでスコープを最初に正しくしましょう。
入力: ファイルピッカーが受け入れる image/*、ファイルがプレーンにロードされます <img> 要素。ブラウザが表示できる場合、ツールはそれを読み取ることができます - PNG、JPEG、WebP、GIF、BMP、AVIF、およびほとんどの最新のブラウザでは SVG。
出力: PNG、JPEG、webp. 3 つのボタン。 それがリストです。
理由は怠惰ではなく、プラットフォームです。 ツールはあなたのイメージを <canvas> そして電話 canvas.toBlob(callback, type, quality)。 HTML の生活基準では、すべてのブラウザーがサポートされます。 image/png その呼び出しと他のフォーマットはオプションのままにします。実際には、 image/jpeg あんど image/webp どこでもサポートされており、 image/avif エンコーディングはそうではありません。 AVIF または GIF をキャンバスから書き込むためのブラウザ API はありません。 AVIF 出力を提供するサイトは、WebAssembly エンコーダ (数百キロバイトのダウンロード) を出荷するか、はるかに頻繁に画像をサーバーにアップロードします。このツールが行うことはどちらもありません。
ですから、これがツール ファーストの正直な比較表です。
| あなたが欲しい | このツール | なんでや |
|---|---|---|
| PNG → jpeg | はいって | キャンバスのエンコード image/jpeg |
| PNG → WebP | はいって | キャンバスのエンコード image/webp |
| JPEG → WebP | はいって | ここで最も役立つ変換 |
| ウェブP → PNG/JPEG | はいって | まだ WebP を読めないツールの場合 |
| avif → WebP | はい（aif で のみ） | ブラウザは AVIF をデコードします。エンコードできません |
| なんでも → avif | いやー | Canvas AVIF エンコーダは存在しません |
| アニメーション GIF → アニメーション WebP | いやー | あい <img> キャンバスに 1 つのフレームを与える |
| 何でも → SVG | いやー | SVG はベクトルです。これはラスター パイプラインです |
| 200 ファイルのバッチ | いやー | 一度に 1 つのファイル |
AVIF またはアニメーション WebP が必要な場合は、 squoosh 地元で、 cwebp/avifenc コマンド ライン、またはビルド パイプラインのイメージ ステップから。 ふりをするよりも、役に立つ場所を送りたいと思います。
JPEG が背景を透明に黒くするのはなぜですか?
仕様がそう言っているからです。そして、私はそれを知りました。それは、クライアントのメールの後にしかわかりませんでした。
JPEG にはアルファ チャンネルがありません。 キャンバスにアルファをサポートしない形式にシリアル化するように求めると、HTML の生活基準が明示的になります。ビットマップを、 黒の背景が黒く エンコード前。 白ではありません。 黒。 Chrome、Firefox、Safari はすべてこれに続きます。そのため、動作が一貫しているので、全員が一度だけ驚かせます。
そう： 透明な PNG ロゴを JPEG に変換すると、その背後にあるブラック ボックスが表示されます。 毎回。 これはツールのバグではありません。プラットフォームが一貫しており、高品質のスライダーをドラッグしても修正されません。
代わりに何をすべきか：
- 透明性を保ちますか 対象 png や ウェブP。 どちらもアルファを運んでいます。 WebP は通常、2 つのうち小さい方になります。
- 具体的には JPEG が必要ですか? 最初にエディターで実際に必要な背景色に画像を平らにします。 そしたら 変換します。
- 写真だけ変換するの? 写真は透明性がないので、これは表示されません。 離れて変換します。
これは、人々がコンバーターで画像を損傷する最も一般的な方法であり、内部化する価値があります。 Alpha は、ファイルのプロパティではなく、形式のプロパティです。 JPEG を選択することは、アルファ チャンネルを捨てることを選択することです。
キャンバスの再エンコードで、他に何が失われますか?
キャンバスはピクセルを保持します。 ピクセルだけ。 ブラウザが再エンコードすると、元のファイルの他のすべてが破棄され、これにより、次のような人が捕まります。
EXIFはなくなりました。 カメラのメーカーとモデル、レンズ、露出、撮影日、著作権フィールド、 GPS座標 すべて消えます。これは偶然のプライバシーの勝利です。投稿する前に電話の写真を変換すると、撮影された場所が削除されます。ただし、あなた' がアーキビストである場合、または生き残るために著作権フィールドが必要な場合は、キャンバスベースのコンバーターを介してオリジナルのコピーを変換します。
カラープロファイルが平らになります。 ディスプレイ P3 や Adobe RGB などの広い範囲のプロファイルでタグ付けされた画像は、実際には sRGB として扱われるキャンバスに描画されます。 Web 画像の場合、これはとにかくあなたが望むものです。 印刷作業の場合は、そうではありません。
アニメーションが 1 フレームに折りたたまれます。 あい <img> 要素は、どのフレームが表示されているかキャンバスにキャンバスを渡します。 12 秒のアニメーション GIF をドロップすると、1 つでも入手できます。 このツールは、これについて警告することはありません。これは、機能ではなく、真のラフ エッジだと思います。
それ以外はすべて、デコードされたピクセルから再エンコードされます。 これは、最も重要な 1 つのルールにつながります。
ジェネレーション ロスとは何ですか? また、どうすれば回避できますか?
損失の多いフォーマットを保存するたびに、エンコーダはデータを破棄します。 データを破棄してデコードし、さらに破棄して、その化合物にダメージを与えます。 これは世代損失であり、それがあなたのミーム テンプレートがファックスされたように見える理由です。
ルールは短いです。 常に最高のオリジナルから変換し、変換したコピーから変換しないでください。
具体的には、JPEG → WebP → JPEG は、元の JPEG よりも 2 倍悪い。 最初のエンコードのアーティファクトは、2 番目のエンコードによって実際の画像の詳細として扱われ、ビットを保存するために忠実に費やされます。 生ファイルまたは PNG エクスポートがある場合は、そこから始めます。
人々をつまずかせる帰結があります。 JPEG を PNG に変換しても品質は回復しません。 PNGはロスレスなので、画像を完全に保存します - ピクセルにすでにベイクされているすべての圧縮アーティファクトを含みます ファイル内の同じ損傷した画像を取得します 3 倍または4 倍大きい.PNG-from-JPEGは、中間ステップとしてのみ価値があります you' reは編集を何ラウンドも実行しようとしており、保存するたびに再圧縮を避けたい場合。
実際にどのフォーマットを選ぶべきですか?
形式の分類法をスキップして、実際に行う順序での決定をスキップしてください。
写真ですか？ WebP 80–85。 パイプラインで何かが WebP を読み取れない場合、JPEG は 80–85 です。
透明度はありますか？ WebP. PNG 最大の互換性が必要な場合。
スクリーンショット、UI モック、チャート、またはテキストとフラット カラーの何かですか? PNG、または WebP。 JPEG' s 離散コサイン変換は、レタリングの周りの目に見える蚊の騒音に鋭いエッジを塗ります - それは連続トーンの写真のために 1980 年代後半に設計されました (形式は ITU-T T.81 / ISO/IEC 10918-1 として標準化されています)。そしてテキストはまさにそれが扱う最悪のコンテンツです。
あなたがソースをコントロールしているロゴやアイコンですか？ どちらも使用しないでください。SVG、および don'ラスターコンバーターにまったく接続しないでください。
これらの背後にある仕様について: PNG は ISO/IEC 15948 であり、WebP は最終的に次のように公開されています。 RFC 9649 google が出荷してから 14 年後の 2024 年。サイズに関しては、Google's 独自の比較調査により、WebP の損失は同等の SSIM では JPEG よりも約 25 ～ 34% 小さく、WebP の損失は PNG よりも約 26% 小さくなります。これらは、vendor's コーパス上の数値であり、特定の画像に関する約束ではなく、強力なヒントとして扱われます。I'm がそれらを引用するのが快適な理由は、それらと #39; が長年にわたって実際のスクリーンショットや写真で私の結果と十分に一致しているためです。あなたのものは異なる可能性があるため、ツールは変換前にソース サイズを表示します。
Toolz.dev で画像を変換するにはどうすればよいですか?
ステップ 1: コンバーターを開く
に行く 画像フォーマット変換器。 インストールするものも、アカウントもありません。
ステップ 2: 画像をアップロードする
アップロード領域をクリックしてファイルを選択します。オブジェクト URL 経由でブラウザにロードされます。ファイルはどこにも送信されません。You'ファイル名とそのサイズが表示されます。
ステップ 3: 形式の読み出しを確認する
ツールが表示 現在の → ターゲット。 「現在の」はファイルの MIME タイプから読み取られるので、 .jpg ファイルレポートとして JPEG。 誰かがファイルの拡張子の名前を実際に変換せずに変更した場合に、あなたが思っている以上に起こると便利な健全性チェックを行います。
ステップ 4: ターゲットを選択する
PNG、JPEG、または WebP。
ステップ5: 品質を設定する - それが当てはまる場合
品質スライダー (1 ～ 100、デフォルトは 90) JPEG と WebP のみが表示されます。 意図的なもの: PNG は無損失であり、 canvas.toBlob の品質引数を完全に無視します image/pngというわけで、何もしないスライダーを表示するのは嘘です。
設定する場所について: 90 はデフォルトで、ほとんどのコンテンツでオリジナルとほとんど区別がつきません。 80～85 は私が実際に作業している場所です - 意味のあるほど小さく、まだきれいです。 60 未満では、you'写真やテキスト付きのものには、you' はるかに早く表示されます。
ステップ 6: 変換してダウンロードする
たえます 変換してダウンロードする。 エンコードがマシンで発生し、ファイルは次のように保存されます converted_<original-name>.<ext>。寸法は正確に保存されます。コンバータは画像と #39; 独自の幅と高さを通過させるため、このステップではエンコードが変更され、それ以外は何も変更されません。
変換または圧縮 - どれが必要ですか?
小さなファイルが必要なときにコンバーターに手を伸ばす人がいるでしょう。多くの場合、それは間違ったツールです。 3 つの異なるジョブ、3 つの異なるツール:
| ゴール | ツール | 何を変えるか |
|---|---|---|
| エンコーディングを変更する | フォーマット変換 | フォーマット、品質 |
| 同じ形式、小さいファイル | 画像圧縮機 | 品質のみ |
| ピクセル数が少ない | 画像のサイズ変更 | 寸法 |
そして、最大の勝利は、ほとんどの場合、スキップする人です。 4000×3000 の写真を 1200px 幅のレイアウトに提供している場合は、 サイズ変更はすべてのフォーマットの選択肢を組み合わせたものに勝るー you' ブラウザがダウンスケールし、とにかく破棄しようとしていたピクセルの90% を捨てている。 resize first, then convert.その順序で行うことは、日常的に4 MBのPNGを200 KB以下で取り、フルサイズのオリジナルで巧妙なフォーマットの選択の量は近づかない。
もう 1 つの習慣を身につける価値がある: オリジナルを保管すること。 ロスレス マスターをアーカイブし、配布用の損失の派生体を生成します。 avif-everywhere が最終的に到着したとき、または次のフォーマットが到着すると、後悔する代わりにクリーン ソースから再エクスポートします。
よくある質問
Web サイトに最適な画像形式はどれですか?
WebP、ほとんどのコンテンツのために。 it& #39; sは、写真のためのJPEGよりも小さく、グラフィックのためのPNGよりも小さい、それは透明性をサポートし、すべての現在のブラウザは、それを読み取る - Safariは、最後のホールドアウトであり、バージョン14 でサポートを追加しました.AVIFは、より良いまだ圧縮が、あなたはすることができます& #39; tは、ブラウザキャンバスでそれを生成します; あなたはビルドステップまたはデスクトップエンコーダが必要です。
このツールは、自分のイメージを AVIF に変換できますか?
いやー 。 コンバータは、ブラウザーのキャンバス エンコーダーを使用し、キャンバスから AVIF をエンコードすることはできないブラウザーのキャンバス エンコーダーを使用するため、PNG、JPEG、および WebP のみを出力します。 あなたのブラウザは デコード avif なので、AVIF ファイルを変換できます にする WebP または PNG ここ - 他の方向ではないだけ AVIF 出力には、 のようなコマンドラインエンコーダを使用します avifenc または、フレームワークのイメージ パイプライン。
なぜ私の透過的な PNG は、jpeg に変換した後、背景が黒くなったのですか?
JPEG にはアルファ チャンネルがなく、HTML 仕様では、アルファ サポートを使用しない形式にシリアル化するキャンバスは、イメージを黒のソリッド バックグラウンドに合成する必要があると述べています。 これはバグではなく、特定の動作をすることであり、どのブラウザーでも同じです。 透明度を維持する必要がある場合は、代わりに PNG または WebP に変換します。
画像を変換すると、EXIF データが削除されますか?
はい - GPS座標、カメラ設定、キャプチャ日を含むすべてのツールは、キャンバスにあなたのイメージを描画し、ピクセルを再エンコード、およびキャンバスは、メタデータを保持していない.that& #39; sは、あなたが& #39; 写真を投稿する前に位置データをストリッピングする場合に便利です, そして、メタデータが必要な場合は問題, そう、いずれにしても変換されていないオリジナルを維持します。
アニメーション GIF をアニメーション WebP に変換できますか?
このツールではありません。 それはあなたの画像を <img> 要素とキャンバスに単一のフレームをキャプチャするので、アニメーションGIFが1 つの静止画として出てきます アニメーションWebPは実際のマルチフレームエンコーダ - 使用が必要です gif2webp Google の WebP ツールから、またはアニメーションを MP4 に変換すると、どちらよりも劇的に小さくなります。
JPEG に PNG に変換すると、品質が向上しますか?
いいえ PNG はロスレスなので、与えられたものを正確に保存します & #39; s - 既に JPEG& #39; s ピクセルにベイクされた圧縮アーティファクトを含む あなたは、はるかに大きなファイルで同一の外観の画像で終わる 失われたデータが失われます; フォーマットの変更がないと、それを取り戻します。
ファイルサイズに制限はありますか?
ハードリミットが強制されません。実用的な上限はデバイスです' s メモリ。画像全体がほぼ幅 x 高さ x 4 バイトでキャンバス ビットマップにデコードされるため、8000 x6000 の写真には、エンコードが開始される前に生のピクセルとして約 192 MB の RAM が必要です。デスクトップ ブラウザは、一般的なカメラ出力を文句なく処理します。古い携帯電話は、非常に大きなファイルに苦労する可能性があります。
PNGとJPEGはどう違いますか？
JPEG は損失が多く、写真用に作成されています。細かい部分を破棄して小さなファイルに到達させ、透明性を持たない。 PNG はロスレスで、グラフィック、スクリーンショット、ロゴ用に構築されています。写真の場合は、より大きなファイルを犠牲にして、すべてのピクセルを正確に保持し、透明な背景をサポートします。 ここでは、それらの間で変換できますが、JPEG にはアルファ チャネルがないため、JPEG が背景を取得したときに保存された透明な PNG を覚えておいてください。
画像を無料で WebP に変換するにはどうすればよいですか?
PNGまたはJPEGをロードし、出力形式としてWebPを選択し、より小さなファイルが必要な場合は品質を設定し、ダウンロードします - それは無料で、完全にブラウザで実行されます.WebPは、透明性をサポートしながらJPEGとPNGの両方よりも小さく、現在のすべてのブラウザで読み取られるため、通常、Webのために行う価値のある変換です。
私の画像はサーバーにアップロードされますか?
いいえ ファイルはオブジェクトのURLでローカルに読み込まれ、ブラウザによってデコードされ、ブラウザ& #39; sキャンバスによって再エンコードされ、ブラウザによって保存されます。これを自分で確認できます: DevToolsを開き、ネットワークタブに移動し、画像を変換します - you& #39; アップロードされないようになります。ページがロードされると、変換はWi-Fiオフで機能します。
短いバージョン
ブラウザー キャンバスは、3 つの形式に対応する、正直な画像変換であり、それ以外の場合はすべてが悪いものです。 PNG、JPEG、および WebP 内では、インスタント、プライベート、無料で、Web にとって実際に重要な変換をカバーしています。写真を WebP にすることは、クライアントのホームページで黒い長方形で見つけられるようにするよりも、役に立たないということは役に立ちません。
何かを変換する前に、透明性が必要かどうか (JPEG ではなく)、メタデータが必要か (オリジナルのままにしておく)、画像が単純に多すぎる (その後に) かどうかを尋ねます。 リサイズする まず）。 これらの 3 つを正しく理解すれば、フォーマットの選択は簡単です。
ザ・ 画像フォーマット変換器 ここにあります。 画像ワークフローの残りの部分では、 画像圧縮機、 画像のサイズ変更 ツール、および - 平らな背景の切り欠きの場合 - バックグラウンド リムーバー。 より広い全体像は、 イメージ ツール ガイド そして、 画像圧縮ガイド。
