What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The basic way to add an image is an HTML <img> element with a fetchable src and an appropriate alt value:
<img src="images/photo.jpg" alt="A red bicycle leaning against a brick wall">Put the image file where your web server can deliver it, make the path relative to the HTML file (or use a complete URL), and write alternative text based on the image’s purpose. Then add real intrinsic dimensions and responsive CSS so the page remains accessible and stable on small screens.
1. Prepare the image and place it where the page can reach it
Save the image in a web-accessible folder in your site project. A common layout is:
project/
├── index.html
└── images/
└── photo.jpgWith that layout, index.html uses images/photo.jpg. A path is resolved from the location of the HTML document, not from your computer’s file browser. If the page is https://example.com/about/team.html, a relative images/photo.jpg normally points to https://example.com/about/images/photo.jpg. Use ../images/photo.jpg when the image folder is one directory above the page.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use a complete URL only when the image is hosted elsewhere
An absolute URL such as https://cdn.example.com/photo.webp can work, but the remote server must allow the browser to fetch the file and must keep the URL available. Do not use a local computer path such as C:UsersyouPicturesphoto.jpg; visitors cannot access your computer.
Check the file and URL
- Use a browser-supported image format such as JPEG, PNG, GIF, SVG or WebP.
- Match capitalization exactly. On many servers,
Photo.jpgandphoto.jpgare different files. - URL-encode unusual characters or, preferably, use simple names such as
mountain-lake.jpg. - Open the image URL directly in a browser. A 404, permission error or HTML error page means the
srcwill not display correctly.
2. Add the image with HTML
The src attribute identifies the file and alt supplies a text alternative. At least one of src or srcset is required for an image element; using both is common for responsive images.
<img src="images/photo.jpg" alt="A red bicycle leaning against a brick wall">For a production page, include the image’s actual intrinsic dimensions:
<img
src="images/photo.jpg"
alt="A red bicycle leaning against a brick wall"
width="1200"
height="800">width and height here describe the file’s intrinsic dimensions in pixels; they do not force the image to render at that size. They let the browser reserve the correct aspect ratio before the file arrives, reducing unexpected movement of surrounding content.
Make an image a link
When an image is the only content inside a link, its alternative text should describe the destination or action, not merely the picture:
<a href="/products/red-bicycle.html">
<img src="images/red-bicycle.jpg" alt="View the red bicycle product page" width="1200" height="800">
</a>Use a figure when a caption belongs with it
<figure>
<img src="images/lake.jpg" alt="Snow-covered mountain reflected in a lake" width="1600" height="1000">
<figcaption>The lake at sunrise after the first snowfall.</figcaption>
</figure>A caption is visible text; it does not replace the image’s alternative text. The alt should still communicate what a person who cannot see the image needs to know.
3. Write the right alt text
W3C Web Accessibility Initiative states: “Images must have text alternatives that describe the information or function represented by them.” Decide what to write from the image’s role in the surrounding content, not from a checklist that describes every visible detail.
Informative images
Include the essential information the image contributes. Keep it concise when the surrounding text already provides context.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRank #2
<img src="images/traffic-chart.png" alt="Traffic increased from 12,000 visits in January to 19,000 in March">If a chart or diagram contains substantial data, put the full explanation in nearby text or a linked long description. A short sentence cannot replace a complex table of values.
Decorative images
If an image adds no information and is purely visual decoration, use an empty value:
<img src="images/blue-divider.svg" alt="">alt="" tells assistive technology to ignore that image. Do not use an empty value for a meaningful photograph, instructional screenshot or product image.
Functional images
Describe what happens when the user activates the image. For a search icon that submits a form, alt="Search" is useful; alt="Magnifying glass" describes its appearance but not its function.
Free tools Windows power users keep installed
One-click scans. No signup required.
Text inside an image
If words in the image carry meaning, include those words in the alternative text or provide them as ordinary HTML nearby. W3C’s H37 technique specifically requires the alt attribute on img elements, and meaningful text should not be available only as pixels.
4. Make the image responsive without distortion
Add a rule that lets an image shrink to its containing column while preserving its proportions:
img {
max-width: 100%;
height: auto;
}This is a simple responsive pattern: the image can become narrower than its intrinsic width, but its automatic height preserves the aspect ratio. You can scope it to a component if other images need different behavior:
.article-body img {
display: block;
max-width: 100%;
height: auto;
}Keep the actual width and height attributes even when CSS controls the rendered size. The attributes reserve space; CSS controls how that reserved ratio fits the layout.
Recommended Free Tools
Prevent overflow in a narrow layout
Check the page at a width equivalent to 320 CSS pixels, the narrow-width condition named by WCAG 2.2’s Reflow criterion (SC 1.4.10). Ordinary images should fit without horizontal scrolling. If an image is a map, data table or other content whose meaning requires two-dimensional layout, that requirement has an exception; provide an accessible alternative rather than shrinking it until it is unusable.
Crop deliberately when you need a fixed shape
If a design requires a fixed card ratio, use a wrapper and make the crop explicit:
.card-image {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}Do not apply a crop that removes important information without explaining it in the text alternative or surrounding copy.
5. Serve different image files with srcset and sizes
A single src is appropriate when one file is small and the display width is predictable. When you have several versions of the same image, width-descriptor candidates let the browser select a suitable source:
<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="1000"
alt="Snow-covered mountain reflected in a lake">The 400w, 800w and 1600w values identify candidate widths. sizes tells the browser how wide the image is expected to appear: full viewport width up to 600 pixels, then about 800 pixels. The browser chooses among the candidates and can consider conditions such as available bandwidth.
Do not mix descriptor types
Use either width descriptors (w) with sizes, or pixel-density descriptors (1x, 2x) for a fixed display slot. Do not mix w and x descriptors in one srcset. Verify the exact syntax in the current MDN reference when adapting the pattern to your generated files.
6. Use picture when the source or crop should change
Use <picture> when you want the browser to select a different format or an art-directed crop, rather than merely a different resolution of the same image.
Offer alternate formats
<picture>
<source type="image/avif" srcset="images/hero.avif">
<source type="image/webp" srcset="images/hero.webp">
<img src="images/hero.jpg" alt="A cyclist riding beside the coast" width="1600" height="900">
</picture>The final img is the fallback and carries the alt text. Keep the intrinsic dimensions representative of the displayed fallback and avoid changing the subject without updating the alternative text.
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 →Rank #4
Use an art-directed crop
<picture>
<source media="(max-width: 600px)" srcset="images/portrait-crop.jpg">
<img src="images/wide-crop.jpg" alt="A red bicycle leaning against a brick wall" width="1600" height="900">
</picture>Use this when a narrow layout needs a genuinely different composition. If the mobile crop omits the bicycle or changes the image’s meaning, revise the alternative text or provide the missing information in nearby text.
7. Add an image in a common project workflow
- Copy the file: place it in your project’s public or static image directory.
- Inspect dimensions: record the real pixel width and height from your image editor or build pipeline.
- Write markup: add
src, a purpose-basedalt, and the intrinsic dimensions. - Apply layout CSS: use
max-width: 100%andheight: autounless the component has a documented crop. - Test the deployed URL: open the image URL directly and check the page at desktop and narrow widths.
- Test without the image: disable images or use a screen reader to confirm that the text alternative still communicates the intended information.
CMSs and JavaScript frameworks eventually produce the same browser-facing img, srcset or picture markup. The exact upload button differs by platform, but the path, dimensions, responsive behavior and alternative-text decisions remain the same.
8. Troubleshoot a missing or broken image
| Symptom | Likely cause | Fix |
|---|---|---|
| Broken-image icon or 404 | The relative path is calculated from a different page directory, or the filename/case is wrong. | Open the exact image URL directly, then correct the path and capitalization. |
| Image works locally but not after deployment | The file was not copied to the published directory, or the host uses case-sensitive paths. | Confirm the file exists in the deployed build and use matching lowercase names. |
| Image is stretched | CSS sets width and height independently, or the intrinsic ratio is wrong. | Use height: auto; set the HTML dimensions to the file’s actual ratio. |
| Horizontal scrolling on phones | The image is wider than its container and lacks a max-width rule. | Apply max-width: 100%; height: auto; and inspect parent elements for fixed widths. |
| Screen reader announces an unhelpful image | The alt describes appearance instead of purpose, or repeats nearby text. |
Rewrite it for the information or action the image represents; use alt="" only for decoration. |
| Wrong responsive file is selected | sizes does not describe the actual rendered width, or srcset descriptors are mixed. |
Measure the layout slot, update sizes, and use one descriptor type consistently. |
| Image is blank despite a valid URL | A content-security policy, authentication rule, hotlink restriction or unsupported response blocks the resource. | Inspect the browser Network and Console panels, then allow the image origin or serve the file from your own site. |
9. Performance, reliability and accessibility checks
- Reserve layout space: real dimensions reduce layout shifts while the file loads.
- Choose appropriate candidates:
srcsetavoids sending a very large desktop file to a small slot when alternatives exist. - Keep the subject available as text: important facts in a chart, screenshot or diagram need an equivalent textual explanation.
- Check every deployment: a successful local path does not prove that the published URL, permissions and case match.
- Inspect at narrow widths: confirm that images fit without horizontal scrolling at the WCAG reflow threshold unless two-dimensional presentation is essential.
- Do not treat empty alt as a speed shortcut: it is specifically for images assistive technology should ignore.
Or skip the browser setup
If you need an image of a web page rather than an image file embedded in your own HTML, ScreenshotNeo provides a one-request website screenshot API. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and whether the request was billed.
Use the ScreenshotNeo API documentation for the complete option list. A direct cURL request 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}`);ScreenshotNeo supports PNG, JPEG, WebP and PDF output; full-page captures with lazy images loaded; CSS-selector element captures; dark mode; device presets and custom viewports; retina scale; custom CSS and JavaScript; clicks; waits; request and resource blocking; headers, cookies, user agents and Authorization; timezone and geolocation; transparent backgrounds; resizing; chosen cache TTLs; signed image links; asynchronous jobs with signed webhooks; bulk capture of up to 100 URLs per call; usage reporting; and an OpenAPI specification. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Create a free ScreenshotNeo account to try it without a card.
10. A practical decision guide
| Need | Use | Why |
|---|---|---|
| One ordinary photo | img with src, alt, width and height |
Least markup and stable layout. |
| Same photo at several display widths | srcset plus sizes |
The browser can choose among resolution candidates. |
| Different format or composition | picture |
The source itself changes, not just its resolution. |
| Pure decoration | alt="" |
Assistive technology can skip it. |
| Image that activates a control or link | Functional alt |
Communicates the action or destination. |
| Screenshot of a live website | ScreenshotNeo API | Captures the rendered page and removes common consent and overlay clutter before delivery. |
Frequently Asked Questions
Should I put images in the HTML or CSS?
Put meaningful content images in HTML so they can have text alternatives. Use CSS backgrounds for decoration that has no informational or functional purpose.
Can I omit the width and height attributes if CSS sets them?
You can, but supplying the actual intrinsic dimensions gives the browser an aspect ratio early and helps prevent layout shifts.
Outdated 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 matchWindows 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 reinstallWhat if an image is also explained fully in the caption?
Keep an alt value that identifies the image’s role; avoid duplicating the entire caption. If it contributes nothing beyond the caption, an empty alt may be appropriate only when it is genuinely decorative.
How do I verify an image is accessible?
Turn off image display or use a screen reader and check that informative content and actions remain understandable from the text alternatives and nearby text.
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.
