Photos sur le site de l’entreprise : WebP, AVIF, poids et texte alt

Une photo prise directement avec un téléphone pèse souvent plusieurs mégaoctets. Mise en ligne telle quelle, elle peut obliger le navigateur à charger cette seule image plus longtemps que tout le reste de la page. Un client sur mobile avec une mauvaise couverture réseau n’attend pas et s’en va.

Dans ce guide, je montre comment préparer les photos pour le site de votre entreprise : dans quel format, à quelle taille, avec quel texte alt et quel nom de fichier. Tout cela peut se faire gratuitement, en quelques minutes par photo.

Pourquoi ce sont surtout les photos qui ralentissent un site

Sur la plupart des sites de petites entreprises, ce sont justement les images qui constituent l’élément le plus lourd. Le texte et le code pèsent quelques dizaines de kilo-octets chacun, alors qu’une seule photo de réalisation peut peser plusieurs mégaoctets. C’est pourquoi je commence par les photos quand on me demande d’accélérer un site.

J’ai décrit un exemple tiré de mon travail dans l’étude de cas sur un site rapide sur mobile : l’un des résultats a été un poids de page réduit de 3 Mo à 0,5 Mo. Une bonne partie de cette différence vient justement des images améliorées.

Étape 1 : choisissez le format (JPEG, WebP ou AVIF)

Les trois formats que vous rencontrerez le plus souvent :

Mon conseil pour un site ordinaire : enregistrez les photos en WebP. Si le site est réalisé par un prestataire, AVIF peut être ajouté comme version principale, et WebP comme version de secours. La plupart des navigateurs actuels prennent aujourd’hui en charge les deux, mais il vaut la peine de le vérifier sur votre site après la mise en ligne.

Le logo et les icônes simples s’enregistrent de préférence en SVG (graphisme vectoriel), ou en PNG si vous avez besoin d’un fond transparent. Le PNG ne convient pas aux photos, car il est très lourd.

Étape 2 : réduisez les dimensions en pixels

C’est l’erreur la plus fréquente : la photo fait 4000 pixels de large, mais s’affiche sur la page dans une colonne de 600. Le navigateur télécharge tout le fichier, puis le réduit.

La règle est simple : le fichier n’a pas besoin d’être plus large que l’espace où vous l’affichez, avec une marge pour les écrans haute densité. Les valeurs pratiques que j’applique :

• photo en pleine largeur de page (par ex. en haut) : env. 1600–2000 px de large,
• photo dans une galerie ou une colonne de texte : env. 800–1200 px,
• miniature dans une liste : env. 400–600 px.

Ce sont mes valeurs de travail, et non une norme de Google. Adaptez-les à votre maquette : si votre site affiche une photo dans une colonne de 500 px, ne téléversez pas une image de 2000 px.

Étape 3 : fixez un objectif de poids du fichier

Google ne fixe pas de nombre de kilo-octets obligatoire pour une photo. Il vous faut donc votre propre objectif. Voici le mien :

• photo en pleine largeur : jusqu’à env. 150–250 Ko,
• photo de galerie : jusqu’à env. 100–150 Ko,
• miniature : jusqu’à env. 50–100 Ko.

Ce sont des objectifs pratiques, pas une exigence. Une photo très détaillée (par ex. pierre, tissu) peut peser un peu plus, et un fond simple et uni un peu moins. Ce qui compte, c’est que toute la page se charge rapidement sur un téléphone, et un test vous le confirmera (je le décris plus bas).

Étape 4 : convertissez les photos dans Squoosh

Squoosh est un outil gratuit qui fonctionne dans le navigateur et ne demande pas de compte. Voici comment il fonctionne :

1. Ouvrez le site de Squoosh et faites-y glisser la photo.
2. À droite, choisissez le format (WebP ou AVIF).
3. Dans les options de redimensionnement, saisissez la largeur cible en pixels.
4. Déplacez le curseur de qualité, par exemple vers 75–80, et comparez l’aperçu à gauche et à droite.
5. Quand le résultat est bon et que le fichier a un poids raisonnable, téléchargez-le.

Les noms des options peuvent changer avec le temps, mais le principe reste le même. Choisissez la qualité à l’œil : commencez bas et montez jusqu’à ce que la dégradation visible disparaisse.

Si vous avez beaucoup de photos, demandez à votre prestataire une conversion automatique. C’est ainsi que cela fonctionne sur les sites que je réalise : les photos sont préparées au moment de la construction du site, et non à la main, une par une.

Étape 5 : réduisez les photos dès le téléphone

N’attendez pas que la photo arrive sur le site. Lors de l’envoi depuis le téléphone, vous avez deux solutions simples :

• Réduisez la taille lors de l’envoi. Dans beaucoup d’applications (e-mail, messageries instantanées), un choix de taille apparaît quand vous joignez une photo. Choisissez la taille moyenne plutôt que l’original.
• Réglez une résolution d’appareil photo plus basse pour les photos qui ne sont pas destinées à l’impression, si votre téléphone le permet.

N’oubliez pas non plus que l’iPhone enregistre par défaut au format HEIC, que les navigateurs n’affichent généralement pas. Lors de l’envoi à votre prestataire, choisissez l’option qui les convertit en JPEG.

Étape 6 : ajoutez width et height ainsi que le chargement différé

Ceci concerne le code : si un prestataire s’occupe de votre site, envoyez-lui ce passage. Deux attributs font une grande différence.

Les attributs width et height indiquent au navigateur quelle place réserver à la photo avant son chargement. Sans eux, la page « saute » quand les images apparaissent, et il devient difficile de viser un bouton.

Le chargement différé (loading="lazy") demande au navigateur de ne télécharger les photos que lorsqu’on s’en approche en faisant défiler la page. Cela économise des données sur une longue page.

<img
  src="taras-drewno-gizycko.webp"
  alt="Taras z desek kompozytowych przy domu jednorodzinnym w Giżycku"
  width="1200"
  height="800"
  loading="lazy"
/>

Il y a une exception importante : la photo principale visible dès l’arrivée sur la page ne doit pas être en chargement différé. Elle doit se charger le plus vite possible, laissez-la donc sans loading="lazy". Votre prestataire peut en plus la marquer comme prioritaire (fetchpriority="high").

Si vous voulez proposer deux formats, le code ressemble à ceci :

<picture>
  <source srcset="taras.avif" type="image/avif">
  <source srcset="taras.webp" type="image/webp">
  <img src="taras.jpg" alt="Taras z desek kompozytowych" width="1200" height="800" loading="lazy">
</picture>

Le navigateur choisira le premier format qu’il sait lire.

Étape 7 : rédigez le texte alt

Le texte alt sert à deux choses. Le lecteur d’écran le lit à une personne aveugle ou malvoyante. Le moteur de recherche l’utilise pour comprendre ce que montre la photo. Rédigez-le donc avant tout pour un être humain.

Les règles que je respecte :

• décrivez ce que l’on voit, brièvement et concrètement (en général une phrase),
• ajoutez le contexte qui compte : quelle réalisation, où, en quel matériau,
• ne commencez pas par « photo » ou « image », car le lecteur d’écran indique de lui-même qu’il s’agit d’une image,
• n’entassez pas de mots-clés du type « terrasse Giżycko pas cher meilleure terrasse »,
• laissez les images décoratives avec un alt="" vide.

Deux exemples :

Dans les audits d’accessibilité, l’absence de texte alt est l’une des erreurs les plus fréquentes : il vaut donc la peine de corriger ces textes à l’occasion d’un rangement. J’écris plus en détail sur l’accessibilité dans le guide sur l’accessibilité des sites depuis le 28 juin 2025.

Étape 8 : donnez aux fichiers des noms parlants

Le nom du fichier est un détail, mais il aide aussi le moteur de recherche et met de l’ordre dans vos documents. Au lieu de IMG_4521.jpg ou photo-finale-nouvelle2.webp, utilisez un nom descriptif :

• en minuscules, sans accents ni caractères polonais,
• mots séparés par des tirets,
• court, 3 à 5 mots, par ex. terrasse-composite-garde-corps-mazurie.webp.

Le nom ne remplace pas le texte alt, il le complète. Changez-le avant de téléverser le fichier sur le site, car ensuite, le désordre s’installe vite.

Ce qu’il ne faut pas faire

• Ne téléversez pas les originaux du téléphone en comptant sur le site pour les réduire. Certains systèmes le font, mais pas tous.
• Ne compressez pas trop. Une photo de réalisation floue fait plus fuir que 50 Ko de plus.
• Ne mettez pas de texte dans l’image (grille tarifaire, numéro de téléphone sous forme d’image). Le lecteur d’écran ne le lira pas, et Google le comprendra plus difficilement.
• N’utilisez pas une seule photo en trois tailles en la réduisant uniquement par les styles CSS. Préparez des fichiers séparés.
• Ne laissez pas de texte alt vide sur les photos qui portent un contenu.

Comment vérifier le résultat

Après les modifications, lancez le test gratuit du site. En 30 secondes environ, il vérifie le site dans plusieurs domaines : vitesse (mesure Google PageSpeed sur mobile), SEO, sécurité et accessibilité. Vous verrez si les images sont toujours signalées comme un problème, et en cas de textes alt manquants, vous obtiendrez une indication de ce qu’il faut corriger.

Comparez le résultat avant et après. Si la note de vitesse a nettement augmenté et que la page ne saute pas au chargement, vos photos sont bien préparées.

En résumé

Préparer les photos, c’est quatre choses : le format WebP (ou AVIF), des dimensions adaptées à l’emplacement, un poids de fichier raisonnable et un texte alt pertinent avec un nom de fichier clair. Le reste, c’est-à-dire width, height et le chargement différé, tient en quelques lignes de code.

Si votre site se charge lentement à cause d’images lourdes, écrivez-moi. Dans le cadre d’une refonte de site, je retravaillerai les images, le code et les textes alt, et la maintenance technique aidera à surveiller tout cela après le lancement. Je réponds sous 24 heures.