WordPressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する

WordPressのテーマをレスポンシブデザインへ対応する際に、画像の最適化は避けては通れません。 アーカイブ(記事一覧)ページで出力する場合は、サムネイル画像のサイズが全て統一されていればよいかと思いますが、違うサイズの画像をアップロードするケースが多いため、テーマ側で画像を最適化して出力してあげる必要があります。 今回は、WordPressでCSSの『object-fit』や『background』を使って、バラバラの画像のサイズを自動で最適化し、レスポンシブデザインに対応する方法をご紹介します。 imgタグで出力する画像を最適化する imgタグを使って画面幅に合わせてレスポンシブに画像を最適化させる場合は、『object-fit』を使用します。 設置するテンプレート <img src="<?php echo get_template_directory_uri(); ?>/image