Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.
Talking about web design trends in 2018, there are several keywords that come to my mind: mobile first, material design, particle backgrounds and digital illustrations. However, there is one pattern which was invented a long time ago but is still kick-*** even now, the so-called lazy loading images.
In this article, I will introduce two web components for lazy loading your images and for the keeping website momentum.
Progressive-img by cuddlecheek
By using the popular Intersection Observer API, progressive-img enables users to load assets lazily and progressively. An src is all it needs for the magic to happen, but for better tweaking, also specify the placeholder, srcset, alt, and load-strategy. Load-strategy controls when the image starts loading. It comes with two options: instant, to load immediately and on-visible, to charge when entering the viewport.
By default, clicking the placeholder will always trigger the image loading no matter what. If you want to dig deeper, the transition and placeholder blur can be customized as well, using custom CSS property: --placeholder-filter, --placeholder-scale, --transition-duration & --transition-timing-function. For a fallback solution, use noscript.on-timing-function. For a fallback solution, use noscript.
As a side note, the Intersection Observer API can observe the changes of a target element and provide users with great deals of usage, including lazy loading images.
Plastic-image by mlisook
Plastic-image is the combination of iron-image with the powerful srcset attribute. You may provide multiple descriptors for the srcset of a single image. For example: srcset="foo-s.jpg 150w, foo-sh.jpg 150w 2.0x, foo-m.jpg 405w, foo-mh 2.0x 405w, foo-l 1024w, foo-t 500w 750h".
The system will then decide the best image for that specific device and resolution. Even better, apply these attributes for smoother loading:
lazy-load: only load the image when entering the viewportuse-element-dim: use the rendered size of the control instead of the viewportfallback-src: use this instead of src, for a fallback source.
Compatibility
The table below will shortly summarize the component info and compatibility on multiple platforms. Browsers include Chrome Canary, Safari Tech Preview, Opera, Firefox Nightly, Edge and Internet Explorer 11.
| Component |
Library |
Browsers |
| progressive-image |
Polymer^3.0.0 |
C,S,O,F |
| plastic-image |
Polymer^3.0.0 |
C,S,O,F,E |
Final Words
As images account for a noticeable amount of traffic on a website, you want to optimize the website performance by using these components. Love to find more solutions for keeping your viewers happy? We have more of these components for you.
Get in touch with us for more details about how to use lazy-loading images with web components, or let us know about how you’ve used them in the comments section below!
Click here for more awesome web components