ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
![Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/7699006273c19cd7491f55fd653dab6a91f65b08/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2021%2F01%2F09%2Foptimize-web-image-loading%2F00.png)