重要な詳細を失わずに商品画像を圧縮する方法

商品画像を圧縮するには、配信先のニーズに合わせたサイズの配信コピーを作成し、受け入れられる形式を選択し、顧客が見るべき詳細とエクスポートを比較します。オリジナルは保持してください。配信先がファイルをリサイズまたは再圧縮する可能性があるため、アップロード前だけでなくアップロード後も結果を判断してください。すべての商品画像に適用できる単一のキロバイト目標はありません。

無地の背景にあるシンプルなボトルと、4コマのイラスト広告では、異なる失敗点があります。ボトルはラベルの詳細を失う可能性があり、広告は細いパネル線や小さな文字を失う可能性があります。重要な情報が残っている場合にのみ、最小のファイルが役立ちます。

寸法、形式、ファイルサイズを区別する

ピクセル寸法は画像の幅と高さを表します。ファイルサイズは、保存または転送する必要があるバイト数を表します。形式と圧縮は、それらのピクセルがどのように表現されるかを決定します。ピクセルやエンコーディングを変更せずにDPIなどの解像度ラベルを変更することは、ウェブ画像を軽くするための実用的な方法ではありません。

web.devの画像パフォーマンスガイドは、画像の配信を表示サイズに合わせ、不要な画像バイトを削減する方法を説明しています。レスポンシブ配信は、異なる画面に異なるソースサイズを提供できます。これはウェブサイトの機能であり、巨大なファイルをアップロードするだけでは、正しいより小さなバージョンが電話に届くことを保証するものではありません。

ご自身のストアの場合、ブラウザで実際にダウンロードされるサイズを検査してください。マーケットプレイスやソーシャルプラットフォームの場合、現在のアップロード要件と最終プレビューを確認してください。これらは異なる配信環境です。

画像と配信先に合った形式を選択する

MDNの画像形式リファレンスは、JPEG、PNG、および最新のウェブ形式の機能を文書化しています。以下は実用的な選択ガイドであり、特定のアップロードフォームがすべての形式を受け入れることを保証するものではありません。

ファイルをリネームして写真を別の拡張子に変換しないでください。選択した形式を実際にエンコードするツールを介してエクスポートしてください。また、ロスレスエクスポートは、以前のロスありエクスポートによってすでに破棄された情報を復元することはできません。

3つのコピーを比較する

架空のネイビーのデスクオーガナイザーの4コマ広告を例にとります。これには、布地のテクスチャ、小さな白いロゴ、細いパネルの仕切り、そして「Room for the essentials」という文字が含まれています。同じオリジナルから3つの配信コピーを準備します。1つは保守的な品質設定、1つは中程度の設定、もう1つはより小さな候補です。

この比較では同じピクセル寸法を使用し、複数の変更を一度に行うのではなく、圧縮をテストするようにしてください。形式、エクスポート設定、および結果のバイト数を記録します。品質数値はエンコーダーに固有であり、あるツールでの「80」が別のツールでの「80」と一致する必要はありません。

各コピーを顧客が見るサイズで比較します。次に、損傷箇所を見つけるために短時間ズームインします。極端な拡大でしか見えない欠陥は、意図された配置には問題ないかもしれませんが、通常サイズで読めない文字は問題となります。

3つのバージョンすべてが品質が低いように見える場合は、オリジナルと表示サイズを確認してください。圧縮は、構成ですでに小さすぎた文字の問題を解決することはできません。

1つのファイルだけでなく、ページ全体の予算を立てる

8つの商品画像をすぐに読み込むページを想像してみてください。仮に各画像が600 KBの場合、それらの画像は10進単位で合計約4.8 MBになります。各画像が180 KBの場合、合計約1.44 MBになります。この計算は累積転送サイズを示しており、測定された読み込み時間の改善や推奨される普遍的な制限ではありません。

実際の体験は、どの画像が最初に読み込まれるか、接続状況、キャッシュ、その他のページリソース、およびウェブサイトの画像処理にも依存します。ページの下にある大きな画像は、サイトがその読み込みを遅延させる場合、初期転送の一部ではない可能性があります。

この計算を使用して、調査すべき箇所を見つけてください。最初の製品写真がすでに鮮明で小さいにもかかわらず、12枚の隠れたギャラリー画像がフル解像度でダウンロードされる場合、最初の写真にさらに積極的な圧縮をかけるのは誤った解決策かもしれません。

公開されたコピーを検査する

選択した候補をアップロードし、顧客向けの配信先を開きます。そのコピー、エッジ、色を配信ファイルと比較します。より広いビューだけでなく、電話サイズのレイアウトも確認してください。プラットフォームはアップロードを受け入れた後、画像をトリミングまたは再圧縮する可能性があります。

小さな配信記録を保持してください：元のファイル名、エクスポート寸法、形式、結果のバイト数、配信先、バージョン。公開された画像が見劣りする場合、これにより、品質の低いオリジナル、エクスポートの問題、および配信先の変換を区別しやすくなります。

Panelly Studioで作成された4コマクリエイティブの場合、最終画像をダウンロードし、通常の画像ツールで配信先固有の圧縮を準備してください。Studioがここで説明されているすべての形式やエンコーダー設定を公開しているとは限りません。将来の配置のために、完全なオリジナルを保管しておいてください。

よくある質問

すべての商品画像を100 KB未満にするべきですか？

配信先固有の予算と視覚的な比較を使用してください。固定された制限は、詳細な画像には厳しすぎ、小さなサムネイルには不必要に寛大である可能性があります。個々のファイルだけでなく、ページ全体も確認してください。

同じJPEGを繰り返し圧縮できますか？

各新しい配信コピーは、保持されているオリジナルから作成することを推奨します。繰り返しロスあり保存を行うと、損傷が蓄積され、重要な詳細がいつ失われたかを特定するのが難しくなる可能性があります。

アップロード後に画像が悪くなるのはなぜですか？

配信先がそれを変換する可能性があります。オリジナル、エクスポートされたコピー、および顧客に表示されるバージョンを比較してください。この3者比較により、次の修正をどこに集中すべきかが特定されます。

情報源と参考文献

• web.dev 画像パフォーマンス
• MDN 画像形式