The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →A well-formed HTML image uses a valid src, alternative text chosen for the image’s purpose, and intrinsic width and height values. Add responsive image sources or deferred loading only when they suit the page. The <img> element is void: it has no closing tag.
A solid default image tag
For an informative image, write markup like this, replacing the example path, dimensions and description with values that match the actual asset and its role on your page:
As an Amazon Associate I earn from qualifying purchases.
<img
src="/images/field-guide.jpg"
alt="Red fox standing in a snowy field"
width="1200"
height="800"
loading="lazy"
/>This is an illustrative example, not a tested implementation. The alternative text is appropriate only if it accurately describes the image and fits the surrounding content. See MDN’s <img> reference and HTML images guide.
Choose alt text for the image’s purpose
The alt attribute provides a textual replacement for an image’s content or purpose. Write a concise description that conveys what matters in context; do not use a filename or generic text such as “image.” The right wording depends on the surrounding page, not just the pixels.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Informative image: Describe the relevant content or meaning.
- Decorative, redundant or supplemental image: Use
alt=""when the image adds no information that needs to be conveyed separately. This avoids redundant output for assistive technology. - Image that is a link: Make the alternative identify the link’s destination or purpose, rather than merely describing its appearance.
The HTML Standard discusses these alternative-text cases in its embedded content section.
Set dimensions without distorting the image
Include the image’s intrinsic width and height so the browser can reserve space with the correct aspect ratio before the file loads. This helps reduce layout shifts. Use CSS to control the displayed size, and provide image files appropriate to the display rather than stretching or squeezing an image with mismatched dimensions. MDN explains this distinction in its HTML images guide.
Serve responsive image candidates when useful
Responsive markup lets the browser select an image file suited to the rendered slot or display density. The two common srcset patterns address different needs; do not combine their descriptor types in one srcset.
| Need | Markup approach | Key detail |
|---|---|---|
| Different file widths for a responsive layout | srcset with w descriptors, paired with sizes |
sizes describes the expected rendered slot width so the browser can choose a candidate. |
| Same rendered size, different display pixel densities | srcset with x descriptors |
This density-selection pattern does not require sizes. |
| Different crop or art direction by viewport | <picture> with conditional <source> elements |
Keep an <img> fallback with appropriate alternative text. |
For example, a width-based pattern looks like this:
<img
src="/images/field-guide-800.jpg"
srcset="/images/field-guide-400.jpg 400w,
/images/field-guide-800.jpg 800w,
/images/field-guide-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Red fox standing in a snowy field"
width="1200"
height="800"
/>Here sizes is an example of a layout description, not a universal value: adapt it to the space the image actually occupies. For guidance on width and density descriptors, sizes, and art direction, see MDN’s responsive images guide.
Use lazy loading selectively
loading="lazy" can defer an image that is outside the initial viewport. It can suit images farther down a page; do not apply it automatically to every image. An image expected to be visible immediately should not be deferred by default. Keep its dimensions present so the browser can reserve its space while it loads. MDN covers the attribute in the <img> reference.
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
Common mistakes to avoid
- Omitting
alt, using a filename, or writing only “image.” - Giving decorative or redundant imagery a description that repeats nearby information instead of using empty alt text.
- Leaving out intrinsic dimensions, or using them to resize an image inaccurately.
- Using width-based
srcsetwithout a usefulsizesvalue, or mixingwandxdescriptors. - Putting essential instructions in
title. MDN notes that its support is unpredictable and it may appear only on mouse hover; put important content in page text or appropriate alt text instead. See the MDN reference. - Lazy-loading every image without considering whether it should appear immediately.
Use images you have the right to publish
When selecting an image, make sure you own it, have permission to use it, or comply with its licensing conditions. MDN’s HTML images guide discusses this practical consideration; it is not a substitute for legal advice.
Quick Recap
Best Value
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.
