ウェブページの画像圧縮方法

なぜ画像の最適化がウェブサイトを向上させるのか

画像は通常、ページがダウンロードするデータの大部分を占めます。大きなファイルはコンテンツの表示を遅らせ、モバイルデータを多く消費し、訪問者の体験を悪化させる可能性があります。最適化は、寸法、フォーマット、圧縮レベルの三つの判断を組み合わせることです。

すべての画像に完璧な制限は存在しません。サムネイルは画面全体を占める写真よりもずっと軽量であるべきです。目的は、実際に使うスペースに対して十分なピクセルと品質を提供し、ブラウザに使用しない情報をダウンロードさせないことです。

推奨されるステップバイステップのフロー

1. デザイン内で画像が現れる最大幅を特定します。
2. 圧縮前にフレームをトリミングして、削除される部分を残さないようにしましょう。
3. 内容や透明性の必要性に応じてフォーマットを選択してください。
4. ファイルを開くには 画像圧縮アプリ そして中〜高品質を試してください。
5. ファイルサイズを比較し、テキスト、境界、顔、グラデーションを確認します。
6. 結果を公開し、モバイルとデスクトップでページを確認します。

寸法:必要以上にピクセルをアップロードしないでください

カードが幅600ピクセルの画像を表示する場合、5000ピクセルの写真を読み込むのは通常無駄です。ブラウザは視覚的には縮小しますが、その前にファイル全体をダウンロードする必要があります。デザインで必要な最大サイズに近いバージョンを用意してください。

高密度スクリーンの場合は約2倍の大きさのバージョンを提供するのが有用かもしれませんが、理想的にはレスポンシブ画像を使い、 SRCSET y サイズ。こうすることで、各デバイスが同じ巨大なファイルではなく、適切なバリアントをダウンロードできます。

どのフォーマットを選ぶか

• JPG: 透明でない写真に適した互換性と合理的なサイズ。
• WebP: は写真やウェブグラフィックに有用です。透明性を維持し、コンパクトなファイルを提供します。
• PNG: 透明度、鮮明なテキスト、シンプルなグラフィックに適しており、写真ではサイズが大きくなることがあります。
• SVG: ファイルが安全でデザインがベクターとして作成された場合、ロゴやベクターアイコンに理想的です。

フォーマット変換してもマイナーファイルが保証されるわけではありません。結果を常に比較し、最も効率的なフォーマットである場合は元のフォーマットを保持しましょう。参照 JPG、PNG、WebPの比較 どれを選ぶかわからない場合

圧縮品質の選び方

まずは見た目を重視するフィットから始めて、徐々に下に進めていきます。写真はインターフェースキャプチャや図、小さなテキストよりも圧縮に強いです。もしハローやブロック、ぼやけたエッジが見えたら、画質を上げるか別のフォーマットを試してください。

ファイルを評価する際には、拡大ビューだけでなくページ内で確認してください。300％で見えるわずかな違いは、通常サイズでは気にならないかもしれませんが、名刺上で文字が読めない場合は実際の問題です。

圧縮は良い実装の代わりにはなりません

ファイルを最適化するだけでなく、属性でスペースを予約します 幅 y の身長 コンテンツのジャンプを避けるために。最初の表示ブロック外にある画像には遅延読み込みを使用しますが、ページを理解するために必要なメイン画像は遅らせないでください。

名前付きバージョンファイルに対して長いキャッシュを設定し、CSSによって同じ画像を複数の解像度で読み込まないようにすることも推奨されます。これらの決定はサイトの変更を必要としますが、圧縮による節約を補完します。

よくある間違い

サイズを決める前に圧縮してください

リサイズを後から行うと、ファイルを二度処理することになり、劣化が蓄積する可能性があります。まず構図と寸法を決め、最後に圧縮してください。

低品質のスクリーンショットをJPGに変換してください

細かい文字や線はにじみを作ることがあります。PNGやWebPを高画質で試してみて、重さを比較してみてください。

小さい画像をヘッダーとして使用する

拡大しても詳細は復元されません。十分に大きなフォントから始まり、そのバージョンから小さなバリエーションを生成します。

よくある質問

ウェブ画像はどれくらいの重さが求められる?

寸法、重要性、複雑さによります。普遍的な数値を追うのではなく、最終サイズで品質が許容範囲内に収まる最小の重さを基準として使用してください。

すべての画像をWebPに変換する必要がありますか?

必ずしもそうではありません。WebP は有用ですが、単純な PNG や既に最適化されたファイルは改善されないことがあります。サンプルを変換し、測定し、元のファイルを保持してください。

画像を圧縮するだけで位置取りは改善しますか?

経験とパフォーマンスに役立ちますが、配置は有益なコンテンツ、クロール、リンク、検索意図、その他多くのシグナルにも依存します。圧縮は、よく準備されたウェブの一部です。