Using images in HTML
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 likealttext 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-fitCSS 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-positionCSS 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-imageCSS 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.
- Including
widthandheightattributes helps avoid jank -
This changes how browsers load images so their aspect 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.
Other topics
Related topics that may be of interest.
- 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.