画像の最適化

画像によるパフォーマンスへの影響を最小限に抑える方法は、次のとおりです。

• 使用する画像数を減らして、背景のテクスチャーを小さくします。
• 可能な場合は、画像の代わりに CSS を使用します。
• 個別の画像の代わりに CSS スプライトを使用します。CSS スプライトを使うと、ボタンやアイコンなどよく似たサイズのグラフィックを 1 つのファイルにまとめることができます。その後、CSS の background-image プロパティや background-position プロパティを使用して、1 つにまとめた画像を部分ごとに表示できます。この技法により使用する画像数が減るため、送信する HTTP 要求数も減ります。また、複数の画像をキャッシュするよりも、スプライトファイルをキャッシュする方が効率的です。
• 画像に静的リソースを使用します。画像に静的リソースを用いると、キャッシュや、Salesforce に組み込まれたコンテンツ配信ネットワーク (CDN) を有効に活用することができます。
• 画像を圧縮します。グラフィックツールは通常、圧縮することよりも視覚的に正確であることを優先するデフォルト設定を使用し、画像の保存時にメタデータを追加します。画像圧縮ツールを使うと、画質を損なうことなく画像のファイルサイズを最大 30% 減らすことができます。