Skip to content

Instantly share code, notes, and snippets.

@westonruter

westonruter/image-with-fetchpriority-and-with-preload.html

Last active October 31, 2023 20:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/901fbf9b17210a6a65930877e87f79f4 to your computer and use it in GitHub Desktop.
Save westonruter/901fbf9b17210a6a65930877e87f79f4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
image-with-fetchpriority-and-with-preload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>image-with-fetchpriority-and-with-preload.html</title>
<link
rel="preload"
as="image"
fetchpriority="high"
imagesrcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
imagesizes="100vw"
/>
</head>
<body>
<img
src="https://placehold.co/1024x1024.png"
srcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
width="1024"
height="1024"
sizes="100vw"
fetchpriority="high"
/>
</body>
</html>
Raw
image-with-fetchpriority-and-without-preload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>image-with-fetchpriority-and-without-preload.html</title>
</head>
<body>
<img
src="https://placehold.co/1024x1024.png"
srcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
width="1024"
height="1024"
sizes="100vw"
fetchpriority="high"
/>
</body>
</html>
Raw
image-with-lazy-loading-and-with-preload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>image-with-lazy-loading-and-with-preload.html</title>
<link
rel="preload"
as="image"
fetchpriority="high"
imagesrcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
imagesizes="100vw"
/>
</head>
<body>
<img
src="https://placehold.co/1024x1024.png"
srcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
width="1024"
height="1024"
sizes="100vw"
loading="lazy"
/>
</body>
</html>
Raw
image-with-lazy-loading-and-without-preload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>image-with-lazy-loading-and-without-preload.html</title>
</head>
<body>
<img
src="https://placehold.co/1024x1024.png"
srcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
width="1024"
height="1024"
sizes="100vw"
loading="lazy"
/>
</body>
</html>
Raw
image-without-anything.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>image-without-anything.html</title>
</head>
<body>
<img
src="https://placehold.co/1024x1024.png"
srcset="
https://placehold.co/64x64.png 64w,
https://placehold.co/128x128.png 128w,
https://placehold.co/256x256.png 256w,
https://placehold.co/512x512.png 512w,
https://placehold.co/1024x1024.png 1024w
"
width="1024"
height="1024"
sizes="100vw"
loading="lazy"
/>
</body>
</html>
Raw
responsive-image-preload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>responsive-image-preload.html</title>
<style>
img {
max-width: 100%;
height: auto;
}
#desktop,
#mobile {
display: none;
}
@media screen and (max-width: 767px) {
#mobile {
display: block;
}
}
@media screen and (min-width: 768px) {
#desktop {
display: block;
}
}
</style>
<link
rel="preload"
as="image"
fetchpriority="high"
media="screen and (max-width: 767px)"
imagesrcset="
https://placehold.co/64x64.png?text=mobile 64w,
https://placehold.co/128x128.png?text=mobile 128w,
https://placehold.co/256x256.png?text=mobile 256w,
https://placehold.co/512x512.png?text=mobile 512w,
https://placehold.co/1024x1024.png?text=mobile 1024w
"
imagesizes="100vw"
/>
<link
rel="preload"
as="image"
fetchpriority="high"
media="screen and (min-width: 768px)"
imagesrcset="
https://placehold.co/64x64.png?text=desktop 64w,
https://placehold.co/128x128.png?text=desktop 128w,
https://placehold.co/256x256.png?text=desktop 256w,
https://placehold.co/512x512.png?text=desktop 512w,
https://placehold.co/1024x1024.png?text=desktop 1024w
"
imagesizes="100vw"
/>
</head>
<body>
<div id="desktop">
<img
src="https://placehold.co/1024x1024.png?text=desktop"
srcset="
https://placehold.co/64x64.png?text=desktop 64w,
https://placehold.co/128x128.png?text=desktop 128w,
https://placehold.co/256x256.png?text=desktop 256w,
https://placehold.co/512x512.png?text=desktop 512w,
https://placehold.co/1024x1024.png?text=desktop 1024w
"
width="1024"
height="1024"
sizes="100vw"
loading="lazy"
/>
</div>
<div id="mobile">
<img
src="https://placehold.co/1024x1024.png?text=mobile"
srcset="
https://placehold.co/64x64.png?text=mobile 64w,
https://placehold.co/128x128.png?text=mobile 128w,
https://placehold.co/256x256.png?text=mobile 256w,
https://placehold.co/512x512.png?text=mobile 512w,
https://placehold.co/1024x1024.png?text=mobile 1024w
"
width="1024"
height="1024"
sizes="100vw"
loading="lazy"
/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment