A cross-framework component for responsive, high-performance images using image CDNs
<img>
tag! No extra elements, no runtime JavaScript. Easy to style.
No legacy hacks or workarounds.@unpic/placeholder
for more
options.For details of usage, see the documentation.
While it's easy to use an <img>
tag for images, if you want to follow best
practices and deliver the most performant image to your users then it can take a
lot of work. Some frontend frameworks will automate this for you, but they often
rely on slow pre-rendering of images, or on running image optimizers on your own
site. They also generate complex HTML with wrappers and spacer elements that
make images hard to style.
Most images on modern websites are hosted on a CDN or CMS that can resize images on the fly and deliver them at the edge. Despite this, most web frameworks will still download and resize the image at build time or on your server, rather than using the CDN, or just uses a single source image rather than handling multiple resolutions.
This library works with any frontend framework or none, and uses your existing image CDN or CMS, with no additional configuration.
For more details, see this post.
This library uses unpic to detect the image CDN, and then uses the CDN's URL API
to resize and format images. It then generates the correct srcset
and sizes
attributes for the image. It uses new features built into modern browsers to
handle lazy loading, fetch priority and decoding. It also uses pure CSS to
handle responsive resizing of images, preserving aspect ratio and avoiding
layout shift. Unlike most other image components, it does not use any
client-side JavaScript by default, and generates just a single <img>
tag
without any wrapper divs or padding elements.
You can use any image CDN supported by unpic lib, including:
Published under the MIT licence. © Matt Kane 2023.