画像と写真 · ブラウザー画像 & 描画エディター
ロスレス JPEG トリミングとブラウザー トリミング: 再エンコードが発生する理由
· 背景
画像編集 キャンバス ブラウザ処理
コマンドライン ツールは、JPEG をデコードせずにトリミングできますが、これは 8 または 16 ピクセル グリッド上でのみ可能です。代わりにブラウザ エディタがデコードして再エンコードします。この投稿では、両方のアプローチが存在する理由と、再エンコードが必要な場合の品質の低下を制限する方法について説明します。
2 つのクロップ、2 つのファイル サイズ — 同じ長方形を 2 つの方法でカットすると異なるファイルが生成されます。その理由は JPEG 形式自体にあります
2 つの JPEG クロップは同じ次元を持つことができ、それでも異なるバイト シーケンスを生成します。エンコーダが異なるテーブル、ヘッダー、量子化された値、またはメタデータを書き込む間、四角形は同一である可能性があります。重要な違いは、たどるパスです。ロスレス JPEG ユーティリティは圧縮ブロックを再配置することがありますが、このエディターは画像をデコードし、ピクセルをラスター レイヤーにコピーし、canvas.toBlob に新しいファイルをエンコードするように要求します。
置き換え不可能なスキャンではなく、複製を使用してその違いをテストします。長方形を切り取ってエクスポートし、寸法、表示されるエッジ、測定されたブロブ サイズを比較します。 JPEG 品質はブラウザー エンコーダーに渡されます。 PNG は非可逆品質引数を受け取りません。WebP は独自のブラウザー コーデックに従います。ダウンロードは、角が削除された元の圧縮ストリームではなく、新しいエンコードです。
JPEG の構成 — 8×8 ブロック、最小コード単位、および切断にグリッドが重要な理由
JPEG は、変換された画像情報を 8 x 8 ブロックに保存します。サンプリングとファイルの編成によって形成されたより大きなコーディング単位が含まれます。特殊なロスレス操作では、そのエッジがファイルに既に含まれている構造と一致する場合にのみカットがきれいになるため、このグリッドは重要です。これは便利な形式コンテキストであり、ブラウザー エディターがブロック座標を公開したり、最小コード化単位を理解したりするという主張ではありません。
エディターのトリミング ツールは、デコードされたピクセル上のソース四角形を考慮します。したがって、JPEG ブロック境界の間にあるものなど、任意の選択を表すことができますが、ソースはサブサンプリング制御、ブロック アライメント、またはバイト レベルの保存を公開しません。その結果、ピクセルの描画後にエンコーダーに戻るという代償を払って、幾何学的に便利な自由度が得られます。
JPEG ブロック構造はバックグラウンド コンテキストです。このエディタは圧縮ブロックを解析したりトリミングしたりしません。
jpegtran などのツールは、他の機能を表します。最初にすべてのブロックを通常のピクセルに変換せずに、JPEG 構造を操作できます。クロップエッジが関連するブロックグリッドに適合する場合、ツールは残りの圧縮データをそのまま残すか、完全な非可逆再エンコードを回避しながら、完全な領域を破棄することがあります。このワークフローはこのエディターの外部にあり、一般的なブラウザーのトリミング ボタンによって暗示されるべきではありません。
ロスレスは任意という意味ではありません。ブロック整列ツールはトリミング四角形を制限する可能性があり、メタデータ処理には依然として独自の検証が必要です。エディターは別の選択をします。デコードされたイメージ上に自由な四角形をユーザーに提供し、その四角形を新しいレイヤー キャンバスにコピーし、後で結果をエンコードします。バイト保存またはブロックレベルのアーカイブ動作が必要な場合は、専用の JPEG ユーティリティを使用します。
ロスレス JPEG トリミングはこの実装の範囲外であり、別のツールが必要です
キャンバス編集は、JPEG 変換係数ではなく、ピクセルに対して構築されます。ブラウザは画像を HTML 画像としてロードし、エディタは選択したソース四角形を新しいレイヤー キャンバスにコピーし、表示されるラスターがエクスポート用に構成されます。このデザインは、あらゆる切り抜きジオメトリを受け入れ、同じワークフローで描画、テキスト、その他のレイヤーを処理できるようにします。これは、元の JPEG ブロックがエクスポート マテリアルではなくなったことも意味します。
セッションがエクスポートされると、canvas.toBlob はブラウザーに新しい PNG、JPEG、または WebP ファイルを要求します。 JPEG ダウンロードの場合、デコードおよび編集されたラスターをブラウザーで再エンコードします。ソースでは、最小コード化単位のアライメント、係数のコピー、サブサンプリングの選択、またはメタデータとプロファイルに関する保証は公開されていません。この動作は意図的なラスター編集であり、ロスレス ブロック クロップではありません。
ブラウザーのトリミングはピクセルをデコードし、四角形をコピーし、コンポジットを再エンコードします
Web 画像では 1 回の再エンコードが許容される場合がありますが、そのコストはソース、切り抜き、ブラウザー エンコーダー、選択した品質、およびコンテンツによって異なります。細かいテキスト、ハーフトーン スキャン、シャープな線画、コントラストのエッジが繰り返されると、何気ない写真よりも早く変化が明らかになることがあります。損失に固定パーセンテージを割り当てたり、ファイル サイズの削減を保証したりすることは避けてください。リポジトリはそのような約束を提供しません。
可能な場合、ワークフローを 1 回の意図的なエクスポートにとどめてください。 JPEG ダウンロードを再度開き、別のラスター編集を行って再度エンコードすると、アーチファクトが発生する可能性がさらに高まりますが、PNG をエクスポートすると、JPEG バイトが保持されるのではなく、サイズと形式のトレードオフが変更される可能性があります。実用的な倍率で実際の出力を比較し、ソースを保持し、普遍的な数値を信頼するのではなく、出力先の形式と品質を選択します。
再エンコードの結果はエンコーダに依存します。固定サイズや品質パーセンテージは保証されません
実際の比較として、スキャンしたページを使用します。オリジナルを保存し、その寸法とファイル サイズをメモしてから、エディターで目的の四角形をマークします。選択した品質でクロップを JPEG として一度エクスポートし、小さい文字、直線の境界線、および紙のテクスチャを検査します。出力寸法は、ページがトリミングされたかどうかを示します。目視検査により、新しいラスターが引き続き有用であるかどうかがわかります。
ロスレス ブロック対応ユーティリティは別の実験になります。ブラウザのクロップでは描画した四角形を受け入れる一方で、整列したエッジのみを受け入れてページのデコードを回避する可能性があります。両者を同じ保証があるかのように比較しないでください。ここで、canvas.toBlob は新しいファイルを生成しますが、ソースはバイト ID、メタデータ保持、プロファイル保持、または固定品質コストを約束しません。
動作チェック: バイトの保存を期待せずに、寸法と表示される詳細を比較します。
この比較は、具体的には JPEG 入力とブラウザーのラスター クロップに関するものです。 PNG には異なる圧縮動作があり、このエディターでは非可逆品質の引数を受け取りません。 WebP は独自のブラウザ コーデックに従います。回転、メタデータの書き換え、ICC 処理、および特殊なロスレス JPEG 変換は別の問題です。ある形式でエクスポートが成功しても、別の形式では問題が解決されません。
同じ注意がアーカイブの申し立てにも当てはまります。エディターは、最小コード単位のアラインメント、サブサンプリング制御、ロスレス回転操作、または埋め込まれたメタデータが存続する保証を公開しません。ソースの構造をそのままにしておく必要がある場合は、ソースを保存し、フォーマット対応ツールを使用してください。目的が任意の四角形を含む便利な新しい画像である場合、ブラウザーのワークフローがより直接的に適合します。
要点: 自分がどの取引を行っているかを把握する — ブラウザー画像および描画エディターがデバイス上の四角形をどのようにトリミングするか、およびロスレス ツールがアーカイブ作業に適している場合
作業は簡単です。このエディタはラスター クロップを実行し、その後新しいブラウザー エンコーディングを実行します。画像をデコードし、選択した四角形をレイヤー キャンバスにコピーし、表示される結果を合成し、要求された形式に Canvas.toBlob を使用します。これにより、デバイス上で任意のトリミングが行われますが、元の圧縮されたバイト ストリームは保存されず、ロスレス JPEG セマンティクスも主張されません。
成果物が共有、レビュー、またはさらに通常の編集に使用する実用的な画像である場合に使用します。アーカイブの忠実性、ブロックの保存、またはメタデータの保証が重要な場合は、ソースを保持し、フォーマット対応のロスレス ユーティリティを選択してください。最終的な寸法を測定し、目に見える細部を検査します。これらのチェックは、すべてのブラウザ エンコーダが同じバイト レベルの取引を行うかのように装うことなく、受信したファイルを記述します。