{"id":36154,"date":"2024-10-23T07:00:00","date_gmt":"2024-10-23T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36154"},"modified":"2024-10-23T11:20:59","modified_gmt":"2024-10-23T18:20:59","slug":"optimized-image-custom-element-web-components","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components","title":{"rendered":"Building an Optimized Cloudinary Image Custom Element With Web Components"},"content":{"rendered":"\n

Every developer knows the benefits of code reusability. It saves time and ensures consistency..<\/p>\n\n\n\n

Web components<\/a> (WC) allow you to create reusable and interoperable custom elements that are encapsulated, so they\u2019re more easily integrated into other projects regardless of framework. Web components work with all major browsers, though with varying degrees of support.<\/p>\n\n\n\n

In this blog post, I\u2019ll demonstrate how you can create a reusable and lightweight web component for viewing images from Cloudinary with support for transformations and lazy loading.<\/p>\n\n\n\n

Lit<\/h2>\n\n\n\n

Although having web components as a standard for your browsers is great, frameworks and libraries provide many more niceties. Lit<\/a> helps alleviate this by adding additional features such as HTML templates, embedded JavaScript expressions, and easier attribute binding, streamlining the web development experience.<\/p>\n\n\n\n

Boilerplate<\/h2>\n\n\n\n

Let\u2019s make a barebones web component with Lit that can render a Cloudinary image. We\u2019ll add features to it one at a time throughout this blog post. This initial version will only render images and nothing else.<\/p>\n\n\n\n

First, let\u2019s install Lit using npm<\/code>:<\/p>\n\n\n

$ npm i lit<\/code><\/span><\/pre>\n\n\n
With Lit installed, we\u2019ll make our web component live in its own file called cdl-image.js<\/code> (we\u2019re effectively making a minimal version of CldImage<\/code><\/a>):<\/p>\n\n\n
import<\/span> { LitElement, css, html, nothing } from<\/span> \".\/node_modules\/lit\/index.js\"<\/span>;\n\nexport<\/span> class<\/span> CdlImage<\/span> extends<\/span> LitElement<\/span> <\/span>{\n\n\u00a0\u00a0static<\/span> styles = css`\n\n\u00a0\u00a0\u00a0\u00a0:host<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display<\/span>: inline-block;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0`<\/span>;\n\n\u00a0\u00a0static<\/span> properties = {\n\n\u00a0\u00a0\u00a0\u00a0baseUrl<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0src<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0alt<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0};\n\n\u00a0\u00a0render() {\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> html`\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src<\/span>=<\/span><\/span>${this<\/span>.src ? this<\/span>._buildImageUrl() : nothing}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt<\/span>=<\/span><\/span>${this<\/span>.alt ?? nothing}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0`<\/span>;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0* Builds an image URL to Cloudinary using the custom element attributes.\n\n\u00a0\u00a0\u00a0*\/<\/span>\n\n\u00a0\u00a0_buildImageUrl() {\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Strip trailing slash if one exists.<\/span>\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> baseUrl = this<\/span>.baseUrl.endsWith(\"\/\"<\/span>)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0? this<\/span>.baseUrl.slice(0<\/span>, -1<\/span>)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0: this<\/span>.baseUrl;\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> `${baseUrl}<\/span>\/${this<\/span>.src}<\/span>`<\/span>;\n\n\u00a0\u00a0}\n\n}\n\nwindow<\/span>.customElements.define(\"cdl-image\"<\/span>, CdlImage);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, to utilize the web component, we\u2019ll create an index.html file to fetch that script and use the component:<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n\n<html<\/span>><\/span>\n\n\u00a0\u00a0<head<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<title<\/span>><\/span>Cloudinary Image Web Component<\/title<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<script<\/span> type<\/span>=\"module\"<\/span> src<\/span>=\".\/boilerplate.js\"<\/span>><\/span><\/script<\/span>><\/span>\n\n\u00a0\u00a0<\/head<\/span>><\/span>\n\n\u00a0\u00a0<body<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<main<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1<\/span>><\/span>Cloudinary Image Web Component Demo<\/h1<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<cdl-image<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0baseUrl<\/span>=\"https:\/\/res.cloudinary.com\/demo\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src<\/span>=\"cld-sample-5\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt<\/span>=\"a white tennis shoe with a blue insole\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0><\/span><\/cdl-image<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/main<\/span>><\/span>\n\n\u00a0\u00a0<\/body<\/span>><\/span>\n\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
For baseURL<\/code>, you\u2019ll want to use your own if you have your own image assets. Otherwise, demo<\/code> works fine. With that, you have everything you need to render an image.<\/p>\n\n\n\n
$ npm i -D vite<\/code><\/span><\/pre>\n\n\n
Run Vite by executing npx vite<\/code> in the root of your project, which will make the example accessible on http:\/\/localhost:5173\/<\/code>. Navigating there should result in a picture of a large tennis shoe.<\/p>\n\n\n\n
Transformations<\/strong><\/h2>\n\n\n\n
Let\u2019s add support for the most common image transformations, that being width, height, format, crop, zoom, and gravity.<\/p>\n\n\n\n
First, we need to add those transformation properties as fields on our web component:<\/p>\n\n\n
static<\/span> properties = {\n\n\u00a0\u00a0\u00a0\u00a0baseUrl<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0src<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0alt<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0width<\/span>: { type<\/span>: Number<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0height<\/span>: { type<\/span>: Number<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0format<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0crop<\/span>: { type<\/span>: String<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0zoom<\/span>: { type<\/span>: Number<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0gravity<\/span>: { type<\/span>: String<\/span> },\n\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Our URL-building method will have to be updated to use these transformations as well. We can modify it to check if they\u2019ve been set on the component, and if so, add them to a comma-delimited list of transformations in the URL:<\/p>\n\n\n
\/**\n\n\u00a0* Builds an image URL to Cloudinary using the custom element attributes.\n\n\u00a0*\/<\/span>\n\n_buildImageUrl() {\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> transforms = [];\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Add attribute specified transformations to the URL.<\/span>\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>.width != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`w_${Math<\/span>.round(this<\/span>.width)}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>.height != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`h_${Math<\/span>.round(this<\/span>.height)}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>.format != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`f_${this<\/span>.format}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>.crop != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`c_${this<\/span>.crop}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>.zoom != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`z_${this<\/span>.zoom}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>.gravity != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`g_${this<\/span>.gravity}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Strip trailing slash if one exists.<\/span>\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> baseUrl = this<\/span>.baseUrl.endsWith('\/'<\/span>) ?\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>.baseUrl.slice(0<\/span>, -1<\/span>) :\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>.baseUrl;\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> `${baseUrl}<\/span>\/${transforms.join(','<\/span>)}<\/span>\/${this<\/span>.src}<\/span>`<\/span>;\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Also, don\u2019t forget to pass width and height to the img<\/code> element as attributes, and with that, you can now use these transformations. Try them out!<\/p>\n\n\n\n
IntersectionObserver<\/strong><\/h2>\n\n\n\n
The magic behind lazy loading images only when the user can see them comes from IntersectionObserver<\/code>. This class allows a callback to be called whenever an element comes into view in the viewport. It supports a bit more options than that, but we don\u2019t need to concern ourselves with those options for our specific use case.<\/p>\n\n\n\n
First, let\u2019s define some new state that we\u2019ll need:<\/p>\n\n\n
static<\/span> properties = {\n\n\u00a0\u00a0\u00a0\u00a0...\n\n\u00a0\u00a0\u00a0\u00a0_observerInitialized: { type<\/span>: Boolean<\/span>, state<\/span>: true<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0_hasBeenInViewport<\/span>: { type<\/span>: Boolean<\/span>, state<\/span>: true<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0_imageLoaded<\/span>: { type<\/span>: Boolean<\/span>, state<\/span>: true<\/span> },\n\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
We should create the IntersectionObserver<\/code> whenever our custom element gets connected to the DOM like so:<\/p>\n\n\n
connectedCallback() {\n\n\u00a0\u00a0\u00a0\u00a0super<\/span>.connectedCallback();\n\n\u00a0\u00a0\u00a0\u00a0this<\/span>._observer = new<\/span> IntersectionObserver(this<\/span>._onImageObserved.bind(this<\/span>));\n\n\u00a0\u00a0\u00a0\u00a0this<\/span>._observer.observe(this<\/span>);\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that the callback passed into it is a method called _onImageObserved<\/code>. We\u2019ll define that here in a bit. Passing this into the observe method call tells the observer that we\u2019re waiting for our custom element to become visible on the screen.<\/p>\n\n\n\n
Let\u2019s also add some cleanup code that removes the observer whenever the element is removed from the DOM so we don\u2019t accidentally leave the observer in memory after the image element is removed.<\/p>\n\n\n
disconnectedCallback() {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0super<\/span>.disconnectedCallback();\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>._observer != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>._observer.unobserve(this<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>._observer = null<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The _onImageObserved<\/code> is where the magic happens.<\/p>\n\n\n
\/**\n\n\u00a0* @type {IntersectionObserverCallback}<\/span><\/span>\n\n\u00a0*\/<\/span>\n\n_onImageObserved(entries) {\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (entries.some((entry<\/span>) =><\/span> entry.isIntersecting)) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>._observer.unobserve(this<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>._observer = null<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>._hasBeenInViewport = true<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0this<\/span>._observerInitialized = true<\/span>;\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This function iterates through all the entries in the observer (we should only have one) and checks if our image element has appeared on the screen yet. This callback gets run both when the observer is first created and when an intersection happens. That\u2019s what we need to check the isIntersecting<\/code> property.<\/p>\n\n\n\n
We also set some flags so we can apply CSS classes dynamically, and also to assist with cleaning up the observable as we no longer need it for this specific image.<\/p>\n\n\n\n
The URL builder also needs to be updated so that we fetch a lower resolution version if it\u2019s called before the intersection has happened, which will happen at page load.<\/p>\n\n\n
const<\/span> LAZY_LOAD_SIZE = 32<\/span>;\n\n...\n\n\/**\n\n\u00a0* Builds an image URL to Cloudinary using the custom element attributes.\n\n\u00a0*\/<\/span>\n\n_buildImageUrl() {\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> transforms = [];\n\n\u00a0\u00a0\u00a0\u00a0let<\/span> width = this<\/span>.width;\n\n\u00a0\u00a0\u00a0\u00a0let<\/span> height = this<\/span>.height;\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Calculate a shrunken width and height to send to Cloudinary if the<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\/\/ image hasn't been in the viewport yet.<\/span>\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (!this<\/span>._hasBeenInViewport) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if<\/span> (width != null<\/span> && height != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> ratio = LAZY_LOAD_SIZE \/ this<\/span>.width;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width = LAZY_LOAD_SIZE;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height = this<\/span>.height * ratio;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else<\/span> if<\/span> (height != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height = LAZY_LOAD_SIZE;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width = LAZY_LOAD_SIZE;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Add attribute specified transformations to the URL.<\/span>\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (width != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`w_${Math<\/span>.round(width)}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (height != null<\/span>) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transforms.push(`h_${Math<\/span>.round(height)}<\/span>`<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0...\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
If we set either just the width or the height we can replace those and Cloudinary will shrink the other dimension to keep the aspect ratio; however, if both are being set, then we need to calculate that ourselves.<\/p>\n\n\n\n
Blur Transition<\/strong><\/h2>\n\n\n\n
As you may already know, most lazy-loaded images have a smooth transition when downloading the full-resolution image. We can implement one of these transitions by adding a few CSS classes and a CSS keyframe animation that plays whenever the image is revealed.<\/p>\n\n\n\n
The CSS for creating the blur effect is easy and can be accomplished by changing the filter property.<\/p>\n\n\n
static<\/span> styles = css`\n\n\u00a0\u00a0\u00a0\u00a0:host<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display<\/span>: inline-block;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.cdl-image__img<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display<\/span>: inline-block;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0max-width<\/span>: 100%<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.cdl-image__img--hidden<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0opacity<\/span>: 0<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.cdl-image__img--seen<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0animation<\/span>: blurTransition 0.2s<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0.cdl-image__img--lowres<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0filter<\/span>: blur<\/span>(6px<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0@keyframes<\/span> blurTransition {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00% { filter<\/span>: blur<\/span>(6px<\/span>); }\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0100% { filter<\/span>: blur<\/span>(0<\/span>); }\n\n\u00a0\u00a0\u00a0\u00a0}\n\n`<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
With that, the logic for changing the CSS classes dynamically can be done with a Lit directive known as classMap<\/code>. This directive has an object passed into it that maps CSS classes with conditions that, if true, will apply the respective CSS classes.<\/p>\n\n\n
<img\n\n\u00a0\u00a0\u00a0\u00a0class<\/span><\/span>=${classMap({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"cdl-image__img\"<\/span>: true<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"cdl-image__img--lowres\"<\/span>: !this<\/span>._imageLoaded,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"cdl-image__img--hidden\"<\/span>: src == null<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"cdl-image__img--seen\"<\/span>: this<\/span>._hasBeenInViewport && this<\/span>._imageLoaded,\n\n\u00a0\u00a0\u00a0\u00a0})}\n\n\u00a0\u00a0\u00a0\u00a0src=${src ? this<\/span>._buildImageUrl() : nothing}\n\n\u00a0\u00a0\u00a0\u00a0alt=${this<\/span>.alt ?? nothing}\n\n\u00a0\u00a0\u00a0\u00a0width=${this<\/span>.width ?? nothing}\n\n\u00a0\u00a0\u00a0\u00a0height=${this<\/span>.height ?? nothing}\n\n\u00a0\u00a0\u00a0\u00a0@load=${() => {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if<\/span> (this<\/span>._hasBeenInViewport) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this<\/span>._imageLoaded = true<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}}\n\n\/><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The cdl-image__img--hidden<\/code> class prevents the image from flicking the alt text before the lazy loaded thumbnail finishes downloading. The cdl-image__img--lowres<\/code> class applies the blur only when the full images hasn\u2019t loaded yet, and finally the cdl-image__img–seen class applies when the image has both been fully loaded and scrolled into view, which is exactly when we want to remove the blur.<\/p>\n\n\n\n
With all of that you should have a functional Cloudinary image component that supports transformations and lazy loading! You can test this by adding enough HTML content to your example such that the image component goes off-screen, and scroll it into view. You can check the network tab in your browser\u2019s devtools<\/code> to confirm that the larger image loads when you do this.<\/p>\n\n\n\n
Publishing<\/strong><\/h2>\n\n\n\n
When it comes to publishing your web component so that you can use it in your projects, I’d recommend following the Lit project\u2019s advice in their documentation<\/a>. To summarize a few major points made, keep it simple. Don\u2019t include polyfills, minify your components, and make sure to generate sourcemaps<\/code> if you use TypeScript<\/a> so that consumers of the component get proper type completion. The project utilizing your components will already have its own build tooling and it will be a lot easier to use your component if you leave it mostly as-is when distributing it.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
Web components are a great choice for distributing components that must be reusable and interoperable between multiple frameworks, and with libraries like Lit, they aren\u2019t difficult to write. From upload and transformation to optimization and delivery, the Cloudinary platform helps automate your entire visual asset lifecycle. Sign up for free<\/a> today.<\/p>\n\n\n\n
If you found this blog post helpful and want to discuss it in more detail, head over to the Cloudinary Community forum<\/a> and its associated Discord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and interoperable custom elements that are encapsulated, so they\u2019re more easily integrated into other projects regardless of framework. Web components work with all major browsers, though with varying degrees of support. In this […]<\/p>\n","protected":false},"author":87,"featured_media":36156,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165,227],"class_list":["post-36154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation","tag-performance-optimization"],"acf":[],"yoast_head":"\nBuilding an Optimized Cloudinary Image Custom Element With Web Components<\/title>\n<meta name=\"description\" content=\"Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an Optimized Cloudinary Image Custom Element With Web Components\" \/>\n<meta property=\"og:description\" content=\"Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-23T18:20:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building an Optimized Cloudinary Image Custom Element With Web Components\",\"datePublished\":\"2024-10-23T14:00:00+00:00\",\"dateModified\":\"2024-10-23T18:20:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\"},\"wordCount\":1143,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA\",\"keywords\":[\"Image Transformation\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\",\"url\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\",\"name\":\"Building an Optimized Cloudinary Image Custom Element With Web Components\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA\",\"datePublished\":\"2024-10-23T14:00:00+00:00\",\"dateModified\":\"2024-10-23T18:20:59+00:00\",\"description\":\"Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building an Optimized Cloudinary Image Custom Element With Web Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building an Optimized Cloudinary Image Custom Element With Web Components","description":"Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components","og_locale":"en_US","og_type":"article","og_title":"Building an Optimized Cloudinary Image Custom Element With Web Components","og_description":"Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and","og_url":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components","og_site_name":"Cloudinary Blog","article_published_time":"2024-10-23T14:00:00+00:00","article_modified_time":"2024-10-23T18:20:59+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building an Optimized Cloudinary Image Custom Element With Web Components","datePublished":"2024-10-23T14:00:00+00:00","dateModified":"2024-10-23T18:20:59+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components"},"wordCount":1143,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA","keywords":["Image Transformation","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components","url":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components","name":"Building an Optimized Cloudinary Image Custom Element With Web Components","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA","datePublished":"2024-10-23T14:00:00+00:00","dateModified":"2024-10-23T18:20:59+00:00","description":"Every developer knows the benefits of code reusability. It saves time and ensures consistency.. Web components (WC) allow you to create reusable and","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/optimized-image-custom-element-web-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building an Optimized Cloudinary Image Custom Element With Web Components"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1729104063\/optimized_Cloudinary_image_web_components-blog\/optimized_Cloudinary_image_web_components-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=36154"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36154\/revisions"}],"predecessor-version":[{"id":36155,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36154\/revisions\/36155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36156"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Build systems are out of scope for this blog post, but I\u2019d recommend using Vite<\/a> to get this example working, though you\u2019re free to use whatever build tool you like:<\/p>\n\n\n