ブラウザ内の画像のサイズを変更、圧縮、変換します

初めてクライアント' s ホームページが失敗しました コア Web Vitals 監査のせいで、犯人は 1 枚のヒーロー画像でした。デザイナーが Figma から直接エクスポートし、WordPress メディア ライブラリにドロップした 4.2 MB PNG でした。幅 1200 px で表示され、3800 px で保存されていました。ページはスロットルされたモバイル接続にペイントするのに 11 秒かかりました。 I'd が発送しました。

それは WP Adminify の時代で、後に作成したすべての画像ツールを形作った何かを教えてくれました。 Toolz.dev: ほとんどの画像の問題は編集の問題ではなく、 配管工 問題。 寸法が間違っていて、フォーマットが間違っていて、圧縮パスがありません。 Photoshop を修正する必要はありません。 1 つのことをうまく実行し、高速に実行できる 3 つまたは 4 つの小さなツールが必要です。

このガイドでは、毎日の画像操作をすべて説明します - サイズ変更、圧縮、フォーマット変換、および背景の削除 - それぞれの背後にある理由と、I' の間違いをスキップできるようにします。 Toolz.dev 上のすべてのツールは、ブラウザで画像を完全に処理します。あなたの写真がサーバーに触れることはありません。これは、クライアントの仕事や個人の写真を処理する際に人々が気づくよりも重要です。

tl;dr: 一般的な仕事の場合、100% ブラウザー内に滞在できます。 画像のサイズ変更 寸法を修正するには、 画像圧縮 ファイルサイズをカットするには、 フォーマット変換 PNG/JPEG/間を移動するにはウェブP/AVIF、そして バックグラウンド リムーバー クリーンな製品とプロファイルのショット用 アップロードするものはありません - ファイルはディスクからブラウザタブに移動し、そこに残ります。 正しい最適化順序は、ほとんどの場合、サイズを変更してから変換してから圧縮します。

画像をアップロードするのではなく、ブラウザで処理するのはなぜですか?

ほとんどの「無料のオンライン画像ツール」は、下にある同じように機能します。ファイルをアップロードし、サーバーがそれを処理して、結果をダウンロードします。 Web ページは、どこかのレンタル マシンよりも薄いスキンです。 そのモデルには 3 つの問題があり、プライバシーは最も大きな問題です。

プライバシーは明白な心配です。 emborgation、idの写真、内部ダッシュボードのスクリーンショット、個人的な映像の下のプロダクト ショット - 人々が最も頻繁にサイズを変更するか、または圧縮する必要があるイメージはまさにshould't見知らぬ人's臨時雇用者ディレクトリに座るべきである"1 時間後に削除されたファイル" できる約束です't監査.

レイテンシーの方がコストが低い オフィスWi-Fi経由で20 MBのカメラ画像のバッチをアップロードすると、サイズ変更自体よりも時間がかかります ブラウザベースのツールは往復をスキップします - the "upload" ファイルがメモリに移動するだけなので、即座です。 I' m が製品写真のフォルダーを処理すると、その違いはコーヒーブレイクと連続フローの違いです。

そして、誰も言及しない壁があります: ファイル サイズのキャップ、日次制限、[Pro にアップグレードして 10 MB を超える画像を処理する] を無料の層で処理します。 クライアント側のツールには 1 つの制限があり、マシンの RAM です。

タブでこれらすべてを行う技術は、何年も前から標準化されてきました。 HTML <canvas> エレメントとその 2D コンテキストは、サーバーなしでラスター イメージをデコード、リサンプリング、および再エンコードできます。 ブラウザのもの Image デコーダは、JPEG、PNG、WebP、およびますます avif を処理します。 インターネット経由で写真を送信して、800 ピクセル幅にするためだけに写真を送信するという技術的な理由はもはやありません。

画像のサイズを適切な寸法に変更するにはどうすればよいですか?

サイズ変更は、私がほとんどの場合に到達する操作であり、寸法を上流にすることで、ほとんどのパフォーマンスの問題をダウンストリームで回避できます。 早くから内面化したいと思うルール: 画像が表示される最大サイズよりもはるかに大きな画像を保存しないでください。

上のワークフロー 画像のサイズ変更 ツール:

1. 画像をツールにドラッグするか、クリックして参照します。
2. ターゲットの幅と高さをピクセル単位で入力します。
3. 意図的にストレッチしたくない限り、アスペクト比をロックオンしたままにしてください。アスペクト比をオンにすると、幅を変更すると高さが自動的に調整されるため、何も歪みません。
4. リサンプリング方法を選択します (写真の場合は Bicubic が安全なデフォルトです。ピクセル アートの場合は、鮮明に保ちたい場合は、最近傍) です)。
5. 処理してダウンロードします。

記憶する価値のある 1 つの数字は Retina マルチプライヤーです。 800 px で表示されるスロットは、画像を約 1600 px で保持する必要があるため、2 つの x スクリーンで鮮明に保たれます。初めて出荷した 3800 px のモンスターではなく、表示サイズを 5 倍ではなく 2 倍にします。

これは、「これをどの幅にするべきか」という問題がすべてのプロジェクトで出てくるため、私が固定しているユースケースのチート シートです。

コード レビューで今でも見られる 1 つの間違い: アップスケーリング。 イメージを作る 大きい そのソースcan& #39; tは、キャプチャされたことがなかった詳細を発明するよりも - ツールは、単に新しいピクセルを補間し、過去約200% あなたは柔らかく、どろどろの結果を得る場合、クライアントは、500 pxのロゴを送信し、2000 pxでそれを必要とする場合、正直な答えは、 " ベクトルソースから再エクスポート, " ではありません " それをアップスケールし、希望. "

画像を壊さずに圧縮するにはどうすればよいですか?

圧縮は、実際のページの重量を節約する場所です。 画像は通常、Web ページで最も重いものであるため、ほとんどのサイトでできる最も効果的なパフォーマンスの仕事を縮小することができます。

2 つの種類があり、その区別によってすべてが決まります。

損失のある圧縮 人間の目が見逃す可能性が低いデータを捨てる - 微妙な色の変化、高周波の質感 80% の品質のJPEGは、通常の表示サイズで目に見える差がなく、最大品質で同じ画像よりも60~70% 小さくなることが多い写真に欲しいものです。

ロスレス圧縮 データを捨てずにデータをより効率的に再配置します; 解凍された画像はピクセルごとに同一です。 PNG はこのように機能します。ロゴ、スクリーンショット、図、鮮明なテキストやハードエッジを持つものなど、すべてのピクセルが重要な場合はそれを使用してください。

ザ・ 画像圧縮 ツールは、あなたがコミットする前に、品質レベルを設定し、結果をプレビューし、並んでファイルサイズを比較することができます. web写真のための私の正直なデフォルトは、80% 品質です - I& #39; 多くのページにわたって低と高をテストしました, そして、80 は、私は実際の表示サイズで元のから圧縮バージョンを見分けることができる停止ポイントです完全な推論が必要な場合、 画像圧縮ガイド なぜその数が続くのかについて深く掘り下げています。

私が犯した間違いは、恥ずかしいほど長いものです: 圧縮 前に サイズ変更。 3800 px の画像を圧縮してから 1200 px にリサイズすると、破棄しようとしているピクセルに圧縮作業をすべて費やしました。最後のファイルは、他の方法で行うよりも大きくて悪くなります。 最初にサイズを変更してから、小さい画像を圧縮します。 いつも。

実際にどの画像形式を使用する必要がありますか?

フォーマット ランドスケープには、以前よりも多くの優れたオプションがあります。これは、うれしい問題です。 これが、マーケティングの面白さなしで、私が決める方法です。

jpeg は普遍的な損失の多いフォーマット - どこでもサポートされており、写真に最適で、透明性がありません。 It' s の安全なフォールバックと、新しいフォーマットに対するクライアントのサポートがコイン投げである電子メールの適切な呼び出しです。

png 完全な透明性でロスレスです。 スクリーンショット、ロゴ、テキストや鋭いエッジのあるものなら何でも、これは正しい選択です。 それは 間違った 写真の選択 - PNG として保存された写真は、JPEG と同じ写真よりも何倍も大きくなり、目に見えるメリットはありません。

ウェブP 2026 年の Web のデフォルトです。 ロスシーとロスレスの両方を実行し、透明性をサポートし、同等の品質で JPEG よりも約 25 ～ 35% 小さく実行されます。 現時点では、ブラウザのサポートは事実上普遍的です。 新しいサイトの画像のフォーマットを 1 つ選択する必要があるとすれば、これで終わりです。

avif さらに強く圧縮します - 一般的にJPEGより約50% 小さい - グラデーションと細かいテクスチャの優れた処理 トレードオフはエンコードが遅く、that& #39; sをサポートしていますが、非常にどこでも良いので、aでトップチョイスとして使用しています <picture> 下に WebP がある要素。

svg isn& #39; ラスター形式です。 - it' s ベクトルなので、ぼやけたピクセルを 1 つも使わずに任意のサイズにスケールします。ロゴ、アイコン、イラストに使用します。don'写真をそれに変換しようとします。

これらの間で変換するのは、2 クリック ジョブです。 フォーマット変換: 画像をドロップし、ターゲット形式を選択し、損失が出た場合は品質を調整して、ダウンロードします。 私が実際のサイトに出荷するパターンは、ブラウザ独自のフォーマット ネゴシエーションを使用します。

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>

ブラウザは、理解した最初のフォーマットを選択するため、最新の電話機は AVIF を取得し、古い電話機は WebP を取得し、古いものは JPEG で動作します。 明示的なことに注意してください width あんど height- それらのaren' t装飾、彼らはレイアウトスペースを予約し、画像がロードされるときにページがジャンプするのを防ぎます。これは累積レイアウトシフトの勝利です。

ブラウザで画像の背景を削除するにはどうすればよいですか?

バックグラウンドの削除とは、Photoshop のペン ツールを使用した、購読ツールまたは 20 分のいずれかを意味していました。 現在、ブラウザー タブで実行できるほど小さい機械学習モデルが、一般的なケースを数秒で処理します。

ザ・ バックグラウンド リムーバー 画像を分析し、被写体と背景を分離するピクセルマスクを構築し、透明なアルファチャンネルを備えたPNGを出力します アップロード、少し待って、エッジを確認して、ダウンロード 全体はローカルのままです - モデルはマシン上で実行されるため、敏感な製品ショットでも離れることはありません。

それはあなたがそれに戦いのチャンスを与えるとき、それは最高に動作します: でも、照明、主題とwhat& #39; sの背後にまともなコントラスト、および合理的に高解像度のソース. hair、fur、およびwispyエッジはまだこれらのモデルが苦労している場所です - 結果が誰かの周りにハローを持っている場合& #39; sの頭、that& #39; s期待する失敗モード、あなたが離れて設定することができますバグではないパッケージ製品のようなきれいなエッジの被験者は、ほぼ完璧に出てくる。

Web 用の画像を最適化するための正しい順序は何ですか?

この順序をスキップしたり、順番を外したりするたびに、支払いをしました。 この順序で実行すると、出力は小さくて見栄えがよくなります。

ステップ1 - 表示寸法にサイズを変更します. 画像がレンダリングする最大サイズを計算し、Retina の場合は 2 倍にします。 リサイズする それに。 通常は見られないピクセルを削除するため、この 1 つのステップは通常、ファイル サイズの方が多くなります。

ステップ2 - 右の形式に変換します. 変換する 写真を WebP (またはフォールバックのある AVIF) に写真を表示します。 ロゴとスクリーンショットを PNG として残します。 本物のベクターアートをSVGとして残してください。

ステップ 3 - 目標の品質まで圧縮します。 圧縮する 損失の多い Web 画像の場合は約 80% で、実際のサイズで結果を確認します。

ステップ4 - HTMLで責任を持ってサービスを提供します. 使い srcset そのため、ブラウザはデバイスに適したサイズをダウンロードして追加します loading="lazy" 折り目下の方には、最初の塗装をブロックしないようにします。

維持する価値のある緩やかなパフォーマンス予算: 200 KB 未満のヒーロー画像 (最大のコンテンツペイントを駆動するため、最も重要)、100 KB 未満の通常のコンテンツ画像、30 KB 未満のサムネイル、および 10 KB 未満のロゴ - SVG と you' を使用します。通常、試すことなくそれを打ち負かします。これらの aren't 法則、they're 匂いテスト。単一の画像がバケツを越えて吹き飛ばされた場合、それ's は 2 回目の検査に値します。

よくある質問

最高の無料オンライン画像ツールは何ですか?

それは仕事によって異なります。そのため、Toolz.dev は、肥大化したエディターではなく、それらを集中ツールに分割します。 寸法は、 画像のサイズ変更。 ファイルサイズとして、 画像圧縮。 フォーマットを変更するには、 フォーマット変換。 対象を分離するには、 バックグラウンド リムーバー。 4 つすべてが無料で、サインアップする必要はなく、画像は完全にブラウザで処理されます。

品質を損なわずに画像のサイズを変更するにはどうすればよいですか?

ダウンスケーリング - 画像を小さくする - ソースは小さいサイズのニーズよりも詳細であるため、品質にほとんどコストがかかりません。最もスムーズな結果を得るにはバイキュービック リサンプリングを使用します。アップスケーリングは危険な方向です。ツールはピクセルを発明する必要があるため、品質が低下し、元のサイズの約 200% を過ぎると柔らかさが明らかになります。はるかに大きなバージョンが必要な場合は、小さなコピーを拡大するのではなく、元のソース ファイルに戻ります。

Web サイトにはどの画像形式を使用すればよいですか?

写真やほとんどのコンテンツ画像にWebPを使用 - it' s およそ25 ~ 35% 2026 年にほぼユニバーサルサポートでJPEGよりも小さい ロゴやアイコンにSVGを使用することで、どのサイズでもシャープな状態を維持できます PNGを使用するのは、透明度のあるロスレス品質が必要な場合のみです 最大圧縮が必要な場合にAVIFにリーチし、WebPフォールバックとペアリングできます <picture> 要素。

圧縮前または圧縮後にサイズ変更する必要がありますか?

最初にサイズを変更してから圧縮します。 大きな画像を圧縮してから縮小すると、サイズ変更中に破棄されるピクセルの労力が無駄になり、最終的なファイルは、正しい順序で実行した場合よりも大きく、より低品質になります。 最初にサイズ変更すると、コンプレッサーが小さい画像で動作し、最小の、最もクリーンな結果が得られます。

個人写真やクライアント写真を使ってオンライン画像ツールを使用しても安全ですか?

ほとんどのオンライン画像ツールは、写真をサーバーにアップロードして処理します。これは、プライベートでも NDA の場合でも、非常に重要な問題です。 Toolz.dev のイメージ ツールは、Canvas API を使用してブラウザー内のすべてのクライアント側で処理し、バックグラウンドを削除するために、ブラウザー内 ML モデルを処理します。 画像はデバイスから離れることはありません。そのため、個人の写真、クライアントの作業、機密の製品のショットに安全です。

WebP と AVIF の違いは何ですか?

どちらも圧縮で JPEG と PNG を上回ります。 WebP は、効果的にユニバーサル ブラウザをサポートする JPEG よりも約 25 ～ 35% 小さいため、実用的なデフォルトになります。 AVIF は圧縮をさらに推し進め、通常は JPEG よりも約 50% 小さいため、勾配とテクスチャをより適切に処理しますが、エンコードはより遅く、isn&#39 をサポートします。 #39; まだどこでも一般的なアプローチは、最初に WebP をフォールバックとして AVIF に提供し、すべてのブラウザがデコードできる最良の形式を取得できるようにすることです。

画像から背景を無料で削除するにはどうすればよいですか?

を開きます バックグラウンド リムーバー、画像をドロップすると、ブラウザ内モデルが被写体を検出し、背景を透明に置き換えて、アルファ チャネルの PNG を提供します。 均一な照明と、被写体と背景の明確なコントラストで最もよく機能します。 フライアウェイ ヘアなどの細かい部分は、自動ツールの場合でも難しいケースです。結果に頼る前にエッジを確認してください。

Web サイトの画像がページの速度を落とすのはなぜですか?

ほとんどの場合 it' s 3 つのもののいずれか: 画像は表示するよりもはるかに大きく保存されます, it' s 非圧縮PNG写真のような古い形式で, またはそれは圧縮パスを通して実行されなかった順にそれらを修正 - 表示寸法にサイズ変更, WebPに変換, その後、約80% の品質に圧縮 - と you& #39; l は通常、あなたの最大のコンテンツペイントスコアに直接表示される半分以上の合計画像重量をカットします。

100 KB 未満の画像を取得するにはどうすればよいですか?

この順序で作業し、すぐに停止します you& #39; re 制限の下: 画像が実際に表示する寸法にサイズを変更し、WebPに変換してから、80% の品質で圧縮します。 1600px幅の典型的な写真の場合、その組み合わせは60と120 KBの間のどこかに着地します。 you& #39; まだ終わったら、寸法をさらに縮小する前に品質を70%に落とします。70%での品質損失は、目に見えて小さい画像よりもはるかに目立ちません。

HEIC の写真を iPhone から JPG に変換できますか?

はい。 .heic ファイルを フォーマット変換 そして、それを JPG、PNG、または WebP としてエクスポートします。HEIC は iPhone がデフォルトで保存する形式であり、圧縮率は良好ですが、ほとんどの Windows アプリ、古いブラウザ、およびコンテンツ管理システムは依然として HEIC を開くことを拒否しています。そのため、JPG または WebP に変換する必要があります。どこにでもアップロードする前にアップロードすることが、通常、安全な方法です。