画像圧縮では、公開先が本当に必要とする細部を残しながらファイルサイズを小さくすることが大切です。Webサイトのヒーロー画像、メール添付、SNSのサムネイルでは適した品質設定が異なります。まずオンライン画像コンプレッサーを開き、元画像と出力サイズを比べ、圧縮後の画像を確認するまで元画像を保管してください。
画像をオンラインで圧縮する方法
1. 元画像を選ぶ
できるだけ元のJPG、PNG、WebPを使います。何度も書き出した画像は圧縮ノイズがあり、再エンコードで目立ちやすくなります。元画像を1つ保存しておくと、あとでより大きく鮮明なバージョンを作るときにも便利です。
2. 画像コンプレッサーを開く
画像コンプレッサーを開き、画像を選択またはドロップします。ツールはブラウザ内でファイルを処理するため、圧縮のために元画像をサーバーへアップロードする必要はありません。大きな画像はブラウザのメモリと処理時間を使うため、入力上限に近い場合は不要なタブを閉じます。
3. 品質と形式を選ぶ
品質スライダーで見た目の忠実度とファイルサイズのバランスを決めます。高い設定は細部を残し、低い設定は小さなファイルを作りますが、文字、髪、輪郭、グラデーションにアーティファクトが出ることがあります。多くの写真では中間値から始められますが、適した値は表示サイズと内容によって変わります。
画像に合わせて出力形式を選びます。
- JPG は透明度が不要な写真に実用的です。
- PNG は可逆的な細部と透明度を保ちますが、すでに最適化された画像はあまり小さくならないことがあります。
- WebP は写真や多くのグラフィックを小さなWeb配信用ファイルにできます。公開前に元画像と比べてください。
4. ダウンロード前に比べる
コンプレッサーは元のサイズ、新しいサイズ、削減率を表示します。実際に使う表示サイズでプレビューを確認し、小さな文字、商品ラベル、顔、透明な輪郭、滑らかなグラデーションをチェックします。極端に拡大した状態だけで品質を判断しないでください。
画像ファイルをさらに小さくする方法
圧縮が最初の手順とは限りません。レイアウトに必要な幅や高さより大きい場合は、先に画像リサイズを使います。不要なピクセルを減らす方が、品質を下げるより大きな削減になることがあります。リサイズ後に1回だけ意図的に圧縮し、その出力を配信用にします。
不要な余白がある、または被写体の位置が悪い場合は圧縮前にトリミングします。最終構図に必要ないピクセルを削除するには画像クロッパーを使います。
目的は数字を最小にすることではありません。圧縮しすぎて文字が読めない、輪郭がブロック状になる、グラデーションにバンディングが出る画像は、少し大きくても速く読み込める画像より使いにくくなります。
画像を2MBや500KBにするには？
まず画像を公開先に必要な最大サイズへリサイズし、画像コンプレッサーで品質を少しずつ調整しながらファイルサイズを比べます。最終サイズは元画像の内容と寸法で変わるため、品質スライダーで確認しながら目標に近づけます。
PNGを圧縮しても大きい理由
PNGは可逆圧縮で、透明背景、UIグラフィック、ロゴ、フラットなイラストに向いています。写真のように情報を捨てる圧縮ではないため、細部の多いPNGは処理後も大きい場合があります。透明度やピクセル単位の輪郭が不要なら、WebPの出力を比べてください。
すべてのPNGを自動的に変換する必要はありません。透明な商品切り抜き、ロゴ、細い1ピクセルの線を含むグラフィックはPNGの方がきれいなことがあります。実際のページで比べ、見た目とサイズの両方を満たす形式を選びます。
Webサイトとメール用に画像を圧縮する
Webサイトでは、画像が表示される最大のピクセル寸法に合わせてから配信用コピーを圧縮します。大きなカメラ元画像をブラウザが転送してから縮小する状況を防げます。説明的なファイル名と意味のある代替テキストも使ってください。圧縮は転送を改善しますが、アクセシビリティの代わりにはなりません。
メールでは添付またはインライン画像の上限を確認し、スマートフォンで結果をテストします。小さな文字や商品ディテールには、装飾的な背景より大きな出力が必要な場合があります。まだ大きい場合は、品質を下げる前にリサイズします。
画像圧縮でよくある問題
圧縮後の画像がぼやける
品質設定が低すぎるか、元画像がすでに小さな圧縮コピーかもしれません。品質を上げ、元画像から始め、必要なら表示幅に合わせてリサイズしてから再度圧縮します。
画像がほとんど小さくならない
元画像がすでに最適化されているか、PNGから削除できるデータが少ない可能性があります。写真や透明度が不要なグラフィックはWebPを試し、表示先より寸法が大きすぎないか確認します。
文字や輪郭がブロック状になる
高コントラストの鋭いディテールは非可逆圧縮の影響が先に出ます。品質を上げ、透明で輪郭が重要なグラフィックにはPNGを使い、実際の表示サイズで確認します。
同じファイルを繰り返し圧縮してもよいですか？
おすすめしません。非可逆の書き出しを重ねるとアーティファクトが増え、効果も予測しにくくなります。元画像を保管し、サイズや形式を変えるときは新しい配信用コピーを作ります。
よくある質問
画像をオンラインで圧縮するには？
オンライン画像コンプレッサーを開き、JPG、PNG、WebPを選択して品質と出力形式を調整します。元画像と圧縮後のサイズを比べ、プレビューを確認してからダウンロードします。
画像を圧縮すると品質は下がりますか？
下がることがあります。非可逆圧縮は小さなファイルのために情報を削除するため、低い品質設定では細部に影響します。実際の表示サイズで比べ、重要な細部が失われたら設定を上げてください。
見た目の品質を保って画像を小さくするには？
大きすぎる画像を最大表示サイズにリサイズし、適した形式と中程度の品質を選びます。元画像から1回だけ意図的に書き出すと、結果を予測しやすくなります。
PNGを圧縮しても大きいのはなぜですか？
PNGは可逆形式で、元から効率よくエンコードされている場合があります。透明度やピクセル単位の輪郭が不要ならWebPを比較し、それ以外では画像をリサイズするかPNGを維持します。
ブラウザでの画像圧縮はプライベートですか？
OpenVideoMakerの画像コンプレッサーは、選択した画像をブラウザ内で処理します。圧縮のために元画像をサーバーへ送信しませんが、大きな画像には十分なメモリが必要です。
画像ツールを続けて使う
寸法は正しいのにファイルが大きい場合は画像コンプレッサーを使います。ピクセル数が多すぎる場合は先に画像リサイズを使い、構図を変える場合は画像クロッパーを使ってください。