The img element embeds an image file in a web page. The browser retrieves the separate file from the location given by src, then displays it where the element appears. Think of the tag as a tiny sign saying, “Image goes here—please fetch it.” section 6.1
Build the element from three useful attributes:
- src identifies the image file using a URL, filename, or path such as /images/logo.png. section 6.1
- alt supplies replacement text for missing images and helps screen readers and Braille apps describe meaningful images. Use an empty value for purely decorative images. section 6.1
- title optionally supplies tooltip text. section 6.1
A logo that links home
Use an image as a link by wrapping the img element in an a element: <a href="https://atomicwebdesign.io/"><img src="/images/atomic-logo.png" alt="Atomic Web Design logo" title="Logo for Atomic Web Design"></a>. The image becomes clickable, while its alternative text still identifies it. section 6.5
An img element is inline, so it can flow inside a paragraph or other block. Use CSS vertical-align to place it at the baseline, bottom, middle, top, or a precise pixel offset relative to nearby text. section 6.7
img {
max-width: 100%;
height: auto;
}
Make an image fluid with max-width: 100% and height: auto. It shrinks with its parent container without exceeding its original width or distorting its aspect ratio. section 14.7
