---
title: 'Image Best Practices'
description: 'Learn to implement image best practices for critical images, lazy loading, and low quality image placeholder.'
category: 'guides'
position: 1
---
# Image Best Practices
## Critical Images
We recommend using the **`TwicPicture`** component for critical images as it involves the native `picture` element under the hood.
```html
```
In case you're not using any JS framework client-side, we recommend using **native responsive images** combined with the **TwicPics API** for images that are displayed at the top of the page. The `picture` element with an `img` fallback is the best choice in this case.
By [writing API requests](/docs/essentials/api), you can easily create responsive variants of your images.
```html
```
This type of asset can also leverage the `` declarative fetch feature and the `fetchpriority` attribute.
## Lazy-load off-screen media
Off-screen or content images are ideal candidates for **[TwicPics Components](/docs/essentials/components)** and **[TwicPics Native](/docs/essentials/native)**. Your assets will be automatically resized and **lazy-loaded by default**.
However, the **`` component** offers many benefits out-of-the-box, like **optimized Cumulative Layout Shift (CLS)**, **aspect-ratio modifier**, **Low-Quality Image Placeholder (LQIP)**, or **transitions**:
```html
```
This approach is particularly well adapted for picture grids.
With **TwicPics Native**, you can achieve the same result even if it requires more effort and CSS knowledge.
Here is an `HTML / CSS` example template to integrate `LQIP` and `CLS` optimization into your websites using **TwicPics Native**:
```html
```
To learn more about this template, read our [CLS optimization and LQIP implementation](/blog/how-to-easily-cls-and-lqip) blog post.
