HTML as Attribute

The HTML as attribute identifies the type of resource referenced by a <link> element when a resource is being preloaded. It helps the browser handle the resource appropriately by specifying its expected destination, such as an image, font, script, or style sheet.

Syntax

The as attribute is used on a <link> element together with a suitable rel value. With rel="preload", the as attribute is required and identifies the type of resource being preloaded.

<link rel="preload" href="resource" as="resource-type">

For example, the following link preloads an image:

<link rel="preload" href="/img/images/peacock.jpg" as="image">

Attribute Values

The as attribute accepts keywords that identify the destination of the requested resource.

Value	Description
`audio`	Identifies an audio resource.
`document`	Identifies a document resource.
`embed`	Identifies a resource intended for embedded content.
`fetch`	Identifies a resource that will be requested using a fetch operation.
`font`	Identifies a font resource.
`image`	Identifies an image resource.
`object`	Identifies a resource intended for an embedded object.
`script`	Identifies a script resource.
`style`	Identifies a style sheet resource.
`track`	Identifies a text track resource, such as captions or subtitles.
`video`	Identifies a video resource.
`worker`	Identifies a worker script resource.

Elements That Use the as Attribute

The as attribute is currently valid on the <link> element when used with appropriate resource-loading link types such as preload and modulepreload.

Element	Description
`<link>`	Identifies the destination type of a resource being preloaded.

Using the as Attribute

The following example tells the browser to preload an image resource:

<link rel="preload" href="/img/images/peacock.jpg" as="image">

The href attribute identifies the resource, while as="image" tells the browser that the requested resource will be used as an image.

Preloading Resources

Preloading allows the browser to begin fetching an important resource before it would normally discover that resource while processing the page.

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="image.jpg" as="image">

The as value should match how the resource will actually be used. This helps the browser apply the correct request settings, security policies, and resource priority.

Using as with modulepreload

The as attribute can also be used with rel="modulepreload". Module preload links are designed specifically for preloading JavaScript modules.

<link rel="modulepreload" href="module.js" as="script">

For modulepreload, the as attribute is optional. When it is omitted, the resource is treated as a script. When specified, its value must be a valid destination for a module preload request.

Choosing the Correct Value

The as value should describe the resource's intended use. For example, a CSS file uses style, a JavaScript file uses script, and an image uses image.

<!-- Style sheet -->
<link rel="preload" href="styles.css" as="style">

<!-- JavaScript -->
<link rel="preload" href="script.js" as="script">

<!-- Image -->
<link rel="preload" href="image.jpg" as="image">

Using an incorrect destination can prevent the preloaded resource from being reused as intended and may result in an unnecessary additional request.

Common Mistakes

Do not omit the as attribute from a rel="preload" link. A preload link requires a valid as value.

<!-- Correct -->
<link rel="preload" href="styles.css" as="style">

Do not use an as value that does not match the resource's intended destination. For example, a style sheet should use as="style", not as="script".

Do not add as to ordinary <link> elements where it does not apply. It is intended for resource-loading relationships that support the attribute, specifically preload and modulepreload.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The as attribute on the <link> element is widely supported in current core browsers. Its effect depends on the link relationship and the type of resource being fetched.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the as Attribute

The example preloads an image using as="image". Change the resource and its as value to see how the attribute identifies different resource types.

Play in Editor

Summary

The HTML as attribute identifies the destination type of a resource referenced by a <link> element. It is required with rel="preload" and can also be used with rel="modulepreload". Choosing the correct value helps the browser fetch and process the resource appropriately.