Web ページ表示速度の重要性は昔から言われ続けていて、さまざまな最適化がされてきていると思います。今回は手を付けやすく効果が大きいと思われる画像配信の最適化手法をメモしておきます。 今回の取り組みによって Google PageSpeed Insightsでのスコア向上や、ネットワーク転送量の大幅な削減ができます。 また、この取組は @FumiyaShibusawa に検証、実装をやってもらっています。感謝 👯 要件 レスポンシブな構成 閲覧するデバイスによって表示される画像の大きさが異なる 画像の表示サイズは事前には判断できない ユーザが画像アップロード、レイアウトの修正をすることができるシステム(CMS) 雑な要件ですが、要は事前に決め打ちで画像をリサイズをすることができないようなシステムです。 対応 HTML レンダリング時に <img> の表示領域を計算し、それを画像 URL