TwicImg or TwicPicture

[Falcomfr]

Hello,

What's the difference between TwicImg and TwicPicture ? What do you mean by critical images?

Thanks you

[florentb]

TwicImg renders an img tag and uses Javascript to dynamically lazy-load a "pixel-perfect" image as the source (src). TwicPicture renders a picture tag with several sources so the browser can choose the best one.

A "critical image" refers to an image that is deemed essential for the initial rendering of a webpage, particularly those that are visible above the fold.

We recommend using TwicPicture for critical images (especially if you use a framework that supports SRR) and TwicImg for off-screen media.

More info in this article.

[Falcomfr]

Thank you !

[mbgspcii]

Hi @Falcomfr

By critical images, we refer to those images on a web page that can significantly impact the Largest Contentful Paint (LCP) score, a key performance metric used by Google to measure the loading performance of the largest visible content in the viewport. These are often large images that appear above the fold, meaning they are visible without any scrolling when the page first loads. If these images load slowly, they can delay the rendering of the page's most important content, leading to a poor user experience and lower LCP scores.

TwicPicture and TwicImg are two components designed to optimize the display of your images.

TwicPicture generates the necessary HTML elements, which are often complicated to implement, by directly using the TwicPics API. This process occurs even before the CSS of the page is loaded, ensuring faster initial image rendering. This component is particularly well-suited for:

• Banners: Large banner images that need to be responsive and optimized.
• Above-the-Fold Images: Large images that appear above the fold and are critical for improving the Largest Contentful Paint (LCP) score.

TwicImg, on the other hand, is based on the TwicPics Native script. This script allows for finer control, resulting in pixel-perfect images. TwicImg comes with built-in best practices that enhance user experience, such as Low-Quality Image Placeholder (LQIP) and lazy loading. It is ideal for:

• Content Images: Regular images within the content that benefit from enhanced loading strategies and optimizations.

For short, TwicImg is more feature-rich, but it depends on the script and CSS loading, which can slightly impact responsiveness (though minimally). TwicPicture focuses on responsive image display by greatly simplifying the use of the picture element. It doesn't depend on the script, and requests are generated before the CSS loads.

Finally, please note that both components support responsive design, ensuring your images are optimized for all devices:

• TwicImg: see here
• TwicPicture: see Art Direction here

Here is a tiny example with both TwicPicture and TwicImg.

Hoping this helps.

[mbgspcii]

@florentb was faster than i. But know you have my version too ;-)