We all know the good ol’, tireless element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the element.

Unlike , has a declarative approach for loading images, i.e., instead of only one image, takes any number of alternative images. The version that loads for the viewer depends on such factors as screen resolution and device. With , you no longer have to scale image resources.

In effect, takes to the next level. Not only does make your website look more professional by showing screen-optimized images, it also fosters search engine optimization (SEO) and compatibility.

This article explains how compares to and how to best harness the full power of .

triumphs over in three significant areas.

Resolution switching. Crisp, high-resolution images go a long way in making your site—and therefore your brand—look professional. You can switch to a version of your image that best suits the viewer’s screen resolution with .

Image rendering. With , you can render images based on the file format. That’s a remarkable capability because not all browsers support all file formats.

For instance, although most browsers—most recently, Safari—support WebP, less common browsers, such as KaiOS, do not. By serving images in specific formats with , you can ensure that all your site visitors enjoy a similar experience regardless of their browser.

Artistic control. You have complete artistic control with —a tremendous advantage for implementing art direction in responsive design. Instead of scaling an image up or down to fit the screen, you can leverage various versions of the image for specific viewports by editing the media attribute of the subelement.

Say, you want to showcase a high-quality photo of wild horses on your site. The full version looks great on desktop, but the details are lost on smartphones. With , you can serve an alternative photo to smartphone users—perhaps by zooming in on one of the horses.

You could also display a wide banner-ad on desktops and a square ad on smartphones.

Obviously, offers more options than and, correspondingly, a more captivating user experience.

mainly accepts two subelements: source and img. The code sample below shows a element with various image options.

, the first part of , specifies the media resources for pictures, audio, and video. Like many other HTML elements, including , is empty and self-closing: it has no content and hence needs no closing tag.

In case of multiple subelements, the browser chooses the first matching one based on specific criteria like viewport. Absent a matching , the browser falls back to . More details on that behavior later in this article.

media used to work in video before on the Chromium browser and still works on Safari. Web-performance expert Scott Jehl has proposed the reintroduction of that attribute for video vis-a-vis the element, which would be a huge boon for developers. See his full proposal HTML Video Sources Should Be Responsive.

srcset: As an alternative to the attribute, specifies audio or video elements for various situations.

sizes: This attribute, which depends on , specifies an image resource’s rendered width. takes effect only if you also specify the width dimension-descriptor with . Also, sizes only works for directly within the element.

type: This attribute specifies the image resource’s Multipurpose Internet Mail Extensions (MIME) type. Examples of those MIME types are , , , and .

Just like other HTML elements that accept attributes, holds all its attributes, as in the code sample below:

, the second subelement of , primarily serves as a fallback in case of no available resources in for rendering.

src: A mandatory attribute for , src contains the path to the image resource held by .

alt: This attribute contains the text that describes the image resource. If that resource is missing, the browser displays the text, which also gives clues to visually impaired individuals on what the image is about. And, as a bonus, text might also improve SEO.

cross-origin: This attribute takes use-credential or anonymous as its value so that third-party sites with cross-origin access enabled work in a element.

height: This attribute specifies the image resource’s height.

loading: This attribute takes lazy or eager as its value, based on which the browser would either load the image immediately or wait until a set of conditions are met.

width: This attribute specifies the image resource’s width.

also accepts general HTML attributes: styles, class, id, title.

Just like the subelement, is a void or self-closing subelement that does not accept content. You specify each attribute and its value, as in the code sample below:

If an image resource displays well on both mobile and desktop screens, would be overkill so use instead.

Also, certain browsers, such as Opera Mini, do not support . As a safeguard, always specify a fallback image-resource with .

As mentioned, takes and as its essential components. is optional, and you can have multiple subelements, each containing an image resource to render under a specified condition. The browser selects the first subelement that matches those conditions.

The srcset attribute can also take multiple image resources. The browser selects which item to render based on the width you specified.

In the above snippet, we load three different images from one element. For each resource, we set a corresponding width to define when the browser should render that image. A good tip is to take the mobile-first approach, specifying the width for the smallest image first, followed by the width of each of the larger images in ascending order.

On the other hand, is mandatory, serving as a default subelement. You can specify only one subelement within a element.

The code sample below shows in action.

Here, specifies a different image for mobile, tablet, and desktop. See these CodeSandbox examples for how the images look in those devices. For a feel of the effect of , resize the images to various screen sizes.

The element effectively facilitates image switches that depend on the viewport size, shape, and resolution. It’s also handy for serving different images so that your audience sees what you want them to see no matter their browser of choice.

Another significant benefit is that holds zero or more subelements, each containing an image resource, and an subelement that holds the fallback image absent a matching subelement. On top of that, serves the best image for the viewer’s device, ensuring high-quality content regardless of screen size.

Transforming images with Cloudinary works perfectly with and its subelements. Not only does Cloudinary automatically configure an optimal attribute that accords the browser image options, the platform also supports art direction out of the box, leading to fast-loading and well-displayed websites on all screens and browsers.