performance/plugins/image-prioritizer/tests/test-cases/common-lcp-image-and-lazy-loaded-image-outside-viewport-with-fully-populated-sample-data/buffer.html at 4d0251a4396c3e3621a30eacb37854dcba45dd58 · WordPress/performance · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>...</title>
	</head>
	<body>
		<div id="page">
			<div class="carousel">
				<img src="https://example.com/foo1.jpg" alt="Foo" width="1200" height="800" fetchpriority="low" loading="lazy" srcset="https://example.com/foo1-480w.jpg 480w, https://example.com/foo1-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" crossorigin="anonymous">
				<img src="https://example.com/foo2.jpg" alt="Foo" width="1200" height="800" loading="eager" srcset="https://example.com/foo2-480w.jpg 480w, https://example.com/foo2-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">
				<img src="https://example.com/foo3.jpg" alt="Foo" width="1200" height="800" fetchpriority="high" srcset="https://example.com/foo3-480w.jpg 480w, https://example.com/foo3-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">
			</div>
			<p>Pretend this is a super long paragraph that pushes the next image mostly out of the initial viewport.</p>
			<img src="https://example.com/bar.jpg" alt="Bar" width="1024" height="768" fetchpriority="high" loading="lazy" srcset="https://example.com/bar-300w.jpg 300w, https://example.com/bar-480w.jpg 480w, https://example.com/bar-800w.jpg 800w, https://example.com/bar-900w.jpg 900w, https://example.com/bar-1000w.jpg 1000w" sizes="(max-width: 1024px) 100vw, 1024px">
			<p>Now the following image is definitely outside the initial viewport.</p>
			<img src="https://example.com/baz.jpg" alt="Baz" width="3000" height="1500" fetchpriority="high" srcset="https://example.com/baz-300w.jpg 300w, https://example.com/baz-480w.jpg 480w, https://example.com/baz-800w.jpg 800w, https://example.com/baz-900w.jpg 900w, https://example.com/baz-1000w.jpg 1000w, https://example.com/baz-1500w.jpg 1500w, https://example.com/baz-2000w.jpg 2000w, https://example.com/baz-2500w.jpg 2500w" sizes="(max-width: 3000px) 100vw, 3000px">
			<img src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" fetchpriority="high" loading="eager">
			<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="LAZY"><!-- This one is all good. -->
		</div>
	</body>
</html>