Question 1

How do I use progressive-image element with React or Vue?

Accepted Answer

Since it's a standard web component, you can use it directly in React or Vue by importing the script and using the custom element tag. However, handle hydration carefully in server-rendered apps to avoid mismatch errors.

Question 2

Progressive-image vs native lazy loading attribute: which is better?

Accepted Answer

Native loading='lazy' is simpler and works in modern browsers, but progressive-image adds features like save data options and CSS states for animations. Choose progressive-image if you need those extras; otherwise, native might suffice.

Question 3

How to create a blur-up effect when images load with progressive-image?

Accepted Answer

Use the provided CSS classes like 'loading' and 'loaded' to style transitions. For example, set the placeholder img to low quality and use CSS to blur it, then fade in the high-res image when the 'loaded' class is applied.

Question 4

Does progressive-image support WebP or other modern image formats?

Accepted Answer

Yes, it supports any image format via the src and srcset attributes, as per the README. Just specify the image URLs appropriately, and the browser handles format detection based on support.

Question 5

What happens if the internet connection drops while loading an image?

Accepted Answer

The README doesn't cover this, so errors might go unhandled. Developers should add custom logic, like retry mechanisms or error placeholders, using JavaScript events on the img element.

Question 6

Can I use progressive-image in a static site generator like Gatsby?

Accepted Answer

Yes, but since it's a client-side web component, ensure the script loads correctly in the build process. You might need to configure the static site generator to include the necessary assets without breaking SSR.

<progressive-image>

What is <progressive-image>?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions