comment optimiser les Images pour une meilleure conception Web & SEO

que vous ayez un blog, une boutique en ligne ou un site Web régulier que vous voulez regarder incroyable, il est payant d’optimiser chaque image que vous téléchargez.

lorsque nous parlons de la façon d ‘ « optimiser” les images pour le web, vous pouvez y penser de trois façons: 1) rendre les images belles, 2) charger rapidement les images et 3) rendre les images faciles à indexer pour les moteurs de recherche.

la plupart des articles traitent d’un aspect de l’optimisation d’image ou d’un autre, mais dans cet article, je vais tous les couvrir., Mieux encore, vous pouvez optimiser les images avec des outils gratuits et faciles à utiliser.

1. Commencez avec des images de haute qualité

Photographie de Stock: vous n’avez pas besoin d’être un photographe professionnel pour utiliser de superbes images sur votre site web. Chaque jour, il semble qu’il y ait plus de sites de photos de haute qualité où vous pouvez télécharger des photos gratuites pour un usage commercial. Certains de nos favoris sont:

• Unsplash
• la Grange des Images
• PicJumbo
• SplitShire
• Peu de Visuels
• …et avec un Jimdo site web, free stock images sont disponibles dans votre Bibliothèque d’Images.,

lorsque vous téléchargez une image à partir de l’un de ces sites web, il s’agit probablement d’un très gros fichier JPEG. Pour le compresser pour votre site Web, vous devrez réduire la taille et télécharger une version plus petite (plus à ce sujet ci-dessous). C’est ok, cependant. Commencer par un grand format est idéal, car vous pouvez toujours réduire une grande image. (Faire une petite image plus grande ne fonctionnera pas si bien).

prendre vos propres (meilleures) photos: bien sûr, vous ne pouvez pas utiliser de photos de stock pour tout (comme votre équipe ou votre produit)., Il y a quelques astuces faciles pour rendre vos images bien éclairées et plus professionnelles, même sans équipement de caméra de fantaisie (comme ce tutoriel sur la création de votre propre lightbox).

Graphiques: si vous recherchez quelque chose de plus graphique, il existe une tonne de nouveaux outils en ligne gratuits que vous pouvez utiliser pour créer vos propres infographies ou photos avec des superpositions de polices. Nous aimons Canva et PiktoChart. Si vous cherchez un logo, nous vous recommandons de consulter notre Créateur de Logo.

2., Utilisez le bon type de fichier: JPEG ou PNG

Si vous vous interrogez sur différents fichiers image tels que JPG, PNG, GIF et SVG, sachez simplement que sur votre site Web, vous êtes le plus susceptible d’utiliser un format JPEG (JPG) ou PNG. Il y a des avantages et des inconvénients de chacun, mais dans la plupart des cas, vous pouvez vous rappeler ce qui suit:

• Les photographies doivent être enregistrées et téléchargées au format JPG. Ce type de fichier peut gérer toutes les couleurs d’une photographie dans une taille de fichier relativement petite et efficace. En utilisant JPEGs, vous ne vous retrouverez pas avec l’énorme fichier que vous pourriez obtenir si vous avez enregistré une photo au format PNG.,
• Les graphiques, en particulier ceux utilisant de grandes zones de couleur plates, doivent être enregistrés en tant que PNG. Cela inclut la plupart des dessins, infographies, images avec beaucoup de texte et des logos. Les png sont de meilleure qualité que les jpeg, mais sont généralement livrés avec une taille de fichier plus grande. Comme leurs proches, le fichier SVG, Les PNG traitent des zones de couleur et de texte avec de belles lignes nettes, de sorte que vous pouvez zoomer et ne pas perdre de qualité. Ils prennent également en charge les arrière-plans transparents (que vous voudrez si vous utilisez un logo)., Si vous avez le choix, nous vous recommandons d’enregistrer les png au format « 24 bits » plutôt que” 8 bits  » en raison de la meilleure qualité et de la gamme plus riche de couleurs prises en charge.

si vous utilisez une photo avec du texte dessus?, Si la majorité de l’image est une photographie, puis coller à un JPEG.

la plupart des programmes d’image simples vous permettent de choisir JPG ou PNG en allant dans « Enregistrer sous”, « exporter” ou « Enregistrer pour le web” et en choisissant le type que vous préférez. Il existe également des outils en ligne gratuits basés sur un navigateur comme Zamzar qui convertiront des fichiers pour vous.

Vous pouvez convertir Un PNG en JPEG, mais vous ne gagnez rien en convertissant un JPEG en un fichier PNG. C’est parce qu’un fichier JPG est déjà stocké dans ce qu’on appelle un format avec perte—les données d’image ont déjà été perdues lorsqu’elles ont été compressées, vous ne pouvez donc pas les ramener comme par magie., Par exemple, si vous n’avez que votre logo au format JPG, vous devrez aller directement à votre concepteur et demander un fichier PNG à partir de son programme de conception d’origine, plutôt que d’essayer de désosser un PNG à partir d’un fichier JPEG.

3. Redimensionner les images pour optimiser la vitesse et l’apparence de la page

avec les images web, vous voulez trouver le bon équilibre entre la taille et la résolution. Plus votre résolution, plus la taille du fichier sera. Dans le monde de l’impression, les images haute résolution sont une bonne chose. Mais sur le web, des images de grande taille et haute résolution peuvent ralentir la vitesse de page de votre site web., Cela nuit à l’expérience de vos utilisateurs et, éventuellement, à votre classement dans les moteurs de recherche. Les grandes images et les temps de chargement lents sont particulièrement gênants pour les visiteurs mobiles.

Il y a des moments où vous voudrez utiliser de grandes images sur votre site web, comme pour votre image d’arrière-plan ou de héros., Si vous utilisez des images de mauvaise qualité et essayez de les faire exploser pour qu’elles soient assez grandes, cela aura l’air flou.

alors, comment trouvez-vous le bon équilibre entre la taille et la qualité? Tout d’abord, il est important de comprendre que lorsqu’il s’agit des images, « taille” est un terme relatif. Ce dont vous avez besoin pour l’impression est généralement beaucoup plus grand que ce dont vous avez besoin pour un site web. Voici un aperçu des trois principaux aspects qui composent la « taille”:

• Optimale taille du fichier: le nombre d’octets du fichier sur votre ordinateur. C’est le facteur qui peut ralentir votre site web. Une image de 15 Mo (mégaoctet) est énorme., Une image de 125 Ko (kilo-octet) est beaucoup plus raisonnable. Si la taille de votre fichier est vraiment grande, c’est un indicateur que les dimensions de votre image sont trop grandes ou que la résolution est trop élevée.
• Taille de L’Image: les dimensions réelles de votre image, en pixels. Vous pensez probablement des photos imprimées traditionnelles comme 4×6, 5×7 ou 8×10. Mais sur le web, la hauteur et la largeur sont mesurées en pixels. Ainsi, par exemple, une image typique sur un site web ou un blog peut être de 795×300 pixels.,
• résolution pour les images web: la résolution est la qualité ou la densité d’une image, mesurée en points par pouce (dpi). Une imprimante professionnelle peut nécessiter des images d’au moins 300 dpi. Mais la plupart des écrans d’ordinateur affichent 72dpi ou 92dpi, donc tout ce qui est supérieur à cela est exagéré et rend votre image inutilement grande. Lorsqu’un programme de conception a la possibilité de « Enregistrer pour le web », cela signifie l’enregistrer à une faible résolution web conviviale.

En savoir plus sur les graphiques web dans notre guide pour débutants.,

Comment trouvez-vous la taille du fichier, la taille de l’image et la résolution de votre image?

Vous pouvez trouver la taille du fichier et la taille de l’image directement sur votre ordinateur. Si vous êtes sur un PC, faites un clic droit sur le fichier image, choisissez « Propriétés” puis l’onglet « Résumé”. Sur un Mac, Ctrl + clic sur le fichier image et choisissez  » Obtenir des informations. »

trouver la résolution nécessite un programme photo plus avancé comme Photoshop, mais la plupart des programmes de retouche d’image de base enregistreront automatiquement les images à un dpi inférieur et web-friendly qui est une meilleure résolution pour les images web.,

feuille de triche pour la taille de l’image, la taille du fichier et la résolution

maintenant que vous connaissez les différentes façons de décrire la taille d’une image, voici quelques règles empiriques à garder à l’esprit:

• taille optimale du fichier: les grandes images ou les images d’arrière-plan
• La plupart des autres petits graphiques web peuvent être de 300 Ko ou moins.
• Si vous utilisez un arrière-plan plein écran, L’équipe D’assistance client de Jimdo recommande de télécharger une image de 2000 pixels de large.,
• résolution pour les images web: si vous avez l’option, Toujours « enregistrer pour le web » qui donnera à votre image une résolution web conviviale.
• Vous pouvez réduire une grande image, mais il est très difficile de faire une petite image plus grande. Il aura l’air flou et Pixélisé.

Que faites-vous si votre image est trop grande pour votre site web?

Si vous avez un bel appareil photo numérique, vous pouvez prendre des photos de plusieurs mégaoctets—bien plus grandes que ce dont vous avez besoin pour votre site web. Les photos de sites de haute qualité ont tendance à venir avec de grandes tailles de fichiers aussi., Si votre image est supérieure à 1 Mo, il y a quelques choses que vous pouvez faire:

• redimensionner l’image. Si votre photo mesure 5000 pixels de large, vous pouvez facilement la redimensionner à 2000 pixels de large, 1200 pixels de large, ou même plus petit selon la façon dont vous prévoyez de l’utiliser sur votre site web. Cela réduira considérablement la taille du fichier. Lorsque vous redimensionnez, assurez-vous de garder les mêmes proportions afin de ne pas déformer votre image.
• Réduire la résolution. La plupart des programmes photo compresseront automatiquement la résolution de votre image à une taille « web-friendly” (72dpi et 92dpi, respectivement)., Vous pouvez le faire dans Photoshop aussi avec l’option « Enregistrer pour le web ». Vous pouvez également « enregistrer sous” dans de nombreux programmes photo, puis ajuster le niveau de qualité à partir de là.
• compressez votre image avec un programme gratuit comme TinyPNG ou TinyJPG. Les deux réduiront considérablement la taille de votre fichier sans interférer avec la qualité.

4. Rendre les images de la même taille et du même style

Les Images d’une page web seront plus belles si vous utilisez un style et une taille cohérents. La cohérence vous aidera également à aligner votre texte, vos colonnes et d’autres informations sur votre page. Pour voir ce que nous voulons dire, jetez un oeil aux exemples ci-dessous.

dans la première, tirée de notre site « Make-Believe Coffee”, les photos sont toutes de dimensions différentes., L’un est orienté verticalement, tandis que les autres sont horizontaux. Cela rend la page désorganisée.

dans l’exemple suivant, j’ai recadré chaque photo à un 1000×760 pixels plus uniforme. La photo du haut de la tasse de café blanc brillant se sentait hors de propos, donc je l’ai remplacé par un qui était similaire dans le style et la couleur de mes deux autres photos., J’ai également expérimenté les filtres d’image dans Jimdo et mis une superposition subtile sur chaque photo (un peu comme un filtre Instagram) pour leur donner un aspect plus cohérent.

comme les photos sont toutes de la même taille et orientés de la même manière, ils s’intègrent parfaitement dans une colonne, avec mes paragraphes dans un autre., Aucun ajustement ou conjecture nécessaire!

et rappelez-vous, avec un site Jimdo, vos images sont automatiquement importées et organisées parfaitement, vous n’avez donc pas à vous soucier de votre conception.

Ok, maintenant que vos photos sont redimensionnées et en regardant une grande, comment pouvez-vous optimiser pour les moteurs de recherche?, Sur les sites Jimdo, une grande partie du ménage SEO est pris en charge pour vous, mais il y a encore quelques ajustements que vous pouvez faire pour optimiser vos images.

5. Nommez le fichier image correctement pour aider votre référencement

La plupart des gens ne pensent pas beaucoup à leurs noms de fichiers. Ils peuvent appeler une photo  » Photo1.jpg  » ou « capture D’écran 2018-06-02 à 3.41.15 PM ». Si cela vous semble familier, prenez un moment pour renommer vos images avant de les télécharger sur votre site web. Pourquoi? Parce que cela rend vos photos plus faciles à gérer., Selon l’endroit où les images apparaissent en ligne, cela peut également donner un coup de pouce à votre référencement

pour des raisons de cohérence, utilisez des lettres minuscules et des chiffres 0-9. N’introduisez pas de ponctuation ou d’espaces. Et il est préférable d’utiliser des traits d’union plutôt que des traits de soulignement. (Pensez Tour eiffel.jpg plutôt que DSC12345.jpg).

remarque: sur les sites Jimdo, vous n’avez pas besoin de renommer tous les fichiers de votre site web—mettez simplement à jour votre texte alternatif (voir ci-dessous).

6. Remplissez vos légendes et texte alternatif

Une fois que les gens téléchargent une image sur leur site web, ils oublient souvent de remplir les informations supplémentaires., Mais tout comme le nom du fichier, cette information vous donne du jus de référencement ajouté.

les balises Alt (ou texte alternatif) ne seront pas visibles par votre visiteur moyen, mais elles donnent aux moteurs de recherche une idée de base de ce qu’est chaque image. Donc, une fois que vous avez ajouté une image à votre site, assurez-vous de remplir le champ de texte alternatif avec une phrase qui décrit ce que la photo montre, de préférence avec un mot-clé ciblé. (Le texte alternatif aide également les visiteurs malvoyants à naviguer sur votre site avec un logiciel basé sur l’audio, c’est donc un bon moyen d’améliorer l’accessibilité du site web.,) Voici quelques conseils supplémentaires sur l’écriture de bonnes balises alt.

les noms de fichiers et les balises alt sont particulièrement importants pour le référencement des pages de produits. Si cela a du sens, ajoutez également une légende à votre image, car les gens lisent les légendes de photos plus que le texte d’un autre site web.

Remarque: remplir les balises alt, les noms et les légendes est bon pour le référencement, mais n’essayez pas de mot-clé., Vous voulez juste décrire avec précision une image en anglais simple—l’ajout de mots clés non pertinents ou répétitifs vous pénalisera par les divinités des moteurs de recherche.

7. Placez l’image près du texte pertinent

choisissez des images qui sont liées à ce que dit le texte, plutôt que quelque chose de complètement décalé. Une image entourée d’informations pertinentes (avec des mots-clés associés) sera mieux classée.

Cette astuce vous aide également à éviter les clichés de photos. Si votre site web est sur l’éducation, vous n’obtenez aucun coup de pouce SEO d’avoir une photo d’une pomme., Les Photos des enseignants, des élèves et des salles de classe seront plus intéressantes pour les lecteurs et plus pertinentes pour votre sujet.

résumé: optimisation d’une image de site web pour la qualité et le référencement

alors regardons ces règles avec un exemple de mon site Web Make-Believe Coffee. J’ai trouvé une photo d’une tasse de café sur Unsplash. Quand je l’ai téléchargé, le nom était  » fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg  » et c’était 2509 x 1673 pixels. Sa taille était 586KB. Pas terrible, mais toujours beaucoup plus grand que ce dont j’ai besoin pour simplement afficher une petite photo sur ma page web., Donc, pour une meilleure optimisation de l’image, je ferais ce qui suit:

1. renommez l’image en quelque chose de plus logique. Peut-être quelque chose comme faire-croire-café-cappuccino.jpg
2. utilisez un outil photo pour redimensionner et recadrer l’image à la taille souhaitée. Pour cet exemple, j’ai choisi 1000×760. Si vous vouliez un carré, vous pouvez faire 1000×1000.
3. assurez-vous que c’est la bonne taille de fichier. Une fois que je l’ai recadré à la taille que je voulais et téléchargé à partir de l’éditeur de photos, la taille du fichier était de 117 Ko—parfait!
4. Télécharger sur votre site web, et n’oubliez pas de remplir le Texte Alt!, J’ai également ajouté une légende pour faire bonne mesure.

même si cette liste de contrôle peut sembler beaucoup, elle va devenir plus rapide Une fois que vous êtes habitué au processus (et vous pouvez mettre cette page en signet pour pouvoir y.

de Plus, passer par ces étapes rendra vos images plus belles, aidera votre site web à se charger plus rapidement et profitera finalement à votre référencement. Adoptez les bonnes habitudes en matière d’image dès maintenant et vous en récolterez les avantages sur l’ensemble de votre site web.,

consultez notre Guide sur « Comment créer un site web” pour encore plus de conseils!