## **Initial Context**

Images are really important and widely used in a page.

Images can also be really heavy and need a loading strategy.

For that, we already are using lazy-loading to upload optimized images when the user scroll.

But the apparition isn't smooth and is jumpy.

https://miro.com/app/board/uXjVPNlETFI=/

---

## **Success Criterias**

* No more "jump" loading for users/players
* The user/player understand that the placeholder will be replaced soon by the final image
* Placeholder matches the loaded image/BG image of the given module
* User/Player don't see empty area anymore
* No "blink" effect between placeholder and final image
* No impact on the user

## **Risks**

* Impact on the performance
* Some users will see blink effect when the final image will replace the placeholder
* This solution will not be available for ALL images.
* this solution will be available only for new posts (not retroactif)

---

## Questions that need to be answered

---
### 🤔 Can we get the 'lowest' image in resolution while keeping the ratio ?

#### Reflexion

- ✍️ Since, proxy-image can return the resolution we want
- 👉 Then, yes

---

### 🤔 does the proxy image can serve a base64 version of this extremely low image ?

#### Reflexion

- ✍️ Since, proxy-image doesn't offer this possibility
- 👉 Then, no

### 🤔 does the component serve the image ratio before loading the image ?

#### Reflexion

- ✍️ Since, we can get the ratio as a props by proxy-image
- 👉 Then, yes

### 🔍 WHAT SOLUTIONS ARE EXISTING

- 1️⃣ Keeping the space empty for the image
- 2️⃣ Placeholder
- 3️⃣ Solid colour
- 4️⃣ Progressive image loading [demo](https://jmperezperez.com/static/images/posts/medium-progressive-loading.mp4) [article](https://jmperezperez.medium.com/how-medium-does-progressive-image-loading-fd1e4dc1ee3d)

#### Comparatif

| Criteria | Empty space | Placeholder | Solid colour | Progressive image loading
| -------- | ----------- | ----------- |------------- |--------------------------
| no jump | 🟢 | 🟢 | 🟢 | 🟢
| The user/player understand that the placeholder will be replaced soon by the final image | 🔴 | 🟢 | 🟠 | 🟢
| Placeholder matches the loaded image/BG image of the given module | 🔴 | 🔴 | 🟠 | 🟢
| User/Player don't see empty area anymore | 🔴 | 🟢 | 🟢 | 🟢
| No "blink" effect between placeholder and final image | 🔴 | 🔴 | 🟢 | 🟢
| No impact on the user | 🟢 | 🟢 | 🟢 | 🟢

---
## ✨ CONCLUSION ✨

> Based this TAD, we can validate that the greatest values will be to use Progressive image loading.

> This solution is the more complex to implement but would not require R&D since this solution is already well documented and used widely.