画像のサイズ変更: Retina トラップとキャンバスが静かに捨てるもの

約 6 か月間、このブログのすべてのサムネイルはやや柔らかかった。 壊れていません。 明らかに間違っているわけではありません。 ただ… はっきりした、目の隅から外に気づいて、気付かないように自分自身を話してください。

レイアウトには、サムネイル スロットの幅が 600 ピクセルであると書かれていました。 そこで、サムネイルを 600 ピクセル幅でエクスポートしました。 それはまったく間違ったことであり、モニター上では問題なく、携帯電話ではコピーのように見えたので、その理由を理解するのに非常に長い時間がかかりました。

その理由は、CSSピクセルはデバイスピクセルではないからです。 最新の電話または網膜ラップトップは、すべてのCSSピクセルに2 つまたは3 つの物理ピクセルをパックします - that& #39; s 何 window.devicePixelRatio 報告。 そのため、私の 600 ピクセルの画像は 1,200 ピクセルのガラスの物理ピクセルに引き伸ばされ、ブラウザはその違いを発明していました。 ファイルに含まれていない詳細を発明することはできません。 修正は 1,200 でエクスポートし、CSS に 600 で表示するようにすることでした。

このガイドは、サイズ変更された画像が必要以上に悪く見えるようにする他の 3 つまたは 4 つの間違いと同じように構築されています。 ザ・ 画像サイズ変更ツール on Toolz.dev does the work in your browser - the file never leaves your machine - but the tool is the easy part.t.t.t.t.t.t.t.devはブラウザで作業を行いますが、ツールは簡単な部分です.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t.t

tl;dr: でエクスポート 2倍ディスプレイサイズ Retina スクリーン (600px スロットは 1,200px ファイルが必要) の場合、スケールしない アップー you can't add detail that was never captured. 縦横比をロックする unless you genuely want to distort the image. resize 前に あなたは圧縮しますが、その後ではありません。 を使用する 画像サイズ変更ツール 寸法を設定するには、 アスペクト比計算 欠けている側を解決するために、そして 画像圧縮機 後でファイル サイズを小さくします。 すべてがクライアント側で実行されます。 前もって知っておく価値のある 1 つの注意事項: サイズを変更すると、画像が再エンコードされるため、 すべての EXIF メタデータが取り除かれる- プライバシーに最適で、時には驚くべきこともあります。

サイズ変更すると画像がぼやけて見えるのはなぜですか?

10 分の 9 の 1 つであり、3 つのうちの 1 つであり、すべて修正可能です。

あなたはスケールアップしました。 400 x300 の写真を 1600 x1200 に拡大すると、ソフトウェアは、その写真が持つ 1 つごとに 12 ピクセルの情報を生成するよう要求されます。これは、補間によって行われます。近傍を平均して、その間に何があるかを推測します。そして、結果は柔らかくなります。なぜなら、詳細は真に存在しないからです。生成モデル以外に発明されるものはありません。 常に最大のオリジナルから始めて、縮小してください。 ダウンはほぼロスレスで、アップは推測です。

ピクセル比は無視しました。 上で説明した間違い。 CSS ボックスが 600×400 で、user's 画面が 2× の場合、ブラウザーを鮮明にレンダリングするには 1200×800 の実ピクセルが必要です。 2×でエクスポートし、ブラウザーをスケールダウンさせます。ブラウザーのダウンスケールは素晴らしく見えます; アップスケールは泥のように見えます。

あなたの後に何か他のものがそれを圧縮しました。 慎重にサイズを変更した後、独自の品質設定で画像を再エンコードするプラットフォームにアップロードしました。 すべてのソーシャル プラットフォームがこれを行います。 止めることはできませんが、減らすことはできます。プラットフォームのターゲット ディメンションに近づけてアップロードして、できるだけ機能しないようにし、修正する必要があるファイルを、すでにクリーンなファイルを渡します。

画像のサイズを変更すると、実際に何が起こるでしょうか。

ほとんどの驚きを説明しているので、理解する価値があります。

ラスター イメージは、ピクセルのグリッドです。 そのグリッドを小さくするということは、何を決定するかを決定することを意味します 新 Pixel は、いくつかの古いものの間にある場合に使用する必要があります。 その決定は呼ばれます リサンプリング、そしてアルゴリズムが重要です。

• 最寄りの隣人ー一番近い元のピクセルをつかむ 速く、ブロック状でギザギザのエッジ ブロック性がポイントとなるピクセルアートのみ修正します。
• バイリニアー最も近い4 つのピクセルを平均します 滑らかで少し柔らかいです.
• ビクビック- 立方体曲線を使用して周囲のピクセルを 16 個重くします。双線形よりもシャープ;ほとんどのデスクトップ ソフトウェアの賢明なデフォルトです。
• ランゾス- より大きな近傍にウィンドウ付きシンクフィルター。ダウンスケーリングに最適な品質が最も遅く、コントラストの高いエッジでかすかなリンギングが発生する可能性があります。

ブラウザ キャンバスのサイズ変更はバイリニアからバイキュービックまでの範囲にあり、does'正確に選択することはできません。スムージング品質を求めることができるのは HTML 仕様と #39; のみです。そのヒントのデフォルトは次のとおりです "low"。 これは、大多数の Web ワークで問題なく、Toolz.dev ツールがすぐに感じる理由です。

知る価値のあるパワーユーザーのトリックが1 つあります。 1 つのステップで大きな要因でダウンスケールすると - たとえば4000pxを400pxに下げると、10×の削減 - 一部のブラウザ実装ではサンプルがまばらになりすぎて、エイリアシング:きらめくエッジ、布地やレンガのモアレパターン、失われた細かいディテールなどの回避策があります スケーリングを下げた: 半分を繰り返し (4000 → 2000 → 1000 → 500 → 400) 繰り返しますので、各ステップは半分のピクセルしか捨てません。 大幅な削減が予想よりも簡単にできたら、それが理由であり、2 回のパスで行うと修正されます。

Toolz.dev サイズ変更ツールは実際に何をしますか?

後で分かるよりも、正確に伝えたいと思います。 これは、キャンバスベースのリサイザーです。

1. ファイルは、オブジェクト URL を介してブラウザーに読み込まれます。 それは アップロードされていない- そこ' s それをアップロードするサーバーはありません。
2. ターゲット ディメンションで HTML キャンバスに描画されます。
3. キャンバスは、 PNG、JPEG、または ウェブP (損失のある形式の場合、品質はデフォルトで 0.9 です)。
4. 結果をダウンロードします。

そこから 3 つの結果が生じますが、ほとんどのツールには 1 つだけがマーケティング コピーにあります。

EXIF メタデータが削除されます。 キャンバスの再エンコードによって真新しいファイルが生成されます カメラモデル、レンズ、キャプチャ時間、そして - 重要なのは - GPS座標 生き残らないでください。 公開しているものはすべて、プライバシー機能であり、実際の機能です。携帯電話から直接写真を使用すると、撮影した場所の正確な座標が日常的に携帯電話から離れます。 おったら 必要 EXIF (たとえば、写真ポートフォリオの場合) は、明示的に保存するツールでサイズ変更します。 ソースがカメラ ロールから直接出てきた場合は、公開する前に出力方向を一目で確認します。

アニメーション GIF は 1 つのフレームとして出てきます。 キャンバスは1 つのフレームを描きます これを制限以外のものとして説明する正直な方法はありません - アニメーションのサイズを変更して動かし続ける必要がある場合、これはツールではありません。 (I& #39; ダウンロード後にそれを発見させるよりも、それをはっきりと言うことをお勧めします。)

アスペクト比をロックするということは、「埋めるまで」ではなく、「内側に収まる」ことを意味します。 比率をロックして幅と高さの両方を入力すると、画像が収まるようにスケーリングされます 以内 その箱はそのプロポーションを保ちながら。.1000 x1000 のターゲットを持つ16:9 の写真が出てくる 1000 x1000 ではなく、1000 x563. それはあなたのイメージを歪めることはありません - しかし、それはまたwon& #39; tは、正方形を埋めるためにそれをトリミングします. 長方形から正確な正方形が必要な場合は、サイズを変更するのではなく、トリミングが必要です.その区別は人々を絶えず混乱させ、それと #39; sは正確である価値があります。

アスペクト比は実際にどのように機能しますか?

アスペクト比は、ちょうど幅 ÷ 高さで、ペアで表されます。 計算は簡単で、最も一般的なサイズ変更エラーを防ぐため、頭の中でできるはずです。 押しつぶし。

欠落している側を見つけるには、比率を一定に保ちます。

new_height = new_width × (original_height ÷ original_width)

幅 1200 に変更された 4000×3000 の写真 (4:3) は、1200 × (3000/4000) = 1200 になります。 900 背が高い。 type 1200 と 800 代わりに、そして you've は 4:3 の画像を 3:2 に押しつぶしました - 顔が狭くなり、円が楕円形になり、誰もが何かを伝えることができます's がオフになっても、たとえそれができたとしても'何を言わないでください。 アスペクト比計算 これをあなたのために行い、あなたの比率も減らします。

これは、コピーではなく計算をチェックして、次の比率を上げ続けているものです。

その"1.91:1" row、それは毎回私をバグらせるので: 1200×628 は実際には1.91:1 ではありません. it's 300:157、または1.911. 適切に削減されました. 業界はそれを丸め、誰もが肩をすくめます. それは'実際には問題ではありません - しかし、もしあなたが'なぜ1200×628が'なぜきれいなものに分裂するのか疑問に思ったことがあるなら、それは'sなぜですか。

プラットフォームのピクセル仕様は変更されます。比率が変更されることはほとんどありません。 重要なキャンペーンについてブログ投稿 (このテーブルを含む) でディメンション テーブルを信頼するのではなく、プラットフォームの現在の仕様を確認してから、上記の比率を使用してヒットします。 数値がドリフトしても形状は安定しています。

Web 画像のサイズは、実際にどのくらいのサイズにする必要があり

あなたが管理する Web サイトの場合 - どこであなた'他の誰かではなく最大のコンテンツペイントのために最適化を再調整する' アップローダー - 推論は異なり、より優れています。

画像からではなく、CSS ボックスから始めます。 画像が実際にレイアウト内でレンダリングする幅を見つけます。 container's max width - the イメージ 気になるブレークポイントでの幅。 次に、Retina の場合は 2 倍にします。 それがあなたのエクスポートサイズです。 それ以上のすべてのバイトは、あなたが出荷に支払っており、ユーザーがダウンロードにお金を払っているため、目に見えるメリットはありません。

複数のサイズを提供します。 1 つの 2400px のファイルは、380 css ピクセルでレンダリングする電話にとって無駄です。 srcset これには正確に存在します。

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

ブラウザは、そのデバイスで鮮明に見える最小のファイルを選択します。 そしていつも設定 width あんど height 属性 - 画像が読み込まれる前にブラウザがスペースを予約できるようにするため、ページが飛び跳ねて累積レイアウト シフト スコアを壊すのを防ぎます。

最初にサイズ変更し、次に圧縮します。 これは、人々が後退する順序です。 4000px の画像を圧縮し、 そしたら 800px にサイズ変更すると、捨てようとしていたピクセルを最適化するのに労力を費やしたことになります。そして、保存していたピクセルに圧縮アーティファクトを焼き付けた可能性があります。最初に寸法をカットし、次に what' を圧縮します。 sは残しました 画像圧縮機。 とにかく、寸法はほとんどの場合、より大きな勝利です: 画像の両面を半分にすると削除されます 75% コンプレッサーが接触する前のピクセルの数。 私はそれについて深く掘り下げます 画像圧縮ガイド。

次に、適切な形式を選択します。 大まかに: 写真の JPEG、透明度または鮮明なテキストと線が必要な場合は png、web は基本的に Web 上のすべての場合は同等の品質で勝るからです。 ザ・ 画像フォーマット変換器 そのステップを処理します。 イメージ ツールの概要 ピースがどのように収まるかをカバーします。

Toolz.dev で画像のサイズを変更するにはどうすればよいですか?

1. を開きます 画像サイズ変更ツール。 アカウントもインストールも何もありません。
2. 画像を投入します。 ブラウザに直接読み込まれます。 nothing's をどこにでも送信する証拠が必要な場合は、「ネットワーク」タブをご覧ください。その's は、プライベート写真を貼り付ける画像ツールで実行する価値のあるチェックです。
3. 目標寸法を入力してください。 幅を入力します。比率をロックすると、高さが続きます。 これが画面の場合は、Retina を 2 倍にすることを忘れないでください。
4. 出力形式を選択してください- PNG、JPEG、または WebP.
5. ダウンロード。 ブラウザで生成され、ディスクに直接送信されます。

If you're producing the same image at several sizes, work from the biggest original every single time. don't resize the 1200px export down to 600px - go back to the original and export 600 from that.すでに失われたファイルの再エンコードはそれぞれ、損傷を複合化し、コピーのコピーが劣化するのと同じ方法で、それ& #39; sは、最終的な結果に表示される小さな規律です。

よくある質問

画質を損なわずに画像のサイズを変更できますか?

ダウンスケーリングはほとんど何も知覚できなくなります - you' 必要なくなったピクセルデータを破棄し、画面上の結果は鮮明に見えます ソフトウェアはキャプチャされなかったピクセルを補間する必要があるため、アップスケーリングは常に品質を失い、柔らかさや目に見えるアーティファクトは小さいものから上ではなく、常に最大のオリジナルから下に向かってサイズを変更します。

Retina スクリーンの画像をエクスポートする必要があるサイズは?

画像が表示されるサイズの 2 倍でエクスポートします。 レイアウトで 600×400 ボックスに画像が表示される場合は、1200×800 でエクスポートして、デバイス上でシャープな状態に保つようにします。 devicePixelRatio 2 倍を超えると、3 倍のディスプレイでも目に見えるメリットが最小限に抑えられるため、余分なバイトの価値はほとんどありません。

画像のサイズ変更で EXIF データは削除されますか?

はい、サイズ変更が HTML キャンバスを介して行われる場合 - Toolz.dev で行われるように - ツールは画像を新しいファイルに再エンコードし、EXIF メタデータは引き継がれません。つまり、カメラの詳細、キャプチャ時間、GPS 座標がすべて削除されます。公開の場合、これはプライバシー上の利点です。EXIF を保存する必要がある場合は、明示的にサポートするツールを使用してください。

アニメーション GIF のサイズを変更して、アニメーションを維持できますか?

キャンバスベースのリサイザーではありません。 Canvas は 1 つのフレームをキャプチャするため、出力は PNG、JPEG、または WebP 形式の静止画像になります。 すべてのフレームを保存しながらアニメーションのサイズを変更するには、専用の GIF 処理ツールが必要です。

画像を KB で特定のファイル サイズに変更するにはどうすればよいですか?

ファイルサイズは直接設定したものではありません - 寸法、フォーマット、圧縮品質から外れます 逆方向に作業します: 寸法を画像が実際に表示されているものに縮小し、写真の場合はPNGではなくWebPまたはJPEGとしてエクスポートし、次に品質をステップダウンして出力サイズを再チェックします。 " 100 KB&quot未満; のようなハードターゲットをヒットします。通常、そのループのパスは 1 つではなく 2 つまたは 3 つです。

画像をトリミングせずにサイズを変更するにはどうすればよいですか?

アスペクト比をロックしたままにします 幅と高さが元の比率に留まると、フレームのすべてのピクセルが保持され、スケールのみが変更されます トリミングは、ターゲットの形状がソースの形状と異なる場合にのみ避けられなくなります - 3:2 の写真を 1:1 のアバター スロットにフィッティングすると、空のスペースがレターボックス化されるか、画像の一部が切り取られることになります。

最初に画像のサイズを変更または圧縮する必要がありますか?

最初にサイズを変更してから圧縮します。寸法を縮小するとピクセルが完全に削除されます - 幅と高さの両方を半分にすると、それらの 75% が削除されます - これはほぼ常に、圧縮のみよりも大きなファイル サイズの勝利です。サイズを変更する前に圧縮すると、破棄しようとしているピクセルにかかる労力が無駄になり、アーティファクトを保持しているピクセルに焼き付けることができます。

サイズ変更とトリミングの違いは何ですか?

サイズ変更すると、画像全体の寸法が変更され、コンテンツがすべて維持されます。切り取りでは、画像の一部が切り取られて、フレーミングまたはアスペクト比が変更されます。長方形の写真から正方形が必要な場合は、アスペクト比をロックしたサイズ変更すると、画像を埋めるのではなく、正方形の内側に収まります。フレームを埋めるための切り抜きが必要です。

ブラウザで画像のサイズを変更するためのファイル サイズに制限はありますか?

何もアップロードされないので、サーバーによって課された制限はありません - 実用的な天井はあなたのデバイス& #39; s 利用可能なメモリです 大きなカメラファイルを含む典型的な写真は、即座にサイズを変更します 非常に大きな画像 (たとえば、非常に高解像度のスキャン) は、メモリに制約された電話で、少し時間がかかったり、読み込まれなかったりすることがあります。

正しい寸法にサイズ変更しても、画像がまだぼやけているのはなぜですか?

3 つのことを順番に確認してください。小さいオリジナルからスケールアップしたかどうか (修正不可 - より大きなソースを見つけた)、デバイスのピクセル比を考慮したかどうか (2 x 画面上の 600 px ファイルは 1200px である必要があります)、アップロードしたプラットフォームが再圧縮したかどうかです。 3 番目はソーシャル メディアで一般的で、プラットフォーム & #39;s の推奨寸法にアップロードすることで軽減するのが最適です。