Content-Length: 208838 | pFad | http://b.hatena.ne.jp/mizdra/image/performance/
Web における画像ロードベストプラクティス
Picture perfect images with the modern <img> element - Stack Overflow Blog という記事によくまとまっている。 また、関連して Priority Hints の fetchpriority 属性とあわせて紹介する。 導入として、Web における画像のペイロードは大きくなる一方で、Core Web Vitals にも大きく影響している。 Largest Contentful Paint のために、<link rel="preload"> や fetchpriority 属性でヒーロー画像のリクエストを早めたり、srcset 属性や <source> 要素で適切なフォーマットの画像をロードし、画面外の画像は loading 属性でロードを遅らせる Cumulative Layout Shift のために、画像の縦横サイズを
画像に関する新しい DOM API の紹介 - pixiv inside
こんにちは、福岡オフィスでエンジニアをしている petamoriken です。 ECMAScript と DOM API が好きで、気づいたらいつも仕様を眺めています。よろしくお願いします。 この記事では画像に関する新しい DOM API を紹介します。一般的に DOM API は二つのブラウザによる実装があれば安定していると言われていますが、プロダクトなどに採用する際には十分気をつけてください。また将来的に仕様が変更される可能性があることにも留意してください。 HTMLImageElement#decode() 明示的に画像のデコードをさせるメソッドです。Promise<void> を返します。 実は画像の load イベント完了後では画像の大きさを取得することは出来ますが、まだデコード処理はなされていません。今まで明示的にデコードさせたかったらこのようなコードを書いていたと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/mizdra/image/performance/
Alternative Proxies:
Image policies for fast load times and more | Articles | web.dev
