Use the HTML <img> element, a valid src URL and meaningful alt text:
<img src="images/coast.jpg" alt="Rocky coastline at sunset" width="1200" height="800">Add intrinsic dimensions to reserve the correct aspect ratio, use srcset and sizes when several resolutions are available, and use <picture> when the crop or format must change. The guide below shows which pattern fits each situation.
1. Add a normal content image with img
An image that conveys information belongs in the page content. The src attribute identifies the file or image URL. The alt attribute supplies replacement text when the image cannot be seen or cannot be loaded.
<img src="images/coast.jpg" alt="Rocky coastline at sunset" width="1200" height="800">The path can be relative to the HTML file, such as images/coast.jpg, or an absolute HTTPS URL hosted elsewhere. The URL must point to an image resource that the browser can retrieve.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use a useful filename and path
Keep the path consistent with your project structure. If index.html is beside an images folder, the example above resolves to images/coast.jpg. A file in a parent folder would use a path such as ../images/coast.jpg. Check capitalization carefully: on many web hosts, Coast.jpg and coast.jpg are different names.
2. Write alt text that matches the image’s role
Alt text should communicate the image’s relevant meaning in the surrounding page. “Rocky coastline at sunset” tells a reader what the photograph contributes; “image” or a long list of every visible object does not.
- Informative photograph: describe the subject or action that matters to the page.
- Diagram or chart: identify the information the reader needs from it, and provide fuller data in nearby text when necessary.
- Linked image: describe the destination or action of the link, not merely the picture.
- Decorative artwork: consult your project’s accessibility guidance for the appropriate treatment. The cited guidance establishes alt as replacement text but does not prescribe one universal decorative-image rule.
Do not omit alt accidentally. A failed request, blocked image, or reader using assistive technology still needs a meaningful alternative.
3. Add width and height to reserve space
Include the image’s intrinsic width and height. The browser can calculate the aspect ratio and reserve the slot before downloading the file, reducing or preventing layout movement while the page fills in.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minute<img
src="images/coast.jpg"
alt="Rocky coastline at sunset"
width="1200"
height="800">Use the actual intrinsic dimensions of the source image. If a file is 1200 by 800, do not claim 1200 by 600 merely to fit a design; that changes the reserved ratio and can distort the result. If the displayed slot is smaller, the browser can scale the image while preserving the declared ratio.
4. Serve an appropriate resolution with srcset and sizes
When you have several files at different widths, list them with width descriptors such as 480w, 800w and 1200w. Add sizes to describe how wide the image is expected to render under different viewport conditions. The browser uses those hints to choose a suitable candidate.
<img
src="images/coast-800.jpg"
srcset="images/coast-480.jpg 480w,
images/coast-800.jpg 800w,
images/coast-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Rocky coastline at sunset"
width="1200"
height="800">The descriptor must match the real pixel width of each file. In this example, the browser is told that the image may occupy the full viewport up to 600 pixels, and about 800 pixels on wider layouts. Change sizes to match your actual layout rather than copying the value blindly.
Fixed-size images and density descriptors
If an image always renders at a fixed CSS size, density descriptors such as 1x and 2x can offer a higher-resolution alternative:
Free tools Windows power users keep installed
One-click scans. No signup required.
<img
src="images/avatar.jpg"
srcset="images/avatar.jpg 1x, images/avatar-2x.jpg 2x"
alt="Profile portrait of Maya"
width="160"
height="160">Use width descriptors for a fluid slot whose rendered width changes. Use density descriptors when the rendered dimensions are fixed and you have a corresponding higher-resolution file.
5. Use picture for alternate formats or art direction
Choose <picture> when the source itself should change: for example, a modern format with a conventional fallback, or a different crop for a narrow layout. Keep an <img> element inside it. That fallback supplies the displayed image and the alt text.
<picture>
<source srcset="images/coast.avif" type="image/avif">
<source srcset="images/coast.webp" type="image/webp">
<img src="images/coast.jpg"
alt="Rocky coastline at sunset"
width="1200"
height="800">
</picture>The browser considers the <source> entries in order and uses the fallback <img> when an offered source is not selected. Put the meaningful alternative text on the nested <img>, not on the <source> elements.
Art direction: change the crop
A responsive resolution set keeps the same composition at different sizes. Art direction changes the composition itself. Supply different files for different conditions, then retain one fallback:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →<picture>
<source media="(max-width: 600px)" srcset="images/coast-portrait.jpg">
<img src="images/coast-wide.jpg"
alt="Rocky coastline at sunset"
width="1200"
height="800">
</picture>Only use this approach when the alternate crop improves the message. If every crop is equivalent, srcset and sizes are simpler.
6. Defer images that are initially off-screen
Add loading="lazy" to images that can wait until the reader approaches them, such as later gallery items:
<img
src="images/gallery-1.jpg"
alt="A red canoe beside the shore"
width="1200"
height="800"
loading="lazy">Keep width and height on lazy images so their space is known before the file arrives. Do not treat lazy loading as a universal default: an image needed immediately in the first viewport may not be a good candidate for deferral.
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
7. Decide between an HTML image and a CSS background
Use <img> when the image is content that the document should communicate. Use CSS background-image when the image is a visual background or layout decoration for an element.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems.hero {
background-image: url("images/hero.jpg");
}A CSS background is not a substitute for an informative content image. If readers need the image’s meaning, keep it in the HTML with appropriate alternative text. Backgrounds are useful for presentation where the surrounding content already provides the message.
8. A complete HTML page with several image patterns
The following page combines a normal image, a responsive image set, an alternate-format picture and a lazy-loaded gallery image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coast gallery</title>
</head>
<body>
<main>
<h1>Coast gallery</h1>
<img src="images/coast.jpg"
alt="Rocky coastline at sunset"
width="1200"
height="800">
<img src="images/coast-800.jpg"
srcset="images/coast-480.jpg 480w,
images/coast-800.jpg 800w,
images/coast-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Aerial view of the rocky coastline"
width="1200"
height="800">
<picture>
<source srcset="images/coast.avif" type="image/avif">
<source srcset="images/coast.webp" type="image/webp">
<img src="images/coast.jpg"
alt="Waves breaking along the coast"
width="1200"
height="800">
</picture>
<img src="images/canoe.jpg"
alt="A red canoe beside the shore"
width="1200"
height="800"
loading="lazy">
</main>
</body>
</html>Replace every illustrative path with a file that exists and verify each declared dimension against that file’s intrinsic size.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a rendered screenshot of a page rather than hand-built image markup, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns a PNG, JPEG, WebP or PDF. Before capture it can accept the cookie or consent banner like a visitor and remove more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Best Value
See the ScreenshotNeo API documentation for authentication and options. A one-call capture with cURL is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace https://stripe.com with the page you own or are authorized to capture. ScreenshotNeo’s Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
9. Troubleshoot images that do not appear
The browser shows a broken-image icon
- Check the exact
srcspelling, extension and capitalization. - Resolve the URL relative to the HTML document’s location, not your project editor’s open tab.
- Open the image URL directly. If it does not load there, upload the file or correct the server path.
- For a remote URL, confirm the address is complete and uses the scheme required by your page.
The image is stretched or squashed
Check that width and height describe the source’s real aspect ratio. A mismatch reserves the wrong shape. Correct the intrinsic values and inspect each srcset candidate for the same issue.
The browser chooses an unexpected responsive file
Verify that every width descriptor matches its file’s actual pixel width and that sizes describes the rendered slot at the relevant viewport. If the slot is fixed, use density descriptors instead of pretending it is fluid.
The intended crop or format never appears
Use <picture> with the appropriate <source> entries and keep a valid nested <img> fallback. A srcset on a lone <img> chooses resolution; it does not provide the same art-direction behavior as media-specific sources.
A page feels slow while images load
Provide appropriately sized candidates with srcset and sizes, and add loading="lazy" only to images that start off-screen. Keep dimensions on every lazy image so deferred loading does not leave an unknown-height gap.
Quick Recap
10. Choose the pattern with this checklist
| Need | Use | Required pieces |
|---|---|---|
| One content image | <img> |
src, meaningful alt, intrinsic width and height |
| Several resolutions of one composition | srcset and sizes |
Accurate width descriptors and a sizes rule matching the layout |
| Different file formats or crops | <picture> |
One or more <source> elements plus an <img> fallback |
| Content below the initial view | Lazy-loaded <img> |
loading="lazy" plus intrinsic dimensions |
| Decorative visual background | CSS background-image |
CSS presentation, with the message supplied by surrounding content |
11. Pre-publish verification
- Every content image has a valid source and context-appropriate alt text.
- Declared dimensions match the intrinsic dimensions and aspect ratio.
- Width descriptors in
srcsetmatch the actual candidate files. sizesdescribes the image’s real rendered slot.- Every
<picture>has a working nested<img>fallback. - Only initially off-screen images use lazy loading.
- Image paths work from the deployed page, including capitalization and folder names.
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.
Recommended Free Tools
