実際のページ レイアウトで機能するヒーロー イメージを準備する

主な見出しの横または後ろにヒーローのイメージが表示されることがよくあります。 エクスポートを選択する前に、件名、テキスト、およびコントロールが異なる幅の場所を確認してください。 デスクトップ パノラマの端近くにある顔が、背の高い携帯電話のトリミングで消えることがあります。 より大きなファイルでは、そのフレーミングの問題は解決されません。 レイアウトに必要な場合は、デザインまたはフォト エディターを使用して別の構成を作成します。

このツールは、提供された写真を収録またはトリミングできますが、背景を拡張したり、オブジェクトを削除したり、コピー用の空白を作成したりすることはできません。 忙しい背景をテキストに適したものにするために、シャープ化に頼らないでください。 Web サイトにはまだ十分なコントラストと、メッセージを読みやすくするレイアウトが必要です。 すでに圧縮されたデスクトップ配信ファイルを繰り返し編集せずに、別の電話の切り抜きを作成できるように、ソース マスターを維持します。

開始設定は 1920 年から 1920 ピクセル以内に収まり、軽いシャープニングで WebP をエクスポートします。 そのボックスは、すべてのヒーローの必須条件ではなく、実例となります。 画像の実際のレイアウト ロールを測定し、Web サイトを通じて適切な候補を提供します。 Fit inside はソース コンポジションを保持しますが、正確なサイズは、注意深く検討する必要がある特定のトリミングを提供します。

面、アーキテクチャのエッジ、グラデーション、およびページにとって重要な細部を検査します。 WebP を、特定の拡張機能が常に勝つと仮定するのではなく、同等の寸法の JPEG と比較してください。 ここでの WebP エクスポートでは白い背景が使用されるため、必要に応じて PNG で透明なグラフィックを維持します。 少額の在庫プレビューを拡大しないでください: ライセンスを取得したフル解像度のソースを使用します。 バイト キャップは品質やピクセルの削減を強制する可能性があるため、エクスポートされた寸法と表示される結果をまとめて判断します。

ファイルは、ヒーロー パフォーマンスの一部にすぎません。 サイトは、適切なソースを早期に要求し、そのスペースを確保し、無関係な作業の背後にある目に見えるヒーローを遅らせないようにする必要があります。 一般に、倍率のヒーローは主要な視覚的要素であるため、遅延読み込みを自動的に適用するのではなく、実際の読み込み動作を確認してください。 コンバーターは、ページのマークアップ、コンテンツ システム、またはホスティングの構成を変更できません。

実際のドラフトに候補を配置し、電話とデスクトップのレイアウトをテストします。 ブラウザー ツールで選択したファイルを確認し、LCP の改善を主張する前に、現実的な条件下でページを測定します。 見出しが読みやすいままであることと、ヒーローがレイアウトを変更しないことを確認します。 画像が情報を伝えている場合は有用な代替テキストを保持し、そうでない場合は適切な装飾処理を行います。 その後、エクスポートの選択肢を関連ページ バナーに適用するだけです。 画像処理自体はデバイス上に残ります。

便利な最初のテストは、実際の見出し、ボタン、ナビゲーションを配置した完全なオープニング スクリーンです。 最も広いデスクトップ クロップと最も狭いサポートされている電話クロップの両方を検査します。 話題が消えているのを探し、テキストが混雑し、重要なコンテンツがコントロールに遅れをとっているのを探します。 見出しが削除されたときにのみ写真が機能する場合は、さらに圧縮する前にレイアウトまたはソース構成を再確認してください。 実装がサポートし、対象者が必要とする場合は、別の電話での切り抜きを維持します。 最終的なファイルは、単に単独で見栄えがするのではなく、ページのメッセージと読み込み予算をサポートする必要があります。