記事が表示される記事のブログ画像を最適化する

記事には、リード写真、スクリーンショット、チャート、作者の小さなポートレートが含まれる場合があります。 これらの資産はさまざまな目的を果たします。 写真は、小さなラベルが説明しているダイアグラムとは別のエンコーディングの選択に耐えることができます。 各画像の元のソースを保持し、記事内での役割に合わせて配信コピーを作成します。

コンテンツ列を測定し、電話のレイアウトを調べます。 広い比較図では、狭い画面に押し込まれた小さなバージョンではなく、より単純なソース レイアウトが必要になる場合があります。 このツールは、ダイアグラム ラベルをリフローしたり、グラフをインタラクティブにしたり、テキストを作成したりすることはありません。 記事のテキストで重要な情報を入手してください。 スクリーンショットについては、プライベートな詳細を確認し、装飾的な写真に使用される同じターゲット サイズを選択するのではなく、手順を説明するのに十分な解像度を維持します。

プリセットは 1600 x 1600 ピクセルの内部に収まり、WebP 出力と軽いシャープニングを備えています。 これは記事画像の最初の例であり、普遍的なブログ サイズではありません。 レイアウトとレスポンシブ候補に基づいて寸法を置き換えます。 Fit Within は、構成全体を保持し、より小さなソースを拡大しません。 特定のヘッダー形状が必要な場合は、意図的な正確な切り抜きを使用して、別々に点検します。

実際の WebP バイト数と外観を同じ寸法の JPEG で比較してください。 細かい質感、顔、滑らかなグラデーションは良いチェックです。 このツールの WebP エクスポートは不透明であるため、既存の透明性またはより鮮明なテキストが必要なグラフィックの PNG を維持します。 マスターに戻ることができるときは、すでに圧縮された記事の画像を繰り返し変換しないでください。 明確な名前のエクスポートを保存して、デザインが変更された場合に再生成できるようにします。

サンプルをアップロードして、コンテンツ システムが実際に提供するものを確認します。 レスポンシブ サイズを生成したり、アップロードを再度変換したりすることがあります。 レイアウトで画像のスペースを確保し、その位置に適切な読み込み動作を使用します。 ページのはるか下にある記事の画像では、ページを開くときに表示される最初の画像とは異なる読み込みのニーズがあります。 コンバーターはそのマークアップを設定できません。

電話機と大きなディスプレイで公開されたドラフトを確認してください。 トリミング、キャプション、代替テキスト、および周辺リンクを確認します。 小さいファイルは、資産に関する有用な証拠ですが、それはより優れたコア Web バイタルまたはランキングを保証するものではありません。 パフォーマンスの主張を行うときは、ページを測定します。 画像ライブラリの場合は、バッチ処理する前に代表的な写真とグラフィックをテストしてください。 コンテンツに適した設定を使用して各グループを処理し、ルートを元のソースに戻します。 変換のすべてがブラウザで発生します。

装飾的なリード写真ではなく、最も情報が豊富な図から始めます。 メニュー ラベルや図にマシンの一部の名前を示すスクリーンショットは便利なテストです。 それを記事のドラフトに入れ、電話の列の幅で読んでください。 そこで失敗した場合は、記事内でより明確な切り抜き、より大きなビュー、または説明テキストを提供してください。 単純なリード写真が生き残るからといって、すべての画像を同じ小さなバイト ターゲットに下げないでください。 ファイルとページの実装では、不必要な作業と転送サイズを避ける必要がありますが、読者は図を理解する必要があります。