Using images in HTML - Web media technologies 编辑

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

References

These articles cover some of the HTML elements and CSS properties that are used to control how images are displayed on the web.

HTML

<img>

The HTML <img> element is used to embed an image in a webpage. It supports a wide range of attributes that control how the image behaves and allows you to add important information like alt text for people who don't see the image.

<picture>

The HTML <picture> element contains zero or more <source> elements and one <img> element which provides versions of an image for different display/device scenarios. The browser considers each child <source> element and chooses 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 content in a selected replaced element 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 for an element.

Guides

These articles provide guidance on selecting and configuring image types.

Image file type and format guide

A guide to the various image file types commonly supported by web browsers including 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 changes how browsers load images so their aspect ratios are calculated by the browser early on and can later be used to correct the display size of an image before it's loaded.

Other topics

Related topics that 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.