Using images in 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.
These articles cover some of the HTML elements and CSS properties that are used to control how images are displayed on the web.
<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
alttext for people who don't see the image.
<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.
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-imageCSS property sets one or more background images for an element.
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.
heightattributes 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.
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.