マスターを維持し、ウェブ配達コピーを作成します。
オリジナルの画像をその画像説明と承認記録で保存します。 ページの実際の画像領域のための別々の配達ファイルを作成します。 これにより、画像フレームや圧縮を後で変更し、単一のソースファイルを繰り返し編集せずにできます。
THE RENDER OFFICE は現在、平方、風景、または肖像のサイズで PNG 画像を返します。 大きなソースは完成に役立ちますが、小さなカテゴリカードにはピクセルが少なくなる可能性があります。 画像作成の品質設定は、適切なウェブエクスポートの準備の代わりではありません。
レイアウトにピクセルを配信
表示されている画像のサイズは、サポートしている実際の配置とデバイス密度を参照してください。 適切な画像のバージョンを準備し、サイトがそれらを応答的にサービスすることができます。 CSS 幅を減らすだけで、ダウンロードされるファイルのバイトを減らさない。
MDNは、画像ソース候補者とサイズ情報がブラウザが適切なリソースを選択するのに役立つ方法を文書化します。 宣言されたランキングは実際のページと一致しなければなりません; 誤ったサイズ情報は、ブラウザが不適切な候補者を選択することを可能にします。
最終表示サイズで圧縮を比較する
出版作業流によってサポートされている適切なフォーマットを輸出し、ファイルサイズと外観を比較します。 グラディエント、薄い構造、端、および圧縮後の正確な製品の詳細をチェックします。 透明性を維持するのは、レイアウトが実際にそれを必要としている場合にのみです。
配置に必要な品質を維持する最小の適切なファイルを選択します。 画像が最適化されていることを証明する普遍的なファイルサイズターゲットはありません。 小さな装飾カードと詳細な製品イメージは、異なる仕事を持っており、それに応じて検討されるべきです。
| フィールド | 記録内容 | レビュー質問 |
|---|---|---|
| 位置 | 現行ページと画像領域 | 画像フレームはこのレイアウトに役立つのか? |
| 源と輸出 | マスター・フィルネームと配達バージョン | 輸出は再生できますか? |
| サイズとバイト | ピクセルサイズとファイルサイズ | 提供された資源は適切ですか? |
| ビジュアルレビュー | 意図されたサイズで認められた品質 | コンプレッシャーは重要な情報を削除しましたか? |
重要性による配置スペースと負荷を予約する
幅と高さの詳細を提供して、ブラウザが到着する前に画像の側面比率を予約できます。 MDN は、どのようにしてこのレイアウトの動きを減らすかを説明します。 最終画像フレームとCSS行動が予約されたスペースと一致していることを確認します。
最初の視点に必要とされていない適切な画像のために軽い充電を使用します。 主なイメージに差別なく適用しないで、訪問者はすぐに見るべきです。 実際のページ行動をチェックする代わりに、単一の充電属性を普遍的なパフォーマンス修正として扱う。
イメージに有用な検索と読者コンテキストを与える
画像を関連するテキストの隣に置き、短い、説明的なフィルネームを選択します。 そのページに画像の目的のためにアルトテキストを書き、キーワードリストを避ける。 Googleはフィルネームを簡単なヒントとして説明し、周囲のページのコンテキストを使用してテーマを理解しますが、単なるフィルネームは関連性やランキングを確立しません。
公開されたページの実際の画像要望、配置、アクセス性、および適切なツールでパフォーマンスをチェックします。 バージョンを比較する前に条件と結果を記録します。 より速い配達は体験を改善することができますが、収入はまだオファー、観客、および完全な変換コースに依存しています。