Comment mettre à jour les images sur Webflow ?

Pourquoi ajouter correctement les images sur son site est important ?

‍

Il y a deux raisons majeures à ça :

• La qualité visuelle : une image pixelisée ou inadaptée au format, donne un effet négligé et donc, peu professionnel.
• Les performances du site : une image mal intégrée dans le projet sera potentiellement trop lourde et donc difficile à charger. Elle contribuera à de mauvaises performances sur site et ainsi, fera diminuer le score SEO.

Dans cet article, vous découvrirez toutes les étapes pour ajouter parfaitement vos images et mettre à jour votre site proprement en autonomie.

Le format de l'image

Les formats d’images supportés par Webflow à ce jour sont les suivants :

• bitmap,
• GIF,
• PNG
• JPEG,
• SVG
• WebP

Mais, pour l’étape de la compression il sera préférable d’avoir un fichier JPEG, PNG ou Webp dès le départ.
Sauf contrainte particulière, je recommande donc d’enregistrer votre fichier ou le convertir dans ce format.

‍

La forme de l'image

Afin que l'image s'adapte facilement au visuel de votre site, choisissez un format qui correspond au maximum au ratio de l'image de base.
‍Ne prenez pas une image carrée ou ronde si sur ton site le format est rectangulaire. Cela paraît évident ? C’est une erreur très courante !

‍

La taille

‍
Il est parfaitement inutile d'utiliser une image de 6000px de large si sur votre site elle en mesure 300. Pire, au plus une image est grande, au plus elle est lourde et donc, difficile à charger.

Pour savoir quelle taille d'image utiliser, basez-vous sur la taille d'image que vous souhaitez remplacer. Si l'image précédente a été correctement téléchargée sur le site, ses dimensions doivent être d'environ deux fois la taille de l'image sur la maquette. Cela permet d'avoir un rendu parfaitement net.

‍

💡 Comment connaître la taille de l’image prévue initialement sur ton site ?

1. Sélectionnez votre image
2. Ouvrez les “éléments settings” dans zone située à droite de l’écran ( raccourcis en cliquant sur la lettre "d" de votre clavier)
3. Les dimensions sont notées en dessous de l’aperçu de la photo

Changer la taille ou la forme de ta photo

Il existe beaucoup de manières différentes pour changer les dimensions et la forme d’une photo.

Personnellement, j’ai l’habitude de les retravailler sur Figma ou Photoshop.

Figma étant gratuit, c'est l'outil que je vous recommande.

‍

Choisir le nom du fichier image

Attention, les navigateurs n’aiment pas les noms d’image bizarres. Lorsque vous importez une image, vérifiez d’avoir un nom court adapté au contenu de l'image en question.

Exemple :

Bien : “icone téléphone.webp”

Pas bien : “7948krkrlzplkdfllfpeffjfl-kzzkdlfo.JPEG”

Remplacer l'image existante

Si l’image que tu rajoutes remplace une image déjà existante :

• Sélectionnez l’image à mettre à jour
• Ouvrez l’onglet “Element Settings” (raccourcis en cliquant sur “d”)
• Cliquez sur “Replace image” pour ouvrir le panneau de gauche “Assets”
• Cliquez sur le bouton d’upload pour ouvrir l’explorateur de fichier et importer ton document

💡 Pour ajouter une nouvelle image sur la page, il suffit d'ouvrir l'onglet "Add Elements" à gauche (raccourcis "A") et d'ajouter un élément image à l'endroit souhaité, puis exécuter le processus décrit précédemment.

Compression de l’image

Webflow a récemment intégré une fonctionnalité de compression de l’image pour réduire son poids. Pour réaliser la compression :

• Ouvrez l’onglet de gauche "Assets” (raccourcis en cliquant sur “j”).
• Cliquez sur le bouton "Expand asset panel" en haut à gauche.
• Sélectionnez l’image qui vient d'être d’importée.
• Cliquez sur “compress”

Compresser une image facilite son chargement dans le navigateur. C'est donc un élément important pour les performances du site. Il est recommandé de ne pas excéder 200 KB par image.

Ajouter le Alt text

La touche finale du parcours.

Le alt text est une courte phrase descriptive de l’image. Ce texte apparaît lorsque l’image ne charge pas. Il est à diférencier de la caption qui elle, est toujours visible. Cette phrase joue un rôle dans l’accessibilité et donc aussi dans la SEO.

Les images avec alt text sont mieux référencées sur Google, et donc contribuent au référencement et donc au traffic.