Use the HTML <img> element, set its src to the image file, and write an appropriate alt value. For example: <img src="images/photo.jpg" alt="A red bicycle leaning against a brick wall" width="800" height="600">. Put the image file at the path named by src, relative to the HTML document when you use a relative path. The image element has no closing tag.
How do I put an image on a webpage?
Save an image in your project, then refer to it from an <img> element:
<img src="images/photo.jpg" alt="A red bicycle leaning against a brick wall" width="800" height="600">Here, src identifies the image file, alt supplies a text alternative, and width and height give the image’s intrinsic dimensions in pixels. The HTML element is <img>—not <image>—and it is a void element. It does not contain text or other elements and must not have an </img> closing tag.
Choose the image path
If the HTML file is next to an images folder and the image is named photo.jpg, use src="images/photo.jpg". A path like this is resolved from the HTML document’s location. An image can also be referenced by an absolute URL, but keeping project images with the site is often the simpler arrangement to maintain.
#1 Best Overall
- Cool Minimal HTML Tag T-Shirt
- Web Designer Tee Shirts T-Shirts for Web Developers and Web Designers
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Paths and names must match the actual file. Check the folder, spelling, capitalization, and extension—.jpg, .jpeg, and .png are not interchangeable names. If the file is beside the HTML file rather than in a subfolder, use its filename directly, such as src="photo.jpg".
Run a minimal example
Create this simple project structure:
my-page/
index.html
images/
photo.jpgIn index.html, add:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My image</title>
</head>
<body>
<img src="images/photo.jpg"
alt="A red bicycle leaning against a brick wall"
width="800" height="600">
</body>
</html>Open the page in a browser. The image’s displayed size can be adjusted with CSS; the width and height attributes still describe the file’s intrinsic proportions.
What should I write for alt text?
Write a concise text alternative that conveys the image’s useful information in the context of the page. For the example above, the bicycle and setting matter; “photo” or “photo.jpg” does not tell a reader what the image contributes. Alt text can also be displayed when an image cannot load, and it gives people who cannot see the image a way to access its relevant content.
Informative images
Describe the subject or information a reader needs from the image. You do not need to announce that it is an image; assistive technology already encounters it as an image. Consider the surrounding text: if it already conveys the same detail, avoid needless duplication in the alternative.
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 →Decorative images
For an image that adds visual decoration but no meaningful content, use an empty value: alt="". This tells assistive technology to treat it as decorative. Do not omit the attribute on an informative image as a substitute for writing a useful alternative.
Rank #2
- UX Designer - Funny Embed T-Shirt Design.
- A fun shirt as a gift idea for any frontend designer, HTML and CSS expert and web designer.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
<img src="divider-flourish.png" alt="">Why add width and height?
When you know the image’s pixel dimensions, include both attributes. The browser can use them to work out the aspect ratio and reserve space before the file finishes loading. That reduces unexpected page movement as images arrive. The dimensions do not prevent CSS from scaling the image to fit the page.
<img src="images/gallery-detail.jpg"
alt="Close-up of the carved pattern on the wooden bowl"
width="1200" height="800"
loading="lazy">Use the image’s intrinsic dimensions, not an arbitrary size chosen only for its on-page display. If CSS makes this image narrower, its proportions can still be preserved. If you do not know the dimensions, find them from the image file or its image-editing software rather than guessing.
How do responsive images work?
A single src is sufficient when one image file is appropriate for every display size. If you have real alternatives, HTML can let the browser choose a source suited to the rendered slot or device. Keep the candidate filenames and their stated dimensions accurate.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use srcset and sizes for resolution alternatives
For different pixel widths of the same composition, use srcset with width descriptors and tell the browser the expected display slot with sizes:
<img src="images/landscape-800.jpg"
srcset="images/landscape-400.jpg 400w,
images/landscape-800.jpg 800w,
images/landscape-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="1600" height="900"
alt="A mountain lake beneath a cloudy sky">The 400w, 800w, and 1600w descriptors must match the intrinsic pixel widths of their corresponding files. sizes describes the expected layout slot: this example says it is full viewport width at widths up to 600 pixels, and 800 pixels otherwise. The browser uses that information along with the available candidates to select an image.
Rank #3
- Do you like programming the web with HTML or CSS? Sounds like you need to buy this IT div Tag HTML Nerd Development Programming Geek Developer T Shirt. Perfect for someone who likes IT web development.
- Please refer to provided sizing chart to make sure you get the appropriate size IT div Tag HTML Nerd Development Programming Geek Developer T-Shirt.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Use picture for a different crop or format
Use <picture> when the source itself should change for a media condition or supported format—for example, an alternate crop at a narrow viewport. Put one or more <source> elements before a fallback <img>:
<picture>
<source srcset="images/portrait.avif"
media="(max-width: 600px)"
type="image/avif">
<source srcset="images/landscape.webp"
type="image/webp">
<img src="images/landscape.jpg"
alt="A kayaker crossing a calm lake"
width="1200" height="800">
</picture>The browser evaluates the source conditions and uses a matching option where it can. The nested <img> is the fallback and carries the alternative text. If the composition is unchanged and you only need different resolutions, srcset on <img> is usually the more direct choice.
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 minuteWhen should I lazy-load an image?
Add loading="lazy" to images that are off screen and can wait until a visitor scrolls near them. It defers loading that image rather than making it a priority at the start of the page:
<img src="images/gallery-detail.jpg"
alt="Close-up of the carved pattern on the wooden bowl"
width="1200" height="800"
loading="lazy">Do not lazy-load an image needed immediately in the initial viewport, such as the page’s prominent lead image. It may otherwise be delayed when a visitor first opens the page. Keep width and height on deferred images so the browser can reserve their space before they load.
How do I add a caption?
If the image needs a caption visible to everyone, group it in a <figure> and put the caption in <figcaption>:
<figure>
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton"
width="200" height="171">
<figcaption>A Tyrannosaurus skeleton on display in a museum.</figcaption>
</figure>The caption is visible page content. The alt value is a text alternative for the image; use each for its purpose rather than assuming the caption replaces the alternative text.
Why isn’t my image showing?
Work through the file reference first, then check whether the markup is using the right element and attributes.
- Check the path. Confirm the image is in the directory your relative
srcnames, relative to the HTML file. For an image in a sibling folder calledimages, the path isimages/dinosaur.jpg. - Check the exact filename. Match spelling, capitalization, and extension to the real file. A filename that looks nearly right can still point to a different path.
- Check the element. Use
<img>, not<image>, and do not add a closing</img>tag or nested content. - Check the markup around the image. Ensure the
srcvalue is quoted and that the tag has not been accidentally broken by surrounding HTML. - Check whether the image is deferred. If it has
loading="lazy", it may not load until it approaches the viewport. Remove lazy loading from content that must be ready immediately.
If a file still does not appear, verify that the file is present at the referenced location and that the browser can access it. Alt text can tell a visitor what the missing image was meant to convey, but it does not correct a broken path.
Should I use an image element or a CSS background?
Use <img> for an image that contributes content and needs a text alternative. Use a CSS background-image for decorative presentation; a CSS background does not provide the same semantic image alternative. A decorative HTML image can instead use alt="".
Preview your HTML page with a screenshot
After adding the image, open the page in a browser to check that the path resolves, the crop looks right, and the layout behaves at the sizes you care about. If the page is publicly reachable, an API can capture the rendered page without requiring you to set up browser automation locally.
Recommended Free Tools
Best Value
- 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
Or skip the browser setup
ScreenshotNeo can capture a URL as an image or PDF with one GET request. For example, to capture a live HTML page you have deployed:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/my-page -o shot.webpReplace the example URL with your page’s publicly accessible URL and set up an access key. See the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating the page verdict and billing status. An MCP server exposes screenshot tools to Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo free: 1,000 screenshots a month, no card required.
Frequently Asked Questions
Can an img element contain text or another element?
No. <img> is a void element; put a visible caption in a surrounding <figure> and <figcaption> if you need one.
Does the alt attribute control what the image looks like?
No. The image file and display styling determine its appearance; alt provides its text alternative.
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.
