Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説

ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、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」と指定しておく手法がよく用いられます。この手法に加

[nekosann_08]

とても良いんだけど何でこんな複雑な世界観になってしまったのかと一考。

[yarumato]

“画像読み込みを表示が必要になるまで遅延させる”　これ、逆に遅くなる。複数タブにページ開くだけ開いてから、他のページの画像読み込んでる最中に1ページずつ読んでるのに、コレだと画像出るのを毎回待つことに

[ultimate-ez]

いやいや、これはブラウザにやらせちゃダメやろ笑

[kijtra]

webp を推しておきながら avif だと…？(対応ブラウザほぼないけど)

[kosn]

ブラウザ側で読み込み遅延とか勝手にやられると今まで動いてたものが動かなくなったりするんでこちらから指定する必要があるのはしょうがないかと

[unique120]

阿部寛に聞きにいったらいいんじゃないかな

[arapro]

それにつけても俺たちゃ何なの　画像一つにキリキリ舞いさ

[mitaro]

わからんでもないけども……Webフロント界隈どうしてこうつらいの……

[natu3kan]

一方、少し前の日本の携帯キャリアはパケットの削減の為に客の許可なくHTTPのサイトに対して「通信の最適化」で画像を非可逆圧縮して炎上した。

[mayumayu_nimolove]

基本なのかな？とっても役に立つ

[masterq]

こういった積み重ねが大事だよな。。。

[hachiame]

“プレースホルダーとしてぼかし画像を利用する” 発想はなかったなー 良いアイデアだと思う。

[d4-1977]

「img要素の「background-image」プロパティ」それは、思いつかなかった！あっても、おかしくなかった！

[taou]

“画像のURLにハッシュ値を含め、画像の更新時にハッシュ値を変更するようにしておけば、画像キャッシュの有効期間を無期限に設定することができます。”

[yoshi-na]

後でおさらいする

[minomushkoro]

chromeの宣伝やん

[eagleyama]

ブラウザは賢いな

[rirukarinka]

今までJSに回ってきてたことが、コーダーの作業範囲になってきていて良いなーっていうのと、ファーストビューの華麗な()演出用の範囲では今までと変わらないなしんどっていうのと。

[charyboy]

参考

[do-do]

読む

[murasen]

最初の箇条みて当たり前体操かと思ったら色んなことができるなんて…勉強不足でした。週明け提案してみます

[adsty]

特別な記述を追加して画像読み込みの最適化を行う。

[morinokanri88]

いいと思います。

[KazuoLv1]

最適とは何に対しての最適なのか。通信量やSEOで異なりそうだけど。

[ayumun]

素直にファイルサイズを小さくリサイズしたサムネイルを作って、クリックしたら大きくなる古のホームページ仕草にしてくれ。大体サムネイルしか見ないじゃん

[poponponpon]

新しいマシン買ってパワーで殴ろう

[sgo2]

jsやcssみたいにトランスパイラでやるべき事のような>画像のサイズ指定

[spark7]

表示的にはサイズ指定だけで大抵は上手くいくだろう。あとはまあこだわりやさんのアホな要求に答えてたら複雑になりました的なやつでは。

[blueboy]

画像がたくさんあるページ向け。企業サイトならば必須だが、画像が数個しかない個人ブログでは、やっても差は感知できない。私は　width　だけ指定している。　主として、縮小表示のため。

[portal18]

レンダリングの遅延はCSSで調整できるのか...。HTMLの読み込み遅延のほうはしっていたけれど。

[buhoho]

画像表示するだけにわざわざJS使わないでほしい。だいたい期待した動きにならず戸惑う