TheHTML<img> element lets you embed images into an HTML document, while the<picture> element enablesresponsive images. In this guide you'll find links to resources that deal with adding images to websites.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.

Includingwidth andheight attributes helps avoid jank

This changes how browsers load images so theiraspect ratios are calculated by the browser early on and can later be used to reserve the display size of an image before it's loaded.

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>

TheHTML<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 likealt text for people who don't see the image.

<picture>

TheHTML<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

Theobject-fitCSS property sets how the content of areplaced element, such as an<img> or<video>, should be resized to fit its container.

object-position

Theobject-positionCSS property specifies the alignment of content in a selectedreplaced 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

Thebackground-imageCSS property sets one or more background images for an element.

See also

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.