What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use an <img> element with a valid src, context-appropriate alt text, and intrinsic width and height attributes. Add srcset and sizes when the same image is available at several resolutions; use <picture> and <source> when the browser needs alternate formats or different compositions. The browser chooses from the candidates you provide, so your markup supplies accurate options and layout hints rather than forcing one device-specific file.
The basic HTML image element
The ordinary pattern is an <img> element with four useful pieces of information:
src: a fallback or default image URL.alt: a textual replacement that depends on the image’s purpose in its surrounding content.widthandheight: the image’s intrinsic dimensions, in CSS pixels, preserving its aspect ratio while it loads.
<img
src="/images/coast.jpg"
alt="A red kite flying above a beach"
width="1200"
height="800">The dimensions in this example match a 3:2 source image. They allow the browser to establish the correct aspect-ratio box before downloading the file, which reduces reflow and layout shift. The MDN <img> reference documents the element’s attributes and loading behavior.
Write alternative text for the context
alt is not automatically a caption or a filename. Describe the information the image contributes to this page. If the article says “The red kite crosses the shoreline,” an alt value such as “A red kite flying above a beach” is useful. If an image is purely decorative or repeats text already next to it, use an empty value:
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<img src="/images/rule.svg" alt="" width="24" height="2">An empty alt tells assistive technology to skip that image. Do not omit the attribute on an informative image: omission can cause a screen reader to announce an unhelpful URL or filename.
Choosing a source and avoiding common URL errors
src can be an absolute URL such as https://cdn.example.com/photo.jpg or a path relative to the document, such as /images/photo.jpg. The URL must resolve to an image response that the browser can decode. Check spelling, case sensitivity on the server, URL encoding for spaces and special characters, and whether the asset is blocked by authentication or a content-security policy.
If the request fails, the browser cannot display the image. Keep a meaningful alt value so the surrounding message remains understandable. A text link or adjacent explanation can provide a useful recovery path for critical content.
Intrinsic dimensions, aspect ratio and loading performance
Always record the real intrinsic width and height when you know them. Those attributes let the browser calculate the aspect ratio before the resource arrives, reserve space, and reduce layout movement. They do not force the image to render at that pixel size; CSS can scale it responsively.
Recommended Free Tools
<img
src="/images/diagram.png"
alt="Flow from the web server to the browser"
width="1600"
height="900"
style="max-width:100%;height:auto">For responsive layouts, a stylesheet rule such as max-width: 100%; height: auto; keeps the image inside its container while preserving the declared ratio. Do not replace real dimensions with arbitrary values merely to silence a validator.
When to use lazy loading
loading="lazy" asks the browser to defer an image that is likely to be outside the initial viewport:
<img
src="/images/gallery-07.jpg"
alt="Stone arch over a river"
width="1200"
height="800"
loading="lazy">It is appropriate for galleries and long pages, but the first visible hero or logo image should not be delayed casually. Explicit dimensions are especially important on lazy images: without a known box, a browser may have no reason to decide that the image is near the viewport. MDN’s guidance on fast-loading pages covers this interaction at Author fast-loading HTML pages.
Responsive resolution with srcset and sizes
Use responsive images when the same composition is exported at several intrinsic widths. A srcset with w descriptors lists those real file widths; sizes tells the browser how wide the image’s rendered slot is likely to be under each media condition.
<img
src="/images/coast-1200.jpg"
srcset="/images/coast-480.jpg 480w,
/images/coast-800.jpg 800w,
/images/coast-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="A red kite flying above a beach"
width="1200"
height="800">Here, 480w, 800w, and 1200w must match the files’ actual intrinsic widths. The sizes value says that on a viewport up to 600 pixels the slot is approximately the viewport width; otherwise it is about 800 pixels. It describes layout width, not the intrinsic width of any file.
The browser combines these hints with device pixel ratio, zoom, network conditions and its own selection algorithm. It may choose a larger or smaller candidate than a simple breakpoint calculation would suggest. Markup offers candidates and constraints; it does not guarantee that every browser and device will fetch one named file. See MDN’s responsive images guide for the selection model.
Use density descriptors for a fixed rendered size
If an image always occupies the same CSS size but you have versions for different pixel densities, use x descriptors instead:
<img
src="/images/logo.png"
srcset="/images/logo.png 1x, /images/logo@2x.png 2x"
alt="Northwind"
width="160"
height="40">This says that the 160 × 40 CSS-pixel logo has a 1x and a 2x resource. Do not add sizes to this density list, and do not mix w and x descriptors in one srcset.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →How to choose a sizes value
- Identify the image’s CSS slot at each layout range. A full-bleed mobile image may be
100vw; a desktop article column might be720px. - Write media conditions from the narrowest range to the widest, ending with the default.
- Use the slot width, including any known gutters, not the source file width.
- Verify that each
wdescriptor reflects the corresponding file’s real width.
If the slot is always half the viewport above 900 pixels, a value such as sizes="(max-width: 900px) 100vw, 50vw" is more informative than a fixed number. Revisit it whenever the CSS grid changes.
Using picture and source for format choices
<picture> is a container for conditional image sources. Each <source> can advertise a format with type, or a composition with media. The nested <img> remains mandatory: it is the fallback, receives the alternative text, and is the element that actually renders.
<picture>
<source srcset="/images/coast.avif" type="image/avif">
<source srcset="/images/coast.webp" type="image/webp">
<img src="/images/coast.jpg"
alt="A red kite flying above a beach"
width="1200"
height="800">
</picture>The browser considers the sources in order and uses one it supports; older or unsupported browsers fall back to the JPEG img. Keep the fallback independently usable.
Art direction: change the composition
Resolution switching preserves the same composition. Art direction uses different crops or subjects for different conditions:
<picture>
<source media="(max-width: 600px)"
srcset="/images/coast-tall.jpg"
type="image/jpeg">
<img src="/images/coast-wide.jpg"
alt="A red kite flying above a beach"
width="1200"
height="800">
</picture>The narrow source can place the kite in a taller crop while the fallback serves a wide desktop composition. Use picture for a genuine media-dependent composition, not merely because several resolutions exist. The MDN <picture> reference explains format and media selection.
Combining picture with responsive candidates
Each source may also have its own srcset and sizes. This is useful when, for example, both the mobile crop and desktop crop have several widths:
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
<picture>
<source media="(max-width: 600px)"
srcset="/images/coast-tall-480.jpg 480w,
/images/coast-tall-800.jpg 800w"
sizes="100vw"
type="image/jpeg">
<img src="/images/coast-wide-1200.jpg"
srcset="/images/coast-wide-800.jpg 800w,
/images/coast-wide-1200.jpg 1200w"
sizes="(max-width: 900px) 100vw, 800px"
alt="A red kite flying above a beach"
width="1200"
height="800"
loading="lazy">
</picture>Give every candidate accurate dimensions and test the resulting crops at the layout widths your design actually uses.
Which pattern should you use?
| Need | Pattern | Important decision |
|---|---|---|
| One ordinary image | img with src, alt, width and height |
Keep the markup simple and describe the image’s purpose. |
| Same composition at multiple widths | img with srcset using w descriptors and sizes |
Describe the real rendered slot and file widths. |
| Same rendered size at multiple pixel densities | img with srcset using x descriptors |
Provide density variants and omit sizes. |
| Different crop or composition | picture with conditional source elements and an img fallback |
Treat it as art direction. |
| Modern format with fallback | picture with source type and an img fallback |
Place supported alternatives before the fallback. |
Accessibility and performance checklist
- Provide a useful
altreplacement for informative images; usealt=""for decorative or redundant images. - Do not use alt text as a generic caption, keyword list or file name.
- Declare intrinsic
widthandheightto reserve aspect-ratio space. - Use
loading="lazy"for suitable offscreen content, not automatically for the initial visible image. - Use
srcset/sizesfor resolution selection andpicture/sourcefor formats or art direction. - Do not mix
wandxdescriptors in one candidate list. - Remember that the browser retains discretion; zoom, device density and network state can affect the selected file.
- Keep a working
imgfallback inside everypicture.
Troubleshooting image markup
The image is blank or shows broken-image text
Open the image URL directly and inspect the network response. Correct a typo, case mismatch, redirect, authentication requirement or server response with the wrong content type. Preserve useful alt text so the page still communicates its intent when loading fails.
The wrong responsive file is downloaded
Check that every w number equals the file’s intrinsic width and that sizes matches the actual CSS slot. An inaccurate slot hint can make a browser select an unnecessarily large or small candidate. With x descriptors, remove sizes and verify that the CSS display size matches the declared dimensions.
The layout jumps while images load
Add the true intrinsic width and height, or reserve an equivalent aspect ratio in CSS. Lazy loading without a measurable initial box can also prevent the browser from determining proximity to the viewport.
A modern format is ignored
Put the source elements before the fallback img, include the correct MIME value in type, and confirm that the file is served with a matching response header. Unsupported formats correctly fall through to the img.
The mobile crop never appears
Ensure the art-directed source has the intended media condition and that its URL is valid. Remember that the nested img is the fallback, not a second art-directed source with a competing condition.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Best Value
Or skip the browser setup
If your goal is to obtain a rendered screenshot of a page rather than author image markup, ScreenshotNeo provides a single website screenshot API request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and each response reports the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf.
Use the ScreenshotNeo documentation for all options. A basic request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
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)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}`);Every plan includes the features: full-page and selector captures, 12 device presets or custom viewports, retina scale, dark mode, PDF output, custom CSS and JavaScript, clicks, waits, blocking controls, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed links, asynchronous webhooks, up to 100 URLs per bulk call, usage reporting and an OpenAPI specification. Parameter names used by other screenshot APIs also work for easier migration.
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 start.
FAQ
Should I put alt text on a decorative image?
Yes, include the alt attribute with an empty value, alt="", so assistive technology can skip it.
Can srcset force a particular file at a breakpoint?
No. It supplies candidates and hints. The browser also considers pixel density, zoom, network conditions and other selection factors.
Is picture required for WebP or AVIF?
Use picture when you need format fallback or art direction. If one URL and one format are sufficient, a normal img is simpler.
Are width and height the displayed size?
They establish intrinsic dimensions and aspect ratio. CSS may scale the rendered image to another size.
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 & 11Crashes, 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 minuteQuick 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.
