meilleures tailles d’Image et comment enregistrer des Images pour le Web et Flothemes

enregistrer des images pour le web a toujours été un peu Le téléchargement d’images lourdes (taille de l’image originale à 5000 pixels de largeur, images non optimisées) ne créera pas seulement des problèmes avec l’expérience utilisateur sur votre site, mais affectera également votre stratégie de référencement (vitesse de chargement, taux de rebond, classement, etc.).,

Cet article est divisé en plusieurs parties couvrant tout ce que vous devez savoir sur la façon de préparer vos images pour le web. Dans la première partie de l’article, nous listerons les tailles d’image recommandées pour votre site Flothemes. Ensuite, l’article couvrira Comment inspecter les différentes sections de votre site web pour identifier les tailles correctes pour vos images avant de les télécharger sur le web. Nous expliquerons également comment exporter / enregistrer correctement les images, afin qu’elles soient optimisées pour la vitesse.,

enfin, nous fournirons quelques conseils de référencement D’Image sur la façon de titrer correctement vos images lors de leur enregistrement et pourquoi l’utilisation de balises ALT améliorera votre référencement. Pour les images déjà téléchargées sur votre site, nous vous montrerons comment identifier les images trop volumineuses et ralentissant votre site. Nous allons commencer!

pourquoi la taille des images et les performances du site sont-elles importantes?

Les images non optimisées ralentissent les sites web. Sites Web lents = mauvaise expérience utilisateur, moins de chances de se classer dans les recherches Google et finalement moins de demandes et de clients.,
enregistrer vos images avec des dimensions appropriées et optimiser les images pour le web peut aider avec quelques choses:

• vitesse-selon une recherche effectuée par Google, si une page Web se charge en plus de 5 secondes, la probabilité qu’un utilisateur mobile quitte cette page augmente de 90%. En redimensionnant et en réduisant la taille des images, vous accélérez les pages de votre site web.
• expérience utilisateur – des images de bonne qualité et percutantes aident les visiteurs à vivre une expérience plus attrayante lorsqu’ils naviguent sur votre site web., En gardant ces images optimisées et en les chargeant rapidement, vous garantissez une expérience fluide et fluide à vos visiteurs, ce qui les motive à passer plus de temps sur votre site et à explorer votre contenu.
• classement SEO-la vitesse du site est un facteur de classement. Plus votre site est rapide, mieux vous pouvez potentiellement classer. Les pages Web avec des images optimisées se chargeront beaucoup plus rapidement sur les appareils de bureau et Mobiles.
• ventes-des temps de chargement plus rapides et un meilleur référencement peuvent aider à attirer plus d’utilisateurs sur votre site, ce qui augmente vos chances d’être renseigné et réservé.,

Remarque: Lorsque nous parlons de taille d’image, nous entendons la dimension de l’image en pixels.

quelles sont les meilleures images de taille pour le web et les Flothemes?

lors du téléchargement d’images sur le web, il y a un certain nombre de choses à prendre en considération, telles que la raison pour laquelle l’image est utilisée, la taille du fichier et le type d’image à utiliser pour différentes zones de votre site.,

utilisation et Type D’Image

Il existe différents cas où vous souhaiterez utiliser différentes tailles d’image pour différentes zones de votre site, ci-dessous je couvrirai les zones les plus communes et les options de dimensionnement que vous pouvez utiliser pour chacune. Notez qu’il s’agit d’options de dimensionnement recommandées, adaptées à la rétine, étant donné que la majorité des utilisateurs visualisent le site sur un appareil mobile ou de taille moyenne de 13 à 15 pouces. Cependant, si vous visez à rendre le site superbe pour votre moniteur 27 pouces (qui a une très haute résolution), notez que ce n’est peut-être pas ce que vos clients potentiels utilisent.,

Si vous voulez être plus précis sur la façon dont vos utilisateurs voient votre site et votre portfolio, vous pouvez vérifier les appareils utilisés pour accéder à votre site via votre Google Analytics (allez dans Audience – Technology – Browser& OS – résolution D’écran), et ajuster la taille recommandée pour correspondre à la proportion requise

images pleine largeur

2400x1600px, jpeg, enregistrées pour le web et optimisées

Sur le site, vous pouvez avoir des sections où vous devez utiliser des images pleine largeur qui couvrent tout votre écran de gauche à droite., Ces zones peuvent être des images de héros, des diaporamas en plein écran, des images de bannières. Pour vous assurer que vos images pleine largeur sont belles sur n’importe quel appareil, grand ou petit, la taille recommandée est de 2400x1600px. Notez que les appareils ont un rapport différent de celui que vous photographiez et il est possible que vos images soient recadrées lorsqu’elles sont visualisées sur le web. Comme recommandation, essayez de prendre des photos plus larges que d’habitude pour votre contenu web, afin d’éviter le recadrage du contenu important de l’image.,

Inside Content Images

Horizontal – max largeur 1500px, jpeg, enregistré pour le web, et optimisé
Vertical – Max largeur 1000px, jpeg, enregistré pour le web, et optimisé

sur les pages de votre site, il y aura des sections composées d’images, de zones de texte, de boutons d’appel à l’action, etc. Fondamentalement, ce sont les sections où les images font partie du contenu intérieur (lire comme « pas pleine largeur”)., Dans ces cas, à moins que le dimensionnement recommandé ne soit spécifié comme le font certains de nos blocs Flothemes, vous pouvez suivre les recommandations ci-dessus pour les images horizontales et verticales. En fonction de votre ratio, la hauteur s’ajustera en conséquence lorsque vous Enregistrez vos images.,afficher les galeries: assurez-vous qu’elles ont toutes la même hauteur recommandée 1500px, qu’elles soient horizontales ou verticales

images de blog

• Si vous préparez des images à télécharger un blogpost, assurez-vous qu’ils sont tous de la même largeur, recommandé 1500px, peu importe si elles sont horizontales ou verticales

Images en vedette

Il existe 3 types d’images en vedette: portrait, images de paysage et de héros., Le dimensionnement des images Portrait et paysage suit la même recommandation que les images Inside content, tandis que la taille recommandée pour les images héros est couverte sous images pleine largeur. La clé pour avoir de bonnes images en vedette est la cohérence. Si vous souhaitez utiliser tous les portraits, assurez-vous qu’ils sont de la même taille, il en va de même pour les images de paysage et de héros. Si vous utilisez une grille de maçonnerie, le dimensionnement ci-dessus n’est pas si pertinent, assurez-vous simplement que les images ont une largeur d’au moins 1000 pixels.,

Si vous rencontrez des problèmes avec le dimensionnement de l’image, assurez-vous de consulter les options de dimensionnement de l’image dans vos paramètres Flothemes pour vous assurer qu’elles sont correctement configurées.

façons de trouver les tailles d’image correctes pour votre site web

il se peut que les tailles recommandées ci-dessus ne correspondent pas à vos besoins en raison d’une mise en page spécifique. Si vous n’êtes pas sûr de la bonne dimension d’image, heureusement, il existe plusieurs façons de vous aider à inspecter facilement les images de votre site web et à identifier le dimensionnement correct nécessaire pour chaque élément de votre site.,

Une chose importante à retenir est que pour les appareils retina, vous devez doubler la densité de pixels de l’image. Cela signifie que vous avez besoin d’images deux fois plus grandes pour les appareils retina afin qu’elles soient belles et nettes. Ainsi, une fois que vous avez trouvé les tailles d’image correctes pour chaque section de votre site, vous voudrez doubler ces tailles, puis les exporter et les télécharger sur votre site.

un., Utilisation de L’Extension Image Size Info

La première méthode pour trouver des tailles d’image pour votre site consiste à utiliser L’extension Image Size Info Pour Chrome (si vous n’utilisez pas Chrome sur votre ordinateur, nous vous recommandons fortement de l’utiliser lors de la création de votre site). Une fois que vous avez installé l’extension, cet outil vous permettra de connaître les tailles d’image de chaque élément d’image sur votre site.

consultez les images de votre site, prenez des notes, puis grâce à ces connaissances, vous pourrez adapter vos photos exactement aux espaces tels qu’ils sont prévus dans la conception du thème., N’oubliez pas qu’avec les écrans retina, vos images doivent être deux fois plus grandes que l’espace prévu. Donc, si vous avez un espace d’image de 750x500px, pour retina, il devrait être de 1500x1000px lors du téléchargement sur WordPress (ou toute autre plate-forme).

Par exemple: lorsque nous inspectons une image avec cette extension, elle est affichée à 780x520px, mais sa taille réelle est de 1560x1040px. C’est parce que nous utilisons un écran retina lors de l’inspection de l’image. Dans ce cas, vous pouvez utiliser les dimensions pour choisir la taille de votre image.,

sur un appareil non rétinien, les tailles affichées et les dimensions restent les mêmes. Dans ce cas, doublez les nombres et téléchargez des images à cette taille.

la principale limitation de cet outil, est qu’il ne peut pas inspecter les images d’arrière-plan pour le dimensionnement. Sur de nombreux thèmes, les images d’arrière-plan sont utilisées à la place des éléments HTML de l’image, car elles sont plus flexibles lors de l’affichage des images. Si vous ne parvenez pas à inspecter les images parce qu’il s’agit d’images d’arrière-plan, vous pouvez utiliser la méthode suivante pour examiner la taille des images sur votre site.

B., Utilisation de L’outil Inspector

Avec Chrome et Safari, vous pouvez également utiliser l’outil developers inspector pour trouver les tailles d’image sur le site. Le principe sera le même qu’avant, inspectez les différents éléments sur le site et notez les tailles. Doublez les tailles d’image pour les appareils retina, puis téléchargez-les sur WordPress, une fois qu’elles ont été optimisées pour le web et intitulées correctement pour le référencement.

les limites de cette méthode seront que si le site utilise des éléments réactifs définis dans des valeurs REM, les images peuvent être réduites lors de l’utilisation de l’inspecteur dans la même fenêtre., Si le site utilise également des éléments réactifs, ils seront plus grands sur les écrans plus grands et plus petits sur les autres. Il est préférable d’utiliser un écran plus grand lorsque cela est possible lors de la vérification du site, afin que vous puissiez obtenir le dimensionnement d’image le plus précis possible. Dans tous les cas, l’utilisation de cette méthode vous donnera une bonne indication des tailles de votre site et vous permettra d’aborder l’ajout d’images à votre site Web avec plus de soin.

Chrome

Chrome a intégré des outils de développement, c’est pourquoi c’est le navigateur le plus populaire sur le web pour les développeurs et les concepteurs., La vidéo suivante explique comment vous pouvez inspecter les images sur votre site pour connaître leurs tailles:

Firefox

avec Firefox, tout comme chrome, ils ont un outil d’inspecteur intégré qui vous permet de vérifier les images pour votre site.

Safari

Si vous utilisez Safari, vous pouvez utiliser l’inspecteur de l’outil pour voir les tailles d’images. Consultez le guide suivant pour savoir comment activer les outils de développement.,

Maintenant, vous pouvez vous rendre aux différentes sections de votre site et de préparer les dimensions de l’image.

pour les galeries, vous voudrez regarder la hauteur des images, car elles sont généralement limitées par la hauteur (la largeur peut donc être définie sur auto).

pour les articles de blog, vous voudrez noter la largeur de vos images, car elles sont contraintes par la largeur (la hauteur peut être automatique).,

pour le reste des éléments de votre site, vous devez utiliser la méthode décrite ci-dessus pour obtenir les dimensions correctes et les TÉLÉCHARGER aux dimensions optimales pour votre site.

maintenant que vous savez quelles dimensions vous avez besoin pour tous les éléments de votre site, nous allons vous expliquer comment optimiser toutes vos images pour la taille, c’est-à-dire en termes de dimensionnement des données. La taille du fichier de vos images est également très importante pour le web. Télécharger des images gonflées et lourdes sur votre site web mettra à rude épreuve les ressources de votre serveur, ralentira votre site et créera en effet une expérience utilisateur négative.,

l’Optimisation et l’enregistrement des images pour le web

Il y a un certain nombre de choses à considérer lors de l’optimisation et de l’enregistrement des images pour le web. Vous devez considérer quel type de fichier utiliser, JPG, PNG ou GIF en fonction de l’objectif. Vous voudrez étiqueter vos images correctement à des fins de référencement et vous voudrez les enregistrer dans le bon format de couleur (sRGB pour le web).

selon l’objectif, vous devez enregistrer les images dans l’un des formats suivants .jpg, .gif, ou .png. JPG sera le format le plus courant lors de l’enregistrement d’images pour votre site Web de portefeuille, ils seront également les plus légers en taille.,

Pour les noms de fichiers, assurez-vous qu’ils sont appropriés pour chaque image ou un blogue. Utilisez uniquement des lettres, des chiffres, des traits de soulignement et des tirets. Essayez d’utiliser uniquement des lettres anglaises. Les caractères d’autres langues, les points d’interrogation, les espaces, les signes de pourcentage peuvent être téléchargés de manière incorrecte ou provoquer un comportement inattendu dans vos galeries ou vos articles de blog.

par exemple, si vous venez de faire un mariage boho dans le Biltmore Santa Barbara, étiquetez les images, Boho-wedding-biltmore-santa-barbara_0001.jpg ce sera beaucoup plus SEO friendly, et pourrait fournir un meilleur classement pour votre site.,

optimisation des images dans Lightroom

avouons-le, Il y a beaucoup de paramètres différents à choisir et des combinaisons infinies de nombres à saisir. Cependant, si vous connaissez déjà le format d’image et les dimensions d’image requises, c’est beaucoup plus facile.

dans Lightroom, vous pouvez accéder à la boîte de dialogue D’exportation de 3 façons:

mettre en surbrillance et exporter

Vous pouvez simplement mettre en surbrillance / sélectionner n’importe quelle photo de votre bibliothèque Lightroom et cliquer avec le bouton droit sur la photo. Dans le menu déroulant, sélectionnez l’option d’Exportation.,

Fichier et Exporter

La deuxième façon est d’aller dans  » Fichier -> Export

en Utilisant le raccourci clavier

Le troisième, et le plus rapide est d’utiliser un raccourci clavier:

maj + commande + E (⇧+⌘+E)

Il n’a pas d’importance comment vous vous y rendez. N’importe lequel d’entre eux fonctionnera, alors choisissez le plus facile à retenir.,

boîte de dialogue D’exportation Lightroom

maintenant que vous savez comment exporter les images pour le web, nous allons couvrir les 4 sections et les différentes options à choisir dans la boîte de dialogue d’exportation Lightroom pour vous permettre d’exporter des images optimisées pour le web.

1. Nom du fichier

chaque exportation peut comporter ses propres paramètres de renommage. Si vous vous en tenez à l’option par défaut, vos images porteront le même nom que les fichiers d’origine et seront enregistrées en tant qu’image JPEG., Cependant, nous vous recommandons fortement de cocher la case” renommer en  » et de choisir l’un des nombreux modèles de renommage proposés par Lightroom pour personnaliser les images exportées. Dans la dénomination du fichier, Nous avons renommé les noms de fichiers de l’image en « séquence de noms personnalisée » où le texte personnalisé est étroitement lié au titre de notre article de blog ou aux mots clés de notre article de blog.

2. Dans Paramètres de fichier

assurez-vous que le Format de votre Image est réglé sur JPEG. C’est l’option la plus conviviale pour le web. Votre qualité ne doit pas être inférieure à 65., Normalement, nous le mettons à 75. Votre espace colorimétrique doit être sRGB. C’est l’espace colorimétrique utilisé par le web afin qu’il rende le meilleur. Ne cochez pas la case  » Limiter la taille du fichier à: ». Cocher cette case diminuerait considérablement la qualité du fichier.

Pour résumer, lors de l’enregistrement de vos images utilisez ces paramètres:

• 75% de Qualité
• .le format jpeg (.png pour les logos et les icônes)
• couleurs sRGB

3. Taille de l’Image

Cochez la case Redimensionner pour s’Adapter et choisir la Largeur & Hauteur., Dans la zone W: H: spécifiez W (Largeur en pixels) à la valeur requise (1500px pour les articles de blog et 2880 pour les diaporamas). En laissant la valeur en H (Hauteur) vide, elle sera définie sur Auto sizing.

Pour Les Galeries, vous pouvez laisser W en blanc, et définir H (Hauteur) à 1500px, cela devrait être optimal pour la plupart des thèmes.

Les tailles ci-dessus sont déjà optimisées pour les appareils retina.

4. Netteté de sortie

cochez la case à côté de « netteté pour”et sélectionnez la quantité à « haute”.

Vous pouvez maintenant exporter les images et suivre ce processus à chaque fois que vous exportez des images.,

paramètres de qualité D’Image

dans le monde de rêve d’un photographe, nous exportons toujours des images de qualité maximale. En réalité, nous découvrons que les exportations de qualité maximale ne sont pas nécessaires. Au niveau des tailles web, les différences de qualité sont souvent difficiles à percevoir, ce qui signifie que nous pouvons réduire légèrement la qualité, réduisant considérablement la taille du fichier.

tant que les images ne sont pas douces, vos clients ne connaîtront pas la différence entre la photo que vous avez prise et l’image affichée sur votre site.

Cela s’applique également aux couleurs des images., L’écran de chacun est calibré différemment, donc s’inquiéter des petites variations de couleur entre une image dans un navigateur et dans votre outil d’édition de choix est une perte de temps, à moins que cela ne ruine la qualité de l’image.

à l’extrémité supérieure de l’échelle de qualité, les rendements diminuent. La différence de qualité perçue entre un paramètre de qualité de 75% et 100% est difficile à voir, mais elle augmente considérablement la taille du fichier.

etant Donné les résultats ci-dessus, en sélectionnant l’exportation de 65-75 qualité., Il atteint le bon équilibre entre la qualité et la taille optimale du fichier image.

Maintenant c’est à votre tour de renommer vos fichiers, de les exporter pour le web, de les enregistrer pour le web et vous aurez vraiment bien des images optimisées pour le web.

étape Bonus: optimisez les images avant de les télécharger sur votre site

Il y a une dernière étape qui peut vous aider à supprimer radicalement les données excédentaires de vos images et à réduire la taille des fichiers – nous parlons d’outils tels que JPEGmini ou TinyJPG.

Ces outils peuvent vous aider à optimiser vos images., Choisissez-en un et exécutez vos images à travers elle:

1. JPEGmini-cette application vous permet de compresser vos images et de réduire leur taille de fichier sans aucun effet visible sur la qualité de l’image. Si vous avez la version Pro, il existe une extension pour Lightroom qui le fera automatiquement à l’exportation – un outil fortement recommandé pour tout photographe.
2. TinyJPG ou TinyPNG – vous pouvez exécuter vos images via tinyJPG ou tinyPNG pour compresser davantage vos images. Il y a cependant 2 limitations., Avec la version gratuite de cet outil, vous ne pouvez compresser que 20 images à la fois, et la taille du fichier par image doit être inférieure à 5 Mo.

Ce sera la dernière étape dans la création d’images Web optimisées rapides pour garder la vitesse de votre site rapide, et des images superbes!

En savoir plus en lisant ce guide complet sur la façon d’optimiser les images pour votre site WordPress.

Image SEO

maintenant que vos images sont dimensionnées, optimisées et téléchargées sur votre site, vous voudrez maintenant ajouter des balises ALT! C’est la dernière étape dans la création d’images optimisées à des fins de référencement., La balise ALT Est ce que les moteurs de recherche utilisent pour lire des images. Sans eux, vos images sont à peu près inexistantes sur le web.

heureusement, avec WordPress, vous pouvez accéder à votre bibliothèque multimédia après le téléchargement et étiqueter chaque image., Un excellent plugin qui vous permettra de le faire rapidement est WP Meta SEO, une fois ajouté, vous pouvez accéder à WP Meta SEO > informations D’Image et ajouter des balises ALT à toutes les images où il n’est pas présent, une fois terminé, le plugin peut être désactivé:

Il existe également plusieurs plugins qui ajouteront automatiquement les balises alt. Rank Math est une bonne solution de plugin pour cela, il suffit de l’installer et il ajoutera automatiquement des balises ALT lors du téléchargement à partir de la description de l’image ou du titre.,

lisez ce guide de référencement d’images pour découvrir plus de trucs et astuces et assurez-vous de tirer le meilleur parti de vos images dans les résultats de recherche.

Donc, c’est ça les gens. Les 3 étapes pour avoir des images optimisées pour votre site web.

commencez par déterminer les dimensions de votre image, puis enregistrez-les correctement pour le web, ajoutez les titres appropriés et optimisez leur taille. Enfin, ajoutez des balises alt pour améliorer le référencement via WordPress (il devrait être possible d’ajouter des balises ALT dans tous les systèmes de gestion de contenu, reportez-vous à la documentation pour savoir comment, ou contactez le support).,

trouver des Images non optimisées

Si vous avez déjà téléchargé des images sur votre site et que vous souhaitez savoir comment trouver celles qui ralentissent votre page, consultez la vidéo suivante. Des outils tels que GTMetrix ou Pingdom, ou l’utilisation de la console du navigateur vous permettront facilement de trouver des images trop grandes pour le web.

Si vous souhaitez en savoir plus sur l’optimisation de votre site pour la vitesse, découvrez ce guide utile.

Flothemes
vous autonomiser