Using images in HTML

The HTML <img> element lets you embed images into an HTML document, the <picture> element enables responsive images. In this guide you will find links to resources that deal with adding images to websites.

References

HTML

These articles cover HTML features for using images on the web.

<img>
The <img> element is used to embed an image into a webpage. It supports a wide range of attributes to control how the image behaves and add important information such as alt text for people who do not see the image.
<picture>
The HTML <picture> element contains zero or more <source> elements and one <img> element to provide versions of an image for different display/device scenarios. The browser will consider each child <source> element and choose the best match among them.

CSS

object-fit
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
object-position
The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.
background-image
The background-image CSS property sets one or more background images on an element.

Guides

Image file type and format guide
A guide to the various image file types commonly supported by web browsers, with details about their individual use cases, capabilities, and compatibility factors. Additionally, this article provides guidance for selecting the best image file type for a given situation.
Mapping the width and height attributes of media container elements to their aspect-ratio
This change to how browsers load images means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the size needed to display the image before it has loaded.

Other topics

Related topics which may be of interest.

Learn HTML: Responsive Images
In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.