ウェブサイトの画像圧縮: 写真を犠牲にすることなく軽量化

各写真はカメラから直接送信され、数メガバイトの重さがあるため、レシピ ページを開くのに時間がかかります。読者は、携帯電話の幅で食べ物をはっきりと見ることができれば十分です。基準に従って圧縮が行われている限り、ファイルの重量を減らすとエクスペリエンスが変わります。

品質パーセンテージよりも寸法が優先されます

画像がページ上で 800 ピクセルを占める場合、常に 6000 ピクセルのバージョンを公開する理由はありません。最初にサイズを変更すると、積極的に締めるよりも品質が低下することがよくあります。使用画像を圧縮する試着して、寸法と最終的な重量の両方を観察してください。

JPEG と WebP は写真に適しています。 PNG は、透明度のあるグラフィックスや画像でより意味をなす傾向があります。選択は、必要なコンテンツと互換性によって異なります。数値が小さい画像は、風景の許容可能な圧縮レベルでは見栄えが悪い可能性があります。

テストは画像が表示される場所で行う必要があります

ページ上でオリジナルと圧縮をフルサイズで、必要に応じて明るい画面と暗い画面で比較します。面、製品の境界線、グラデーション、インライン文字を確認します。最も一般的な欠陥は、目に見えるブロック、二重輪郭、均一領域の斑点です。

名前、バージョン、責任

次のようなわかりやすいファイル名を採用します。ケーキ-チョコレート-スライス.webp、写真が見られない人のために内容を説明する代替テキスト。オリジナルのバージョンをライブラリに保存してください。大量の画像を公開する場合は、幅を標準化し、低速接続での読み込みを比較してください。適切に圧縮するとは、快適で理解しやすい最小のバージョンを見つけることです。

ページの重みは画像の合計です

写真を 3 MB から 280 KB に縮小すると、大幅な節約になりますが、このサイズの画像 20 枚を含むギャラリーには、依然として数メガバイトが必要です。表紙サイズ、サムネイル、記事画像、大きな画面用のバージョンなどのセットをご覧ください。すべてのスペースに同じ巨大な写真を投稿すると、訪問者のデータが無駄になります。プラットフォームがレスポンシブ イメージをサポートしている場合は、ディスプレイ サイズに比例したバージョンを提供します。

また、編集中に連続して圧縮することも避けてください。すでに縮小された JPEG を誰かが保存し、次の編集者がそれを再度圧縮すると、損失が累積します。元の写真の高品質のコピーを、数か月後に見つけられるように名前と組織を付けて保管してください。こうすることで、すでに詳細が失われたファイルに依存することなく、レイアウトの変更に応じて新しいサイズを生成できます。