Img

Drop in replacement for the HTML <img> tag which supports lazy-loading. Improves load times by waiting for the image to scroll into view before actually downloading it.

Sourceopen in new window

Features:

Built to behave as close to native <img> element as possible.
Requires alt attribute. Sets role to presentation if empty.
Provides lazy-loading with more options than native.
Supports placeholder colors or images.

Note that this site has the following global CSS applied to these examples:

img {
  max-width: 100%;
  height: auto;
}

Default use

Pass in the image dimensions to avoid the page jumping when the image loads

Colored Placeholder

Blurred Thumbnail Placeholder

Custom Transition Duration

If you don't like the default transition duration (300ms), you can pass a custom duration in miliseconds.

Misc

Don't forget all the other best practices such as srcset attribute and alt text

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, placeholder: string, img: string }"

# Img

# Default use

# Colored Placeholder

# Blurred Thumbnail Placeholder

# Custom Transition Duration

# Misc