get in touch Mille Myriades © 2018

    Dimensions et Formats – optimiser les images pour le web

    MyMyriades / 14 mai 2018 / Site Web

    Quels dimensions et formats d’images pour le web ?! Difficile, la taille des images sur votre site ? site lourd ? images pixelisés ? vous avez entendu parler du référencement naturel des images, mais ne pige pas tout ?

    Allez suivre mes vidéos ces prochaines semaines, je couvre tout ce dont on a besoin de savoir !

    Vous avez votre identité visuelle, votre site web, vous avez vos images et photographies, et après ? Il faudrait adapter vos images à une utilisation en ligne.

    Avec cet article, je démarre une série qui va vous guider dans la préparation des images pour une utilisation efficace en ligne : Comment optimiser les images pour son site web pro ?

    J’aimerais vous parler du format, de référencement naturel, google, la mise en forme, comment alléger une photo pour un site plus rapide et tant d’autre chose.

    Aujourd’hui on commence par les considérations autour de l’image et les dimensions et formats de base. À la fin de cet article, vous allez connaître tous les points à vérifier avant de mettre vos photos en ligne.

    Si vous êtes plus spectateur que lecteur, voici une vidéo qui accompagne cet article :

    Dimensions et Formats – principes de base

    Image en ligne – sujet qui divise. On trouve plein de conseils sur le net autour de cette question et on ne sait pas qui est le bon. La réalité est que tout dépend du résultat qu’on voudrait avoir. Je propose ici une solution de base que j’utilise et qui fonctionne bien.

    Le principe de base est que les images pour votre site devrait être aussi petites que possible mais aussi grand que la qualité est correcte. Un site avec des images trop grandes devient vite très lourd.

    Le défi des images sur le web est d’obtenir le meilleur rapport entre poids et qualité.

    Sur le web on utilise 72 ppp ( points par pouce ) parce qu’ils sont plus légère en Mo ou Ko et pour l’impression 300ppp.

    👀 Dans l’article suivant je vous montre comment alléger vos images, étape par étape, ne vous inquiétez pas, je vous couvre.

    Formats pour vos images adaptées

    Les formats sont .jpg ou .png. Png permet d’avoir un arrière plan qui est transparent, ce qui n’est pas le cas avec .jpg

    Dimensions et formats - la différence entre le format PNG et JPG

    Paramètres de décision de tes images

    Maintenant, il faut souligner qu’il n’y pas une repose qui corresponde à tous les sites. Tout dépend de votre modèle, la manière dont le site à été conçu et les écrans dont vos visiteurs utilisent.

    Dimensions et Format – les chiffres

    Il y a quand même quelques ponts de repères dans cette affaire. Il faut juste connaître les dimensions et formats de votre site et les écrans dont se servent vos lecteurs et utilisateurs.

    Dimensions et poids

    C’est ici que les changements les plus radicales doivent être faites. En réduisant ces deux paramètres, on obtient une image adapté au web :

    *Taille de fichier ( en kilobytes ou megabytes )
    *taille d’image ( les pixels ex. 1080×720)

    Les tailles d’écran

    W3school, référence supérieure dans le monde de web design, annonce qu’en janvier 2018, 95% des visiteurs de leur site a une résolution de 1024×768 pixels ou plus. C’est un point de départ, mais gardez un œil sur les statistiques de votre site.

    La taille de ton site et blog

    Tu télécharge l’image adapté aux écrans dans la bibliothèque médias, mais WordPress offre trois tailles de ces images pour ton site. Cela est défini dans les Réglages > Médias.

    • Large version (défaut 1024px)
    • Medium version (défaut 300px)
    • Thumbnail (défaut 150px)

    Dimensions et formats - Réglages de la taille d'images sur WordPress

    Savoir la taille et la dimensions de ses images

    Vous pouvez vérifier la taille de vos images sur votre ordinateur. Dans Finder si vous utilise Mac et dans l’Explorateur des fichiers sur PC

    Outils pour changer les dimensions de tes images

    Si vous n’avez pas PhotoShop sur votre ordinateur, ne désespérez pas, il y a d’autres solutions. Voici quelques-unes :

    • votre site WordPress – dans la bibliothèque de médias vous pouvez changer les dimensions
    • Canva – choisissez la taille du modèle que tu veux
    • Gimp – libre, équivalent de PhotoShop, plus complexe, vous pouvez tout faire si vous avez le temps d’apprendre le programme. Déconseille pour débutants.
    • fotor – simple, permets à changer les réglages, mettre des filtres, en ligne,
    • https://www.befunky.com/fr/
    • Fast Stoner (windows) – changez la taille rapidement, redimensionner, changez la luminosité.

    Attention au droit d’auteur !

    Il faut toujours faire attention quand on télécharge des photos du web. Passez par des sites avec des photos libre de droits pour être sûr que vous ne enfreindrez pas la loi de droits d’auteur.

    Dimensions et formats - Trouver des images sous licence Creative commons

    Lire mon article sur les sites photos libre de droit

    Je vous avait promis que à la fin, vous connaîtriez tous les points à vérifier sur vos images web ! ✔

    Maintenant je vous donne également un check-list / flux de travail qui accompagne ma série sur l’image en ligne. Vous pouvez le récupérer sur cette adresse https://millemyriades.fr/workflow-images-freebie/

    Épingler sur Pinterest pour lire plus tard ! 👇

    Dimensions et formats - Optimiser les images pour son site web pro

      Freebie ❧ 29 astuces pour un site bien conçu
      Identité Visuelle
      Site Web
      Organisation
      Joindre la tribu ❧ Mille Myriades Créati(f)ves
      sur les réseaux sociaux