> For the complete documentation index, see [llms.txt](https://atomic-suite.gitbook.io/atomic-suite/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atomic-suite.gitbook.io/atomic-suite/documentation-atomic/documentation-utilisateur/performances-seo/optimiser-les-images-avec-atomic.md).

# Optimiser les images avec Atomic

La version 1.4.4 introduit des outils pour optimiser la qualité et le poids des images.&#x20;

Le poids et les dimensions des images utilisées dans les molécules Atomic pourront être optimisées automatiquement. À travers ces outils, il sera également possible de convertir les images dans le format WebP.

Pour pouvoir utiliser les outils d'optimisation d'image il faudra connecter, au préalable, le site à un serveur dédié à la gestion de ce service.&#x20;

### Connexion au service

Dans la configuration de Atomic, vérifier donc que la présence du token de connexion.

<figure><img src="/files/ncV1710Bz8Tiijk5BBob" alt=""><figcaption><p>Atomic Suite By 202 > Configuration > Général > Onglet "Configuration des molécules"</p></figcaption></figure>

Pour ajouter le token, il faudra s'adresser au chef du projet de la boutique.

### Configurations sur la qualité des images

Dans le menu de configuration d'Atomic, cliquer sur "*General*", puis sur l'onglet "*Image Settings*".

<figure><img src="/files/5NBBAK7a0B52ajxMaav3" alt=""><figcaption><p>Atomic Suite By 202 > Configuration > Général > Onglet "Paramètres des images"</p></figcaption></figure>

Sur cette page, vous aurez accès aux paramètres de configuration des images.

Choisissez le niveau de qualité souhaité.&#x20;

<figure><img src="/files/YsCsXkPhEqJSdcwRSnut" alt=""><figcaption><p>Atomic Suite By 202 > Configuration > Général > Onglet "Paramètres des images"</p></figcaption></figure>

Suite à cette configuration, les images seront optimisées pour un affichage rapide selon le niveau choisi. Les images originales restent conservées dans le dossier du site.

L'outil de gestion des images peut améliorer ultérieurement les performances d'affichage en convertissant les images au format WebP.

Vous pouvez donc voir plusieurs images créées à partir de celle d'origine : \
\- une (ou plusieurs) image optimisée avec le format d'origine (.png par exemple)\
\- une image optimisée avec le format WebP

L'image qui sera montrée à l'internaute pendant la navigation sur le site sera choisie en fonction de la configuration d'Atomic et des performances du navigateur utilisé par l'internaute.

Chaque nouvelle image qui sera ajoutée, par la suite, sur le site, sera optimisée selon la configuration spécifiée.

Sur chaque molécule contenant une image, il est possible de voir les images optimisées par l'outil.

&#x20;

<figure><img src="/files/9smGEyteWdeHYgX1CAY8" alt=""><figcaption><p>Atomic Suite By 202 > Animation de Contenu > Toutes les molécules > Modifier<br>ou<br>Atomic Suite By 202 > Animation de Contenu > Créer une nouvelle molécule > Etape 2</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://atomic-suite.gitbook.io/atomic-suite/documentation-atomic/documentation-utilisateur/performances-seo/optimiser-les-images-avec-atomic.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
