HTML lowsrc Attribute

The obsolete HTML lowsrc attribute was historically used with the <img> element to specify a lower-resolution image that could be displayed while the primary image specified by src was loading.

Obsolete Attribute: The lowsrc attribute is obsolete and should not be used in modern HTML. Use optimized images and modern responsive image features such as srcset and <picture> when different image resources are needed.

Historical Syntax

The lowsrc attribute contained the URL of a lower-resolution image, while the src attribute identified the primary image:

<img src="large-image.jpg"
     lowsrc="small-image.jpg"
     alt="Mountain landscape">

Supporting browsers could display small-image.jpg first and replace it with large-image.jpg after the primary image finished loading.

Historical Elements

The obsolete lowsrc attribute was associated with the <img> element.

Element	Historical Purpose
`<img>`	Specified a lower-resolution image that could be displayed before the primary image finished loading.

Historical Use

The lowsrc attribute was introduced when internet connections were often much slower and large images could take a noticeable amount of time to download. A smaller image could be displayed first so the user saw an approximate version of the image while waiting for the primary image.

The browser could then replace the lower-resolution image with the resource specified by src after it became available.

This technique required two image resources and depended on browser-specific loading behavior. The temporary image was not intended to be a responsive alternative selected according to the user's screen size or display resolution.

Why It Became Obsolete

The lowsrc attribute was never a dependable cross-browser method for loading images and is not part of modern HTML. Modern browsers provide more capable image loading and resource-selection features.

Modern image formats, image optimization, responsive images, browser caching, and native loading features provide better ways to reduce unnecessary image downloads and improve page performance.

Modern Alternative

There is no direct modern replacement for lowsrc. The appropriate solution depends on why different image resources are needed.

Historical HTML

<img src="large-image.jpg"
     lowsrc="small-image.jpg"
     alt="Mountain landscape">

Responsive Images with srcset

When the goal is to provide images at different sizes, the srcset attribute allows the browser to select an appropriate resource:

<img src="/img/images/image-900x600.png"
     srcset="/img/images/image-600x400.png 600w,
             /img/images/image-900x600.png 900w,
             /img/images/image-1200x800.png 1200w"
     sizes="(max-width: 600px) 100vw, 900px"
     alt="Example image">

Unlike lowsrc, srcset does not specify a temporary image that must later be replaced. It provides image candidates so the browser can choose a suitable resource.

Using the <picture> Element

The <picture> element can provide additional control when different image resources should be selected for different conditions:

<picture>
  <source media="(max-width: 600px)" srcset="/img/images/image-600x400.png">
  <img src="/img/images/image-900x600.png" alt="Example image">
</picture>

These modern features solve different problems from the old lowsrc behavior, but they provide standardized ways to offer multiple image resources without relying on an obsolete attribute.

Image Loading

Modern HTML also provides the loading attribute for controlling when certain images are loaded. For example, loading="lazy" can allow an off-screen image to be loaded later when it approaches the visible area:

<img src="/img/images/image-900x600.png"
     alt="Example image"
     loading="lazy">

Lazy loading is not a replacement for the old low-resolution preview behavior. Instead, it can reduce unnecessary initial image loading for content that is not immediately visible.

Legacy Browser Support

The lowsrc attribute was historically implemented by some older browsers, but support and loading behavior were not dependable across browsers.

Modern webpages should not rely on legacy lowsrc behavior. Use current HTML image features and properly optimized image resources instead.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Other attributes related to images and image resources include:

src - Specifies the primary image resource for an <img> element.
srcset - Provides multiple image candidates that the browser can choose between.
sizes - Provides information about the intended displayed size of an image when used with width descriptors in srcset.
loading - Provides a hint about when an image or iframe should be loaded.
longdesc - An obsolete attribute historically used to provide a URL for a detailed description.

Specifications

The lowsrc attribute is obsolete and should not be used in modern HTML. Modern webpages should use current image features appropriate to the purpose rather than relying on legacy low-resolution image loading behavior.

HTML lowsrc Attribute