Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use an HTML <img> with a src URL for an image that is part of the page’s content. Use CSS url() when an image is part of the page’s presentation, such as a background. The key path rule: an HTML image URL is resolved in the document context, while a CSS image URL is resolved relative to the stylesheet.
Put an image in HTML with <img>
The simplest way to show an image in a web page is to put an <img> element in the HTML and set its src attribute to the image’s URL. For example, if photo.jpg is beside the HTML document:
<img src="photo.jpg" alt="A description of the photograph">If it is in a folder called images beside the document, include that folder in the path:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<img src="images/photo.jpg" alt="A description of the photograph">You can also use a full web address for an image hosted elsewhere:
#1 Best Overall
<img src="https://example.com/images/photo.jpg" alt="A description of the photograph">The WHATWG HTML Standard says that when embedding one image resource, use the img element and its src attribute. The image element is appropriate for content a reader should understand as part of the page, rather than merely as visual decoration.
Write useful alternative text
For a meaningful image, give alt an appropriate text alternative. It helps convey the image’s purpose to people who use screen readers and can be shown if the image cannot load. Describe what matters in the context of the page; do not use misleading text or treat the filename as a substitute for an explanation. A decorative image should be handled according to its decorative role, rather than given an unnecessary description that could confuse the page’s meaning.
Use an image URL in CSS
Use CSS background-image when an image supports the visual design—for example, as a hero background or texture—instead of presenting it as content that needs its own text alternative.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.hero {
background-image: url("../images/hero.jpg");
}That example assumes the stylesheet is in styles/main.css and the image is in an images folder beside styles. The important detail is that ../images/hero.jpg is interpreted from the CSS file’s location, not from the HTML page that loads the stylesheet.
CSS url() can take relative and absolute URLs, as well as blob and data URLs. The same path string may therefore point to different files when used in HTML and CSS: the base location changes with the context.
Choose HTML or CSS for the image’s role
| Question | Use HTML <img> |
Use CSS background-image |
|---|---|---|
| What is the image doing? | It conveys page content or information. | It decorates or supports the page’s visual presentation. |
| Does it need a text alternative? | Provide appropriate alt text for a meaningful image. |
Backgrounds are presentation; do not use them as a substitute for meaningful content and its text alternative. |
| Where does a relative URL start? | From the document context. | From the stylesheet URL. |
| Do you need browser selection among image sizes? | srcset and sizes can provide responsive candidates. |
The examples here use a CSS background URL; responsive source selection is not the HTML srcset/sizes mechanism. |
Use responsive image URLs with srcset
If you have more than one file size for an image, an HTML image can offer candidates through srcset and describe its expected rendered width with sizes. The browser uses those values to choose a suitable source. Keep src as a fallback, and provide the actual candidate files that match the widths you declare.
Rank #3
<img
src="photo-400.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800"
height="600"
alt="A description of the photograph">In this example, 400w and 800w describe the candidate resource widths; they are not instructions to render the image at those CSS widths. The sizes value describes the expected display width so the browser can choose between candidates. Adjust the files and sizing expression to match your actual assets and layout—the example does not establish a performance result for a particular site.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Set intrinsic width and height values to let the browser reserve image space before the image loads. Use values matching the image’s dimensions or intended aspect ratio. That gives the layout information up front instead of leaving the image’s space unknown while it loads.
Understand relative, absolute, and external image URLs
Relative URLs
A relative URL leaves out the full origin and is interpreted from a base location. The right relative path depends on where the file using it lives: an HTML src uses the document context, while CSS url() uses the stylesheet URL. Keep that distinction in mind when moving a stylesheet into a subfolder or comparing an image that works in HTML but not in CSS.
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
Absolute web URLs
An absolute web URL includes a scheme and host, such as https://example.com/images/photo.jpg. It can point to an image on your own site or another host. Hosting your site’s images with the site—or using an appropriate CDN setup—keeps their delivery under your control. Do not hotlink an image from another site without permission: the owner may be paying to deliver it, and the file could later disappear or change.
Data and blob URLs in CSS
CSS url() can also refer to a data URL or a blob URL. These are different from a normal path to a file on your site; use them when your application’s intended workflow provides that kind of URL. For ordinary site assets, a clear relative path or an absolute web URL is generally easier to inspect and maintain.
Free tools Windows power users keep installed
One-click scans. No signup required.
Why won’t the HTML image load?
Start by checking the URL the browser actually requests. A path can look plausible in source code and still resolve somewhere other than the image file you intended.
- Inspect the resolved request URL. Open the browser’s developer tools and check the requested image location. Compare it with the file’s actual deployed location.
- Check which file provides the base. For an HTML
src, check the document context. For a CSSurl(), work from the stylesheet’s location. Do not assume the two identical-looking paths mean the same URL. - Verify the directory and filename. Compare spelling and letter case with the deployed asset. A filename that differs from the actual file may not resolve as intended; verify what your hosting setup serves.
- If the page uses
file://, try a local web server. Browser restrictions on local files can interfere with resources. MDN documents this caveat for URL values. - For a remote image, check reachability and permission. Confirm that the URL points to an available resource and that you are allowed to use it. An externally hosted asset can be removed or changed by its owner.
Or skip the browser setup
If what you need is a screenshot of a web page to use as an image asset—not an existing image file embedded in a page—ScreenshotNeo can return a screenshot from one GET request. For example, this cURL command saves a WebP capture of Stripe:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Its capture steps can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. ScreenshotNeo also has an MCP server with screenshot, page-info, and PDF-capture tools for AI agents. The Free plan includes 1,000 shots a month without a card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month—no card required.
Crashes, 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 minutePC 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 & 11Keep the image choice and URL context clear
Use <img src="…"> for meaningful page content and CSS url() for presentation. Add appropriate alternative text, provide responsive candidates where needed, and resolve every relative path from the file that actually contains it. Those choices make the image’s role and its location easier to understand when the page changes or an asset fails to load.
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.
