<aside> ❓ LCP" images are the main images that are displayed in the viewport of the user (above the fold) when a page is loaded. Generally, this refers to the first banner at the top of homepages, the first row of images on a listing page, and the main image on a product detail page.

</aside>

For "LCP" images, we recommend not using the integration with TwicPics’s script to avoid latency related to native lazy-loading.

Here is a generic and comprehensive guide to delve deeper into the subject, especially for LCP images of other templates (listing pages and product detail pages). This guide covers the complete process to construct the ideal <img> tag for each LCP image:

Optimizing The Image Element LCP

Code example :

<img
  fetchpriority="high"
  srcset="
    <https://demo.twic.pics/image.jpg?twic=v1/resize=280>   280w,
    <https://demo.twic.pics/image.jpg?twic=v1/resize=480>   480w,
    <https://demo.twic.pics/image.jpg?twic=v1/resize=560>   560w,
    <https://demo.twic.pics/image.jpg?twic=v1/resize=840>   840w,
    <https://demo.twic.pics/image.jpg?twic=v1/resize=960>   960w,
    <https://demo.twic.pics/image.jpg?twic=v1/resize=1440> 1440w"
  src="<https://demo.twic.pics/image.jpg?twic=v1/resize=280>"
  sizes="(min-width: 768px) 480px, 87.5vw" (Display directives according to your template)
  alt=""
/>