En janvier 2019, il y avait plus de 1,94 milliard de sites Web. C’est beaucoup de concurrence. Quelle est la meilleure fa\u00e7on de se d\u00e9marquer\u00a0? Belles images. En fait, la vision domine tous les autres sens lorsqu’il s’agit d’interagir et d’absorber des informations.<\/strong><\/p>\n Voici trois faits rapides pour vous aider \u00e0 comprendre \u00e0 quel point les images sont critiques pour les gens (et pour le r\u00e9f\u00e9rencement)\u00a0:<\/p>\n \u00c9tant donn\u00e9 que la majeure partie du volume de recherche provient des t\u00e9l\u00e9phones et que la dur\u00e9e d’attention des personnes a \u00e9t\u00e9 r\u00e9duite \u00e0 huit secondes, il est essentiel que les sites Web soient en mesure d’offrir une exp\u00e9rience utilisateur rapide, sans friction et agr\u00e9able.<\/p>\n L’optimisation de l’image est une partie importante de ce puzzle.<\/p>\n Voici quelques conseils que n’importe qui peut appliquer \u00e0 n’importe quel type de site (m\u00eame WordPress), vous n’\u00eates donc pas uniquement \u00e0 la merci de ses d\u00e9veloppeurs et concepteurs.<\/p>\n Voici un tableau que Google a partag\u00e9 pour aider \u00e0 comprendre la relation pixel \u00e0 octet. Bref, vous aurez une id\u00e9e du poids d’une image en fonction de ses dimensions.<\/p>\n Source : Google.<\/p>\n Google a \u00e9galement mentionn\u00e9 qu’il faut quatre octets de m\u00e9moire pour fournir un pixel. Imaginez si vous aviez plusieurs images sur un seul site avec 800 X 800 pixels. notre site prendrait au moins quelque chose autour de 625 kBps. Ou en termes plus simples, imaginez un \u00e9l\u00e9phant participant \u00e0 une course de lapins.<\/p>\n Je sugg\u00e9rerais d’utiliser une combinaison des deux \u00e0 bon escient. Un ratio id\u00e9al serait de 40% d’images vectorielles et 60% d’images raster.<\/p>\n SVG est la seule et la meilleure option pour les images vectorielles. Gr\u00e2ce \u00e0 ses images plates, vous b\u00e9n\u00e9ficiez \u00e9galement d’une haute qualit\u00e9 facilement \u00e9volutive.<\/p>\n Source : W3Techs<\/p>\n Remarque\u00a0: Les donn\u00e9es du graphique ci-dessus datent du 15\u00a0mai\u00a02019.<\/p>\n Avec un nuage plein d’appareils, il est \u00e9vident que les gens se m\u00e9prennent sur les tailles d’image id\u00e9ales.<\/p>\n Veuillez noter que la taille de l’image et la taille du fichier image sont deux choses diff\u00e9rentes. Ici, nous expliquerons comment vous pouvez obtenir la taille d’image id\u00e9ale (\u00e9galement appel\u00e9e dimensions d’image).<\/p>\n Dans le cadre des dimensions de l’image, nous examinerons \u00e9galement les proportions.<\/p>\n Les proportions indiquent la largeur et la hauteur d’une image et sont \u00e9crites au format \u00ab\u00a0x\u00a0:\u00a0y\u00a0\u00bb.<\/p>\n Vous vous souvenez de la fois o\u00f9 vous avez essay\u00e9 de redimensionner une image et de la disproportionner litt\u00e9ralement\u00a0? C’est exactement de cela qu’il vous sauve. Le r\u00e9f\u00e9rencement du rapport hauteur\/largeur d’une image lors du recadrage ou du redimensionnement des images vous aide \u00e0 maintenir la viabilit\u00e9 et la beaut\u00e9 des dimensions de l’image.<\/p>\n Vous pouvez vous r\u00e9f\u00e9rer \u00e0 cette image cr\u00e9\u00e9e par Shutterstock pour r\u00e9pertorier certains rapports d’aspect couramment utilis\u00e9s.<\/p>\n Source de l’image et donn\u00e9es du tableau\u00a0: Shutterstock<\/p>\n En r\u00e9f\u00e9rence au tableau ci-dessus, il est pr\u00e9f\u00e9rable de se concentrer sur les ratios d’image 1: 1 et 4: 3 qui conviennent aux m\u00e9dias sociaux, aux \u00e9crans mobiles, \u00e0 la photographie et \u00e0 l’impression.<\/p>\n Vous pouvez avoir vos propres mod\u00e8les de dimension bas\u00e9s sur le syst\u00e8me de gestion de contenu (CMS) que vous utilisez.<\/p>\n Selon Squarespace, la taille la plus id\u00e9ale pour l’optimisation d’image sur un CMS est de 1500 et 2500 pixels.<\/p>\n Voici une r\u00e9ponse rapide et facile pour identifier les tailles d’images les plus courantes sur le Web.<\/p>\n Par observation personnelle, je peux sugg\u00e9rer d’utiliser 1080 X 1080 pixels et 1500 X 2500 pixels.<\/p>\n Si vous \u00eates trop paresseux pour revoir tous ces d\u00e9tails, vous pouvez \u00e9galement essayer de redimensionner l’image \u00e0 partir de la fl\u00e8che dans le coin tout en appuyant sur la touche “Shift”. Cela fonctionne pour certaines plateformes.<\/p>\n Les moteurs de recherche ont un cerveau sans yeux, donc \u00e0 moins que vous ne nommiez vos images correctement, ils ne pourront pas \u00ab lire \u00bb vos images ou vous classer en cons\u00e9quence. C’est l\u00e0 que vos mots-cl\u00e9s entrent en jeu. Comme je l’ai mentionn\u00e9 plus t\u00f4t, si vous nommez bien vos images, vous pouvez am\u00e9liorer la densit\u00e9 des mots cl\u00e9s et les chances de classement.<\/p>\n Expliquons cela avec un exemple :<\/p>\n Nommez vos images en minuscules avec des tirets au milieu et ne laissez pas d’espaces. Comme vous l’avez vu, j’ai utilis\u00e9 le mot-cl\u00e9 \u00ab\u00a0optimisation d’image\u00a0\u00bb dans l’exemple de \u00ab\u00a0cinq conseils pour l’optimisation d’image\u00a0\u00bb. Vous serez surpris de voir \u00e0 quel point cela aide \u00e0 se qualifier.<\/p>\n Vous pouvez \u00e9galement utiliser les \u00e9l\u00e9ments suivants pour am\u00e9liorer l’utilisation des mots-cl\u00e9s dans le contenu de votre site\u00a0:<\/p>\n De plus, si vous avez un site de commerce \u00e9lectronique, vous pouvez m\u00eame faire bon usage des donn\u00e9es structur\u00e9es pour donner au moteur de recherche des d\u00e9tails plus pr\u00e9cis sur la couleur, le type, la taille et bien plus encore de vos produits.<\/p>\n La compression d’un fichier est peut-\u00eatre la partie la plus simple mais la plus cruciale de l’optimisation d’image, car elle est directement li\u00e9e au temps de chargement du site Web. Les points un \u00e0 quatre vous pr\u00e9parent \u00e0 cette derni\u00e8re \u00e9tape d’optimisation de l’image.<\/p>\n Une taille de fichier inf\u00e9rieure \u00e0 70 Ko est ce que vous devriez viser. Pour les gros fichiers de pr\u00e8s de 300 Ko, le mieux que vous puissiez obtenir est une taille de fichier de 100 Ko. Cela \u00e9vite que vos images ne prennent des millisecondes suppl\u00e9mentaires \u00e0 charger, tout en vous offrant des images compress\u00e9es avec perte qui ne compromettent pas la qualit\u00e9 visuelle.<\/p>\n Tout ce que vous avez \u00e0 faire est de placer ces fichiers sur un site de compression de fichiers et le tour est jou\u00e9. Voici quelques bons et gratuits outils en ligne pour la compression de fichiers image :<\/p>\n Vous pourriez utiliser tous ces conseils d’optimisation d’image et rester bloqu\u00e9 avec un site se chargeant en 13 secondes ou m\u00eame pire. C’est \u00e0 ce moment-l\u00e0 que vous voudrez peut-\u00eatre vous demander\u00a0:<\/p>\n Le contenu du site Web, \u00e0 la fois visuel et \u00e9crit, entretient une relation entrelac\u00e9e qui stimule les \u00e9motions et incite les gens \u00e0 s’engager davantage avec votre produit ou service. Les gens (ou du moins moi) jugent une entreprise \u00e0 travers son site Web, alors n’h\u00e9sitez pas \u00e0 nous dire quel \u00e9tait le dernier site Web g\u00e9nial que vous avez visit\u00e9. Ou qu’avez-vous fait pour optimiser l’image ?<\/p>\n \n
<\/span>Que peut faire l’optimisation d’image pour mes utilisateurs (et pour le r\u00e9f\u00e9rencement)\u00a0? <\/strong><\/span><\/h2>\n
\n
<\/span>Conseils d’optimisation d’image de base <\/strong><\/span><\/h2>\n
<\/span>1. Choisissez le bon type d’image : vectorielle ou raster ?<\/strong><\/span><\/h2>\n
\n
![\"Graphique](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633412473_897_Todo-lo-que-necesita-saber-para-tener-exito.png\")
<\/p>\n<\/span>En bout de ligne<\/strong><\/span><\/h4>\n
<\/span>2. Choisir le meilleur format d’image : SVG, JPG, PNG ou GIF ?<\/strong><\/span><\/h2>\n
<\/span>Meilleur format pour les images vectorielles\u00a0: <\/strong><\/span><\/h3>\n
<\/span>Les meilleurs formats pour les images raster :<\/strong><\/span><\/h3>\n
\n
<\/span>Voici un tableau qui pourrait vous aider \u00e0 d\u00e9terminer quel format d’image est le meilleur \u00e0 utiliser.<\/span><\/h4>\n
![\"Formats](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633412473_611_Todo-lo-que-necesita-saber-para-tener-exito.png\")
<\/p>\n<\/span>3. Redimensionner les images<\/strong><\/span><\/h2>\n
<\/span>Qu’est-ce qu’un rapport hauteur\/largeur ?<\/strong><\/span><\/h3>\n
<\/span>Parce que c’est important?<\/strong><\/span><\/h3>\n
![\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/Todo-lo-que-necesita-saber-para-tener-exito.jpg\")
<\/p>\n\n\n
\n Ratio d’aspect<\/td>\n Dimensions typiques (pouces)<\/td>\n Dimensions typiques (pixels)<\/td>\n Id\u00e9al pour<\/td>\n<\/tr>\n \n Onze<\/td>\n 8×8<\/td>\n 1080×1080<\/td>\n Photos de profil de r\u00e9seaux sociaux et \u00e9crans d’appareils mobiles<\/td>\n<\/tr>\n \n 3: 2<\/td>\n 6×4<\/td>\n 1080×720<\/td>\n Photographie et impression<\/td>\n<\/tr>\n \n 4: 3<\/td>\n 8×6<\/td>\n 1024 x 768 pixels<\/td>\n T\u00e9l\u00e9viseurs, moniteurs et appareils photo num\u00e9riques.<\/td>\n<\/tr>\n \n 16\u00a0:\u00a09<\/td>\n 1920 x 1080 et 1280 x 720<\/td>\n <\/td>\n Pr\u00e9sentations, moniteurs et t\u00e9l\u00e9viseurs grand \u00e9cran<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n ![\"Tableau](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633412473_832_Todo-lo-que-necesita-saber-para-tener-exito.jpg\")
Source : Shutterstock<\/p>\n<\/span>En bout de ligne<\/strong><\/span><\/h4>\n
<\/span>4. Nommer les images : les bonnes pratiques<\/strong><\/span><\/h2>\n
\n
<\/span>Cousine<\/strong><\/span><\/h3>\n
\n
<\/span>5. Compresser la taille en octets des fichiers image<\/strong><\/span><\/h2>\n
<\/span>Deux exemples en direct du temps de chargement que votre r\u00e9sultat peut co\u00fbter\u00a0:<\/span><\/h4>\n
\n
<\/span>Quelle est la taille de fichier image id\u00e9ale ?<\/strong><\/span><\/h3>\n
<\/span>Comment r\u00e9duire la taille du fichier d’une image ?<\/strong><\/span><\/h3>\n
\n
<\/span>Conseils bonus<\/strong><\/span><\/h3>\n
\n
<\/span>Notes de cl\u00f4ture<\/strong><\/span><\/h2>\n
\n