La bonne taille d’image pour votre site Web : 10-Minute Monday

La vidéo ci-dessous montre comment je trouve la bonne taille d’image pour tout projet de site Web

Quoi ? Pas d’images ?

Si vous êtes comme la plupart des gens, lorsque vous avez téléchargé votre premier thème WordPress, vous vous êtes demandé ce qu’il était advenu des images – ces mêmes images qui vous ont donné envie d’acheter ce thème.

Une fois que vous avez surmonté votre première GRANDE déception, à savoir que votre thème n’était PAS livré avec des images, la prochaine question que vous vous êtes probablement posée est la suivante : ‘Comment diable puis-je faire en sorte que mon thème WordPress ressemble à la démo ?’

Si vous commencez par trouver quelle taille d’image la démo de votre thème utilisait, vous aurez bientôt un site meilleur que la démo car il aura des images qui vous représentent le mieux, vous et votre entreprise.

La bonne taille d’image

Lorsque je crée un site WordPress pour mes clients, j’ai généralement besoin de 4 images de taille différente :

  1. page d’accueil / image d’en-tête de la première page (alias image Héro)
  2. bannières d’en-tête de page,
  3. images des articles de blog, et
  4. images de la barre latérale.

Comment trouver la bonne taille

Les informations de MEDIA SETTINGS sous APPEARANCE est un excellent endroit pour commencer car il vous donnera…

  • la meilleure largeur d’image pour un article de blog (1024 est pour le thème Showcase Pro), et
  • la taille de l’image qui fonctionnera le mieux dans la barre latérale de votre thème (300)

…MAIS il ne vous donnera pas les dimensions de votre page d’accueil / image d’en-tête de première page ou des bannières d’en-tête de page.

Vous trouverez les dimensions de votre page HOME / Front Page. Taille de l’image d’en-tête sous APPEARANCE -> CUSTOMIZE -> FRONT PAGE HEADER IMAGE.

Dans cet exemple, la taille est de 1600 px X 1050 px.

Bannières d’en-tête de page

Trouver cette taille est un peu plus délicat.

Par exemple, la bannière d’en-tête de démonstration de la page TEAM de Showcase Pro est beaucoup plus fine que l’image d’en-tête HOME / Front Page, MAIS la documentation du thème ne me dit pas quelle taille faire pour la bannière d’en-tête de la page TEAM.

Pour trouver la taille de n’importe quelle image de bannière d’en-tête de page

Entrez l’URL de la démo de votre thème dans le navigateur Firefox. Utilisez Firebug pour obtenir les dimensions exactes de la taille des images qui ont été utilisées.

  1. Clic droit + clic / Contrôle + clic (Mac) sur la page web
  2. Choisissez View Page Info
  3. Choisissez Media
  4. Défilez jusqu’à Background
  5. Sélectionnez l’image qui est la même que la bannière d’en-tête
  6. Dimensions : vous donne la taille exacte de l’image utilisée dans la démo du thème

La taille de la bannière d’en-tête TEAM a la dimension exacte de la bannière d’en-tête de la page HOME (1600 px X 1050 px), même si elle s’affiche plus finement.

Voyez la vidéo ci-dessous pour savoir comment j’utilise Firefox pour trouver la bonne taille d’image.

Quoi ? !!!! Toutes les images de bannière d’en-tête n’ont pas la même taille

Lorsque j’ai vérifié la bannière d’en-tête du BLOG, j’ai été surpris d’apprendre qu’elle n’avait pas la même taille que la bannière d’en-tête du TEAM. Au lieu d’être de 1600 x 1050, il était de 1800 px X 960px.

Les bannières d’en-tête de ce thème seront redimensionnées pour garder un aspect cohérent sur l’ensemble du site Web.

Votre défi de conception sera de trouver des images qui ont l’air bien dans des espaces longs et étroits.

La  » bonne  » taille d’image de billet de blog

Vous utiliserez ces mêmes étapes pour trouver la taille d’image de billet de blog de démonstration de votre thème :

  • Clic droit + clic / Contrôle + clic (Mac) sur la page web
  • Choisissez View Page Info
  • Choisissez Media
  • Défilez jusqu’à Background
  • Sélectionnez l’image qui est la même que la bannière d’en-tête
  • Dimensions : vous donne la taille exacte de l’image utilisée dans la démo du thème
900 px X 600 px

Conseil final

Les images pour le web doivent être de 72 ppp et RVB.

Les images pour l’impression doivent être de 300 dpi et CMYK.

Voyez-moi utiliser Firefox pour trouver la bonne taille d’image dans le thème de démonstration

Vous avez besoin d’aide avec vos images ?

Rejoignez-moi pour le lundi 10 minutes où je partage des conseils et des astuces pour les non-designers qui veulent améliorer leur image professionnelle.

Vous pouvez aussi me téléphoner ou m’envoyer un courriel, à tout moment. Contact

Rejoignez-moi en direct lors de mon prochain lundi 10 minutes

Recevez une invitation à me rejoindre EN DIRECT lors de mon prochain lundi 10 minutes, et recevez une liste de mes ressources gratuites préférées pour de superbes photographies que vous pouvez utiliser sur votre site Web ou dans n’importe quel projet.

C’est EN DIRECT et seulement 10 minutes. Les sessions sont courtes et centrées sur un seul sujet.

Et comme c’est en LIVE, vous pouvez poser des questions. J’essaie également de garder les sessions courtes parce que je sais que vous êtes occupés et que vous n’avez pas de temps à perdre.

.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *