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 →Use an <img> element with a meaningful alt value and at least one image source. Add intrinsic width and height to reserve layout space; use srcset and sizes when the browser should choose among differently sized files, and use <picture> when the image or its crop should change by format or viewport.
Basic HTML image syntax
A minimal informative image looks like this:
<img src="photo.jpg" alt="A caption describing the subject">The img element is a void element: it has no closing </img> tag. Supply at least one of src or srcset. src identifies the primary or fallback image URL; alt provides textual replacement content for people who cannot see the image or whose browser cannot display it. See MDN’s img reference and the WHATWG HTML Standard.
Do not treat alt as a tooltip or a place to narrate every visible detail. Write what the image contributes in context. For a decorative flourish that adds no information, use an empty alternative:
<img src="divider.svg" alt="">Writing useful alt text
Alt text is a textual equivalent, not a universal caption formula. The right wording depends on the image’s purpose in its surrounding content.
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 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Informative image: convey the fact or relationship the image adds. A chart might have alt text such as “Monthly visits rose from January through April, then leveled off.”
- Decorative image: use
alt=""so assistive technology can skip it rather than announce an unhelpful filename. - Image link or button: describe the destination or action, such as “Open the product gallery,” not merely “magnifying glass.”
- Image containing essential text: provide the same essential wording in HTML text where possible; do not make users depend on pixels alone.
When <picture> is used, the child <img> remains the fallback and carries the alt text. The source candidates do not each need separate alt values.
Core img attributes
| Attribute | Purpose and practical guidance |
|---|---|
src |
URL for the primary or fallback image. With width-descriptor srcset, the browser selects from the candidate list using sizes; with density descriptors, src can serve as the 1x candidate. |
srcset |
Comma-separated alternative image URLs, each paired with a width descriptor such as 800w or a density descriptor such as 2x. Do not mix width and density descriptor types in one list. |
sizes |
With width-descriptor srcset, describes the expected rendered slot width under media conditions. It is a hint for choosing a candidate, not a CSS layout rule; width descriptors require it. |
alt |
Textual replacement or equivalent fallback. Use meaningful text for informative images and an empty string for decorative ones. |
width and height |
Intrinsic dimensions in pixels. Providing both gives the browser an aspect ratio so it can reserve space before the file loads. |
loading |
Loading-priority hint, commonly lazy for images outside the initial viewport. It is not a guarantee that loading will happen at a particular time. |
decoding |
Preference for coordinating image decoding with rendering: sync, async, or auto. It is a hint, not a substitute for choosing an appropriate image. |
crossorigin and referrerpolicy |
Controls relevant to cross-origin requests, CORS behavior, referrer transmission, security, and privacy. Apply them according to the image host and the page’s requirements. |
Responsive images: choosing a suitable file
Resolution switching with srcset and sizes
Use width descriptors when the image composition is the same but several file sizes are available. The sizes value should reflect the slot’s actual layout; the browser combines it with viewport and pixel-density information to choose a candidate, and may account for user conditions such as bandwidth.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(width <= 600px) 100vw, 800px"
width="1200"
height="800"
alt="Mountain lake at sunrise">Here, 400w, 800w, and 1200w describe the pixel widths of the candidate files. The sizes expression says that the slot can span the viewport at widths up to 600 CSS pixels, and is otherwise expected to be 800 CSS pixels wide. Adjust that hint to match your page’s real layout. An inaccurate hint can lead the browser to download a file that is larger or smaller than needed.
Density switching
Use density descriptors when candidates represent the same displayed dimensions at different pixel densities, for example a standard and a high-density logo:
<img
src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x"
width="160"
height="48"
alt="Example Company">Do not combine this x-descriptor approach with w descriptors in one srcset. Choose the descriptor model that matches how the assets are prepared.
When to use picture
Use <picture> for art direction—such as a different crop on a narrow screen—or to offer alternate formats. The browser evaluates the <source> elements in order and uses an applicable source; the nested <img> is required as fallback and carries dimensions and alt text.
<picture>
<source media="(width >= 800px)" srcset="hero-wide.webp">
<source type="image/avif" srcset="hero.avif">
<img src="hero.jpg" alt="Person cycling on a mountain road" width="1600" height="900">
</picture>This example offers a wide-screen source first, then an AVIF source, then a JPEG fallback. Ensure every source represents the intended image and that the fallback is usable in environments that do not select the alternatives. Responsive sources can reduce transferred bytes, but there is no universal savings percentage: results depend on dimensions, compression, viewport, device density, network, and browser selection. See MDN’s responsive images guide.
Preventing layout movement and managing loading
Set accurate intrinsic dimensions on images. The browser can use their aspect ratio to reserve space before image data arrives, reducing unexpected page movement. If the image should shrink with its container, CSS can control rendered size without discarding that ratio:
img {
max-width: 100%;
height: auto;
}Use loading="lazy" for content that is not needed at initial render, for example images farther down a long article:
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
<img src="gallery-01.jpg" width="1200" height="800" loading="eager" alt="A red kayak beside the shore">Do not lazily defer imagery needed immediately at the top of the page. loading and decoding are browser hints, not exact scheduling commands; verify the result in the browsers and conditions that matter to your site. Correct dimensions and appropriately sized source files remain important whichever hints you use.
Cross-origin behavior, privacy, and security
Loading an image makes a request to its URL. A third-party image host therefore receives a request from a visitor’s browser, and referrer handling can affect what information accompanies it. Review the host, CORS requirements, and referrer behavior before deployment. The crossorigin and referrerpolicy attributes provide relevant controls; consult MDN’s img reference for their behavior and choose settings that fit your use case. Do not add these attributes reflexively: a cross-origin policy mismatch can prevent an image from being used as expected in contexts that require CORS.
Common image-element problems and fixes
The image is broken
- Check that the
srcURL is correct, reachable from the deployed page, and uses the right capitalization for a case-sensitive host. - For responsive markup, confirm at least one of
srcorsrcsetis present and that each candidate URL resolves. - If a host requires authorization or blocks hotlinking, a correct-looking URL may still fail in the visitor’s browser; use an image endpoint intended for public page requests or configure access appropriately.
The browser downloads an unexpectedly large file
- Check that width-descriptor candidates are paired with a
sizeshint matching the actual rendered slot. - Ensure the candidate set includes files close to the sizes your layout needs rather than only very large assets.
- Remember that viewport, pixel density, browser choice, and user conditions influence selection; markup provides inputs, not a fixed file-selection command.
The page shifts when an image appears
- Add the correct intrinsic
widthandheightto reserve the image’s aspect ratio. - Check that those dimensions match the asset’s real proportions; incorrect values can reserve the wrong shape.
- Keep responsive CSS such as
max-width: 100%; height: autowhen images need to fit narrower containers.
Assistive technology announces an unhelpful label
- Replace missing, filename-based, or overly detailed alt text with a concise equivalent of the image’s purpose.
- Set
alt=""for truly decorative images rather than omitting the attribute. - For an image link, describe what activating it does or where it goes.
A picture source is ignored
- Check source order, the
mediacondition, and the supplied format against the current viewport and browser. - Keep a valid
<img>fallback inside<picture>, including the alternative text.
A cross-origin image fails in a particular use
- Inspect the browser console and the image host’s CORS behavior if the image is being used in a context that requires cross-origin permission.
- Check whether a referrer policy or request mode changed how the server handles the request, then align the host configuration and element attributes.
Or skip the browser setup
If your task is to capture a web page as an image or PDF rather than embed an image in HTML, ScreenshotNeo provides a website screenshot API and MCP server. Its one-call request is:
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
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. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Does an img element need a closing tag?
No. The HTML img element is void and has no closing tag.
Can srcset use both 2x and 800w descriptors together?
No. Use one descriptor type per srcset list: density descriptors or width descriptors.
Is an empty alt attribute the same as a missing alt attribute?
No. alt=”” explicitly marks an image as decorative; omitting alt does not provide that instruction.
Recommended Free Tools
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.
