Picture Component Example
Preloading the LCP can improve performance
LCP, or the Largest Contentful Paint, is a web core vital metric. Improve your LCP score, by properly preloading the image that is the LCP.
Visual stability to improve your CLS score
CLS, or Cumulative Layout Shift, is a metric that tracks unexpected layout shifts. Improve your Core Web Vitals score, by preventing against layout shifts caused by lazy loaded images.
Lazy loading images to improve web performance and Core Web Vital scores
Any image that is not the Largest Contentful Paint (LCP), or is below the fold should be lazy loaded.
Responsive images that require Art Direction, should use the Picture component
Easily create responsive images with different images based on the device size, that improve your Core Web Vital scores.