imgタグ生成

width・height属性指定によるCLS改善の実践

Core Web Vitalsの評価指標である累積レイアウトシフト（CLS）は、画像読み込み時のレイアウト変動を測定します。img要素にwidthとheight属性を明示的に指定することで、ブラウザは画像読み込み前から領域を確保し、レイアウトシフトを防止できます。
従来は、CSSのwidthとheightプロパティのみで制御する実装が一般的でした。しかし、HTML属性での指定により、CSSが読み込まれる前からレイアウトが確定します。特にモバイル環境での表示速度改善に直結し、Google検索順位にも影響します。
aspect-ratioプロパティとの併用により、レスポンシブ対応が容易になります。widthとheight属性で実寸を指定し、CSSでwidth: 100%; height: auto;と記述することで、ブラウザが自動的にアスペクト比を計算します。この手法により、画像の縦横比を維持しながら可変サイズを実現できます。
大量の画像を扱うECサイトや不動産サイトでは、手作業での属性指定が現実的でない場合があります。CMSのアップロード時に画像サイズを自動取得し、データベースに保存する仕組みにより、テンプレート出力時に動的に属性を挿入できます。この自動化が、実務での運用効率を左右します。

DPI設定と印刷物からの画像流用における注意点

印刷物用に作成された画像は、300dpiや350dpiといった高解像度で保存されています。この画像をWeb用にそのまま使用すると、ファイルサイズが不必要に大きくなります。DPI（dots per inch）はディスプレイ表示では意味を持たず、ピクセル数のみが重要です。
Photoshopでの「Web用に保存」機能では、自動的に72dpiへ変換されます。しかし、元画像のピクセル寸法が3000×2000といった大サイズのままでは、DPI変更だけでは不十分です。実際の表示サイズに合わせたリサイズが必須で、例えば800×600ピクセルへの縮小により、ファイルサイズを大幅に削減できます。
HTMLのwidthとheight属性に、元画像のピクセル数をそのまま記述すると、意図しない表示サイズになります。DPI情報を考慮した実効サイズの計算が必要です。3000×2000ピクセルの300dpi画像は、72dpiでの表示では12500×8333ピクセル相当の領域を占めます。この換算ミスが、レイアウト崩れの原因となります。
グラフィックデザイナーからの納品物に、印刷用高解像度画像が含まれる場合があります。制作者側でのWeb最適化処理が前提ですが、クライアントへの説明責任も重要です。「なぜ納品された画像をそのまま使わないのか」という疑問に対し、技術的な理由を分かりやすく伝えることが、信頼関係の維持につながります。

画像パス管理とディレクトリ構造の標準化

img要素のsrc属性で、相対パスと絶対パスのどちらを使用するか、プロジェクト方針の統一が重要です。images/photo.jpgのような相対パスは、HTMLファイルの配置場所に依存します。階層が深いページでは../../images/photo.jpgといった記述が必要になり、管理が煩雑化します。
ルート相対パス/images/photo.jpgの使用により、この問題を回避できます。ドキュメントルートからの一貫したパス表記により、HTMLファイルの配置場所に関わらず同じパスが機能します。ただし、ローカル開発環境でサーバー設定が不十分な場合、正しく表示されない問題もあります。
CSSのbackground-imageプロパティでのパス指定は、CSSファイルの位置が基準です。url(../images/bg.jpg)のように、CSSファイルからの相対パスで記述します。HTMLでのパス指定とは異なるルールのため、混同しないよう注意が必要です。Sassでのコンパイル時にパスが変わる場合もあり、設定の確認が不可欠です。
CDN活用時は、完全なURLでの指定になります。https://cdn.example.com/images/photo.jpgという形式により、地理的分散配置の恩恵を受けられます。ただし、開発環境と本番環境でURLが異なるため、環境変数やビルドスクリプトでの動的切り替えが必要です。

alt属性の適切な設定とSEO最適化

alt属性は、画像の代替テキストとしてアクセシビリティに必須です。スクリーンリーダーはaltの内容を読み上げ、視覚障害ユーザーに画像の情報を伝達します。空のalt=""は装飾的な画像に使用し、意味のある画像には適切な説明文を記述します。
SEOの観点では、alt属性にキーワードを含めることで、Google画像検索での上位表示が期待できます。ただし、キーワードの詰め込みは逆効果で、自然な文章での記述が推奨されます。「赤いソファ」ではなく「3人掛けの赤いレザーソファ、リビングルーム向け」のような具体的な説明が効果的です。
商品画像では、商品名や型番をalt属性に含めることで、検索エンジンからの流入を増やせます。ECサイトでの商品ページ最適化において、画像のalt設定は見落とされがちですが、実は重要なSEO施策です。構造化データとの連携により、リッチリザルト表示の可能性も高まります。
自動生成されるalt属性は、ファイル名をそのまま使用する実装が多く見られます。「IMG_1234.jpg」のようなファイル名では、情報価値がありません。CMSでの画像アップロード時に、alt入力欄を必須項目とし、適切な説明文を促すUI設計が、運用品質を向上させます。

レスポンシブ画像とsrcset属性による最適配信

srcset属性により、デバイスの画面幅や解像度に応じた画像の出し分けが可能です。srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"という指定で、ブラウザが最適なサイズを自動選択します。不要な大容量画像の読み込みを避け、モバイル環境でのデータ通信量を削減できます。
sizes属性との組み合わせにより、ビューポート幅に対する画像の表示サイズを指定できます。sizes="(max-width: 768px) 100vw, 50vw"は、768px以下では画面幅いっぱい、それ以上では50%の幅で表示することを示します。この情報により、ブラウザは適切な画像を選択します。
picture要素を使用することで、アートディレクション対応も実現できます。スマートフォンでは縦長トリミング、デスクトップでは横長といった、異なる画像の出し分けが可能です。単なるサイズ違いでなく、構図自体を変更できる点が、srcsetとの違いです。
これらの実装では、各サイズの画像を事前に用意する手間が発生します。ImageMagickやSharpといった画像処理ライブラリにより、元画像から自動的に複数サイズを生成できます。ビルドプロセスへの統合により、運用負荷を軽減しながら、パフォーマンス最適化を実現できます。