Preload an image by placing <link rel='preload' href='...' as='image'> in the document’s <head>, then keep the normal <img> element in the page. Preload is an early-fetch hint, not a replacement for responsive markup, dimensions, or alt text. Use it for one or a few images needed immediately—usually a likely Largest Contentful Paint (LCP) hero—not for an entire gallery.
What image preloading does
Browsers normally discover an image when the HTML parser reaches its <img>, when CSS references a background, or when JavaScript requests it. A preload link advertises the resource in the <head> so fetching can start sooner. The browser can reuse that response when the eventual image request matches the preload’s URL, response type, and request conditions.
Preload changes scheduling; it does not display anything by itself. The consuming image still needs meaningful alternative text, intrinsic dimensions, responsive candidates, and any normal loading behavior.
Basic image preload
Put the link before the closing </head> and retain the image where it belongs in the body:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<head>
<link rel='preload' href='/images/hero.webp' as='image'>
</head>
<body>
<img src='/images/hero.webp'
width='1600' height='900'
alt='People collaborating around a table'>
</body>- Choose an image that is required during the initial view, such as the page’s hero.
- Use the exact URL and declare
as='image'. - Keep the same URL in the eventual
<img>(or ensure the browser selects the same responsive candidate). - Give the image width and height so reserving space does not depend on a late download.
- Measure the result in a network waterfall or performance audit rather than assuming it helped.
Why as='image' matters
The destination tells the browser what kind of request it is scheduling and helps it apply the correct priority and cache rules. Omitting it makes the declaration invalid for the intended image use.
Preloading responsive images
When an image uses width descriptors, the preload must describe the same candidate set and sizing rules as the eventual image. Use imagesrcset and imagesizes on a preload link:
<link rel='preload'
as='image'
imagesrcset='/images/hero-400.jpg 400w,
/images/hero-800.jpg 800w,
/images/hero-1600.jpg 1600w'
imagesizes='100vw'>
<img src='/images/hero-800.jpg'
srcset='/images/hero-400.jpg 400w,
/images/hero-800.jpg 800w,
/images/hero-1600.jpg 1600w'
sizes='100vw'
width='1600' height='900'
alt='People collaborating around a table'>With width descriptors, imagesizes is required. The WHATWG HTML Standard restricts imagesrcset and imagesizes to a link that has both rel='preload' and as='image'. The standard’s pattern omits href; that prevents browsers without responsive-preload support from fetching an incorrect fallback URL. The normal src remains on <img> for fallback behavior.
Art direction with <picture>
If different files are selected for different conditions, mirror those conditions in the preload. A media attribute can gate a link to a viewport or other media query, while the consuming <picture> sources must use matching conditions. Do not preload both desktop and mobile variants without mutually exclusive conditions: a browser may download more than one file.
<link rel='preload' as='image'
href='/images/hero-wide.jpg'
media='(min-width: 800px)'
type='image/jpeg'>
<link rel='preload' as='image'
href='/images/hero-narrow.jpg'
media='(max-width: 799px)'
type='image/jpeg'>
<picture>
<source media='(min-width: 800px)' srcset='/images/hero-wide.jpg'>
<img src='/images/hero-narrow.jpg'
width='800' height='1000'
alt='Product displayed on a phone'>
</picture>Which loading approach should you use?
| Approach | Discovery point | Best use | Main risk or trade-off |
|---|---|---|---|
| Preload link | Document head, before markup, CSS, or script discovery | An immediately needed hero or an image hidden behind CSS | Consumes bandwidth early and can compete with HTML, CSS, fonts, scripts, or the actual LCP resource |
Eager <img> with fetchpriority='high' |
When the parser reaches the image | An image already easy to discover whose importance needs an explicit hint | Does not solve late discovery in CSS or script; support for fetchpriority is newer |
loading='lazy' |
Deferred until the browser predicts the image is near the viewport | Below-the-fold content and galleries | Too late for an above-the-fold image |
| CSS background | After the stylesheet is discovered and parsed | Decorative or layout backgrounds | Later discovery; preload must match the selected CSS asset and conditions |
Preload is not automatically faster. The right choice depends on discovery timing, candidate correctness, network contention, browser support, cache matching, LCP impact, and maintenance cost.
Using fetchpriority with preload
fetchpriority is a separate hint that tells the browser an image has more or less impact than it might infer. It can complement a preload for a likely LCP image:
<link rel='preload'
href='/images/hero.webp'
as='image'
fetchpriority='high'>
<img src='/images/hero.webp'
fetchpriority='high'
width='1600' height='900'
alt='People collaborating around a table'>Use the hint sparingly. It cannot repair a wrong URL, mismatched responsive candidates, slow encoding, missing dimensions, or a layout in which another element becomes LCP. The attribute is identified as Baseline 2024, so treat it as progressive enhancement and verify the browsers you support. Preload itself is widely available according to MDN, but unsupported browsers still need the normal image markup.
Choosing what to preload
Good candidates
- A hero image likely to become LCP and visible without scrolling.
- An image requested by CSS or JavaScript that the HTML parser cannot discover early.
- A single above-the-fold illustration that is definitely rendered on the route.
Images to leave alone
- Most galleries and carousels, especially when only one item is initially visible.
- Below-the-fold images that can remain lazy or otherwise deferred.
- Conditional assets when the page cannot know which branch will render.
Every unnecessary preload competes for connections and bandwidth. A page that preloads several candidates can delay the HTML, stylesheets, fonts, scripts, or the image the reader actually sees first.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Formats, MIME types, and conditions
Use type when you want to advertise a MIME type and let a browser skip a format it cannot use:
<link rel='preload'
href='/images/hero.avif'
as='image'
type='image/avif'>The consuming markup still needs a valid <picture> or <img> fallback. When preloading multiple formats or desktop/mobile files, make the media conditions mutually exclusive where appropriate. Otherwise the browser may download alternatives that will never be displayed.
Accessibility and layout stability still belong to <img>
- Write useful
alttext for informative images; use an empty value only for images that are genuinely decorative. - Keep intrinsic
widthandheight, or an equivalent aspect-ratio rule, on the image. - Keep
srcset,sizes, and<picture>sources on the consuming element. - Do not assume a successful preload means the image will be visible or accessible.
A practical implementation and verification workflow
- Record the page’s current waterfall and identify when the candidate image request begins.
- Confirm the image is needed in the initial viewport and is a plausible LCP element.
- Add one preload with
as='image', matching URL, type, media, and responsive attributes. - Leave the complete image element in place, including dimensions and accessibility attributes.
- Reload with a clean cache and inspect the network waterfall. Check that the preload request is reused rather than followed by a second request for a different URL.
- Test representative viewport sizes and browser versions, especially when using
imagesrcset,imagesizes,media, orfetchpriority. - Compare LCP and other audit results before and after. There is no universal speed percentage: the outcome depends on discovery timing, image size and encoding, connection conditions, and competing requests.
Troubleshooting preload problems
The browser reports an unused preload
The page preloaded a resource that was not consumed soon after navigation, or the consuming request did not match. Remove the hint, correct the URL, or align the responsive and media conditions. An unused preload is an avoidable network cost.
The image downloads twice
Compare the preload and final request byte for byte: URL, query string, selected srcset candidate, sizes, media condition, type, and other request conditions. A preload for one candidate cannot satisfy an <img> request for another.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The responsive preload selects the wrong size
Make imagesrcset exactly mirror srcset and make imagesizes mirror sizes. Width descriptors require imagesizes. For art direction, use media-gated links that correspond to the <picture> sources.
Preload made the page slower
Remove competing preloads and inspect whether the early request displaced HTML, CSS, fonts, scripts, or the true LCP image. Check whether the image is oversized or inefficiently encoded. A higher priority cannot compensate for excessive bytes.
fetchpriority has no visible effect
It is only a hint and older browsers may ignore it. Verify the target browser matrix, confirm that the image is actually LCP, and ensure discovery, URL matching, dimensions, and encoding are already correct.
The CSS background still appears late
CSS backgrounds are discovered after the stylesheet. Preload the exact background asset and match any media conditions, but do so only when that background is required immediately; otherwise its early request can waste bandwidth.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesBest Value
Performance, reliability, and maintenance notes
Preload can reduce the delay between navigation and an early image request, but it does not guarantee a particular LCP improvement. Results vary with connection speed, server response, encoded byte size, cache state, and other page requests. Treat it as a narrowly targeted scheduling hint, not a substitute for right-sized images or efficient encoding.
Keep preload declarations close to the markup or template that owns the image, and remove them when the design changes. A stale link can remain syntactically valid while quietly fetching an asset that the page no longer uses. Recheck after changing breakpoints, image formats, hero layouts, or JavaScript rendering.
Or skip the browser setup
If your goal is to obtain a clean visual capture while checking how a page renders, ScreenshotNeo can return a screenshot from one request. Its API accepts a URL and can produce PNG, JPEG, WebP, or PDF; the documentation lists the options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots each month without a card; paid plans start at $5 for 3,000 screenshots, and every feature is available on every plan.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCreate a free ScreenshotNeo account to start with 1,000 screenshots a month and no card.
Frequently Asked Questions
What happens if a browser does not support preload?
The browser can ignore the link hint and still load the normal <img> request, which is why the consuming image element must always remain in the page.
Can I preload an image that JavaScript inserts later?
Yes, when that image is genuinely needed soon after navigation. Preload is specifically useful when script would otherwise delay discovery, but the script must request the same resource so the response can be reused.
The Bottom Line
Preload only the small set of images needed immediately, declare as='image', mirror responsive and media conditions exactly, and verify reuse in a waterfall. Keep the complete, accessible <img> markup because preload is a hint—not the image itself.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
