{"id":10392,"date":"2023-07-29T15:17:58","date_gmt":"2023-07-29T13:17:58","guid":{"rendered":"https:\/\/info.bienvu.ch\/?p=10392"},"modified":"2023-07-29T15:49:20","modified_gmt":"2023-07-29T13:49:20","slug":"determiner-la-taille-optimale-des-images-pour-un-site-internet","status":"publish","type":"post","link":"https:\/\/info.bienvu.ch\/en\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/","title":{"rendered":"D\u00e9terminer la taille optimale des images pour un site internet"},"content":{"rendered":"\n
\n
\n
\n
\n \n
\n
\n

D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis.<\/em><\/strong><\/p>

Visuellement, vous souhaitez la meilleure qualit\u00e9 possible, la plus grande r\u00e9solution, la plus grande finesse.<\/em><\/strong><\/p>

Techniquement, vous souhaitez que le temps de chargement de vos pages ne soit pas affect\u00e9 par des fichiers trop lourds, vous favorisez les images les plus l\u00e9g\u00e8res possibles.<\/em><\/strong><\/p> <\/div>\n<\/div>\n\n

\n
\n

D\u00e9termination des dimensions de l’image<\/h1>

La dimension de l’image d\u00e9pend de l’usage qui en sera faite, par exemple:<\/p>

  • Une image de fond qui utilise 100% de l’\u00e9cran.<\/li>
  • Une image en orientation ‘portrait’ qui utilise 100% la hauteur de l’\u00e9cran.<\/li>
  • Une image visible sur 1\/4 de l’\u00e9cran.<\/li>
  • Une vignette qui prend 5% de l’\u00e9cran.<\/li>
  • \u00a0etc …<\/li><\/ul>

    En principe, je prends la base de calcul simplifi\u00e9e suivante:<\/p>

    • 100% de la largeur de l’\u00e9cran correspond \u00e0 2000 px.<\/li>
    • 100% de la hauteur de l’\u00e9cran correspond \u00e0 1100 px.<\/li><\/ul>

      Prenons un cas pratique<\/h2>

      Vous voulez faire une nouvelle page pour vous pr\u00e9senter.<\/p>

      Vous commencez par \u00e9tablir une maquette de la pr\u00e9sentation de la page.<\/p>

      \"\"<\/p>

      \u00a0<\/h4>

      Dimensions th\u00e9oriques de la taille de la photo en pixel, d’apr\u00e8s la maquette<\/h3>

      Si la hauteur de la photo repr\u00e9sente 50% de l’\u00e9cran,\u00a0 elle fait donc 0.5 * 1100 px = environ 550 px.<\/p>

      Si la largeur de la photo repr\u00e9sente approximativement 15% de la largeur de l’\u00e9cran, elle fait donc\u00a0 0.15 * 2000 px = approximativement 300 px.<\/p>

      Ceci donne une id\u00e9e indicative de la dimension de la photo, un ordre de grandeur.<\/p>

      Dimensions r\u00e9elles de la photo d’origine qui doit \u00eatre redimensionn\u00e9e<\/h3>

      Par exemple, la photo d’origine provient de votre appareil photo reflex \u00e9quip\u00e9 d’un capteur de 7360 px * 4912 px.<\/p>

      Vous faites quelques travaux de retouche\u00a0 (colorim\u00e9trie et de recadrage) dans votre logiciel de retouche pr\u00e9f\u00e9r\u00e9.<\/p>

      Au final, vous obtenez un clich\u00e9 d’une dimension\u00a0 6500 px * 4333 px.<\/p>

      D\u00e9termination du facteur de redimensionnement \u00e0 appliquer<\/h3>

      Selon votre maquette, il faudrait th\u00e9oriquement r\u00e9duire la photo ainsi:<\/p>

      • Horizontalement :4333 px -> 300 px = 6.9%\u00a0 de la taille d’origine.<\/li>
      • Verticalement: 6500 px -> 550px = 8.5% de la taille d’origine.<\/li><\/ul>

        Puisque vous ne voulez pas d\u00e9former la photo, vous choisissez le m\u00eame facteur de r\u00e9duction en hauteur et en largeur afin de conserver le ratio hauteur:largeur de l’image d’origine.<\/p>

        Vous obtez pour 8.5 %, car il vous semble pr\u00e9f\u00e9rable d’avoir un petit peu trop de qualit\u00e9, que pas assez.<\/p>

        Vous redimensionnez la photo HD ainsi:<\/p>

        • Largeur: 4333 * 0.085\u00a0 = 368 px<\/li>
        • Hauteur: 6500 * 0.085\u00a0 = 553 px<\/li><\/ul>

          Ceci est pour l’axe ‘dimension de l’image’ qui contribue \u00e0 la taille du fichier.<\/p>

          Format du fichier<\/h1>
          • Le format JPG est g\u00e9n\u00e9rallement outilis\u00e9 pour les images naturelles . Est entendu par ‘naturel’, les images du monde r\u00e9el (paysages, portraits)<\/li>
          • Les formats PNG ou GIF seront r\u00e9serv\u00e9s pour des graphiques avec un nombre de couleurs tr\u00e8s r\u00e9duit (< 255)<\/li>
          • Les fichiers TIFF ou RAW ne sont pas adapt\u00e9s \u00e0 une publication sur le web, car les tailles de ces fichiers sont monstrueuses. On r\u00e9serve ces formats pour le prepress, l’impression ou une retouche ult\u00e9rieure des photos.
            Conseil: Si vous commandez des photos \u00e0 un photographe, essayez de r\u00e9cup\u00e9rer les clich\u00e9s dans un de ces formats ‘lossless’ (formats d’image sans perte).<\/li><\/ul>

            Param\u00e8tre ‘qualit\u00e9’ du format JPG<\/h2>

            Le format JPG permet de r\u00e9gler la qualit\u00e9, le taux de compression qui influe sur la taille du fichier.<\/p>

            R\u00e9glage de qualit\u00e9 faible ( 30% et moins)<\/h3>

            Une image avec un r\u00e9glage de qualit\u00e9 faible aura une taille de fichier r\u00e9duite, mais avec des art\u00e9facts visibles<\/p>

            \"\"
            Compression forte, taille: 6Kb, beaucoup d’art\u00e9facts.<\/figcaption><\/figure><\/blockquote>

            R\u00e9glage de qualit\u00e9 \u00e9lev\u00e9 (80% et plus)<\/h3>

            Une image avec un r\u00e9glage de qualit\u00e9 \u00e9lev\u00e9 n’aura pas\/peu d’art\u00e9facts visibles, par contre le fichier sera plus volumineux.<\/p>

            \"\"
            Peu de compression, taille: 37Kb, pas d’art\u00e9facts. Image tr\u00e8s claire mais 6x plus volumineuse.<\/figcaption><\/figure><\/blockquote>

            Par exp\u00e9rience, une qualit\u00e9 de 90% est excellente et est mon choix de pr\u00e9f\u00e9rence pour les portraits.<\/p>

            N\u00e9anmoins, si l’image est destin\u00e9e \u00e0 devenir une image de fond qui sera recouverte par d’autres \u00e9l\u00e9ments, vous pouvez r\u00e9duire la qualit\u00e9, par exemple \u00e0 60% si ce n’est pas visuellement choquant.<\/p>

            Au final, le plus important, c’est la taille<\/h1>

            L’objectif est de produire la meilleure qualit\u00e9 visuelle possible, sans que le site devienne lourd en raison d’images longues \u00e0 charger.<\/p>

            Concernant la taille des fichiers, personnellement je me fixe les principes et limites suivantes:<\/p>

            • Une image de fond (plein \u00e9cran) ne devrait jamais d\u00e9passer 700 Kb.<\/li>
            • Une photo qui prend 1\/2 \u00e9cran ne devrait jamais d\u00e9passer 300kb.<\/li>
            • Une photo qui prend 1\/4 d’\u00e9cran ne devrait jamais d\u00e9passer 150kb.<\/li>
            • Le volume de donn\u00e9es charg\u00e9es par une page web, tous \u00e9l\u00e9ments confondus (la page, les scripts, toutes les images qu’elle contient, etc ) ne devrait g\u00e9n\u00e9ralement pas d\u00e9passer 4Mb.<\/li>
            • La plus petite taille possible est pr\u00e9f\u00e9rable, tant que \u00e7a ne devient pas visuellement choquant.<\/li><\/ul>

              Que faire si la taille du fichier demeure trop importante?<\/h2>
              1. Vous essaierez de r\u00e9duire la qualit\u00e9.<\/li>
              2. Si les art\u00e9facts deviennent g\u00eanants, vous r\u00e9duirez la taille de l’image (dimension en pixels).<\/li>
              3. Vous rechercherez le meilleur compromis possible pour trouver le bon \u00e9quilibre.<\/li><\/ol> <\/div>\n<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

                D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.<\/p>\n","protected":false},"author":29,"featured_media":10389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52,67],"tags":[],"class_list":["post-10392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","category-votre-site-web","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"yoast_head":"\nD\u00e9terminer la taille optimale des images pour un site internet - BIENVU INFORMATIQUE<\/title>\n<meta name=\"description\" content=\"D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9terminer la taille optimale des images pour un site internet - BIENVU INFORMATIQUE\" \/>\n<meta property=\"og:description\" content=\"D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bienvu.ch\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/bienvu.ch\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-29T13:17:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-29T13:49:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1919\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"S\u00e9bastien Haller\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bienvuch\" \/>\n<meta name=\"twitter:site\" content=\"@bienvuch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"S\u00e9bastien Haller\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/\"},\"author\":{\"name\":\"S\u00e9bastien Haller\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#\\\/schema\\\/person\\\/924890226b594e7a91d29facbffb653b\"},\"headline\":\"D\u00e9terminer la taille optimale des images pour un site internet\",\"datePublished\":\"2023-07-29T13:17:58+00:00\",\"dateModified\":\"2023-07-29T13:49:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/\"},\"wordCount\":11,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/info.bienvu.ch\\\/wp-content\\\/uploads\\\/info.bienvu.ch\\\/sites\\\/8\\\/2023\\\/07\\\/maquette_john_doe.jpg\",\"articleSection\":[\"Internet\",\"Votre site web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/\",\"url\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/\",\"name\":\"D\u00e9terminer la taille optimale des images pour un site internet - BIENVU INFORMATIQUE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/info.bienvu.ch\\\/wp-content\\\/uploads\\\/info.bienvu.ch\\\/sites\\\/8\\\/2023\\\/07\\\/maquette_john_doe.jpg\",\"datePublished\":\"2023-07-29T13:17:58+00:00\",\"dateModified\":\"2023-07-29T13:49:20+00:00\",\"description\":\"D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#primaryimage\",\"url\":\"https:\\\/\\\/info.bienvu.ch\\\/wp-content\\\/uploads\\\/info.bienvu.ch\\\/sites\\\/8\\\/2023\\\/07\\\/maquette_john_doe.jpg\",\"contentUrl\":\"https:\\\/\\\/info.bienvu.ch\\\/wp-content\\\/uploads\\\/info.bienvu.ch\\\/sites\\\/8\\\/2023\\\/07\\\/maquette_john_doe.jpg\",\"width\":1919,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/determiner-la-taille-optimale-des-images-pour-un-site-internet\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/info.bienvu.ch\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9terminer la taille optimale des images pour un site internet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#website\",\"url\":\"https:\\\/\\\/info.bienvu.ch\\\/\",\"name\":\"\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/info.bienvu.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#organization\",\"name\":\"Bienvu Informatique\",\"url\":\"https:\\\/\\\/info.bienvu.ch\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/info.bienvu.ch\\\/wp-content\\\/uploads\\\/info.bienvu.ch\\\/sites\\\/8\\\/2018\\\/07\\\/logo_final_plain.svg\",\"contentUrl\":\"https:\\\/\\\/info.bienvu.ch\\\/wp-content\\\/uploads\\\/info.bienvu.ch\\\/sites\\\/8\\\/2018\\\/07\\\/logo_final_plain.svg\",\"width\":1,\"height\":1,\"caption\":\"Bienvu Informatique\"},\"image\":{\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/bienvu.ch\\\/\",\"https:\\\/\\\/x.com\\\/bienvuch\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/11262411\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/info.bienvu.ch\\\/#\\\/schema\\\/person\\\/924890226b594e7a91d29facbffb653b\",\"name\":\"S\u00e9bastien Haller\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6a25f2e19e4cb576d385cd4506c090b86a5c88553e3ca26c3e9668ddf1a7d48?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6a25f2e19e4cb576d385cd4506c090b86a5c88553e3ca26c3e9668ddf1a7d48?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6a25f2e19e4cb576d385cd4506c090b86a5c88553e3ca26c3e9668ddf1a7d48?s=96&d=mm&r=g\",\"caption\":\"S\u00e9bastien Haller\"},\"description\":\"partenaire informatique des professionnels et particuliers\",\"sameAs\":[\"https:\\\/\\\/info.bienvu.ch\\\/\",\"https:\\\/\\\/www.facebook.com\\\/bienvu.ch\\\/\",\"https:\\\/\\\/x.com\\\/bienvuch\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D\u00e9terminer la taille optimale des images pour un site internet - BIENVU INFORMATIQUE","description":"D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/","og_locale":"en_US","og_type":"article","og_title":"D\u00e9terminer la taille optimale des images pour un site internet - BIENVU INFORMATIQUE","og_description":"D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.","og_url":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/","article_publisher":"https:\/\/www.facebook.com\/bienvu.ch\/","article_author":"https:\/\/www.facebook.com\/bienvu.ch\/","article_published_time":"2023-07-29T13:17:58+00:00","article_modified_time":"2023-07-29T13:49:20+00:00","og_image":[{"width":1919,"height":1080,"url":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg","type":"image\/jpeg"}],"author":"S\u00e9bastien Haller","twitter_card":"summary_large_image","twitter_creator":"@bienvuch","twitter_site":"@bienvuch","twitter_misc":{"Written by":"S\u00e9bastien Haller"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#article","isPartOf":{"@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/"},"author":{"name":"S\u00e9bastien Haller","@id":"https:\/\/info.bienvu.ch\/#\/schema\/person\/924890226b594e7a91d29facbffb653b"},"headline":"D\u00e9terminer la taille optimale des images pour un site internet","datePublished":"2023-07-29T13:17:58+00:00","dateModified":"2023-07-29T13:49:20+00:00","mainEntityOfPage":{"@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/info.bienvu.ch\/#organization"},"image":{"@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#primaryimage"},"thumbnailUrl":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg","articleSection":["Internet","Votre site web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/","url":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/","name":"D\u00e9terminer la taille optimale des images pour un site internet - BIENVU INFORMATIQUE","isPartOf":{"@id":"https:\/\/info.bienvu.ch\/#website"},"primaryImageOfPage":{"@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#primaryimage"},"image":{"@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#primaryimage"},"thumbnailUrl":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg","datePublished":"2023-07-29T13:17:58+00:00","dateModified":"2023-07-29T13:49:20+00:00","description":"D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis entre la qualit\u00e9 visuelle et la taille des fichiers.","breadcrumb":{"@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#primaryimage","url":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg","contentUrl":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg","width":1919,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/info.bienvu.ch\/determiner-la-taille-optimale-des-images-pour-un-site-internet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/info.bienvu.ch\/en\/"},{"@type":"ListItem","position":2,"name":"D\u00e9terminer la taille optimale des images pour un site internet"}]},{"@type":"WebSite","@id":"https:\/\/info.bienvu.ch\/#website","url":"https:\/\/info.bienvu.ch\/","name":"","description":"","publisher":{"@id":"https:\/\/info.bienvu.ch\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/info.bienvu.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/info.bienvu.ch\/#organization","name":"Bienvu Informatique","url":"https:\/\/info.bienvu.ch\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/info.bienvu.ch\/#\/schema\/logo\/image\/","url":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2018\/07\/logo_final_plain.svg","contentUrl":"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2018\/07\/logo_final_plain.svg","width":1,"height":1,"caption":"Bienvu Informatique"},"image":{"@id":"https:\/\/info.bienvu.ch\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bienvu.ch\/","https:\/\/x.com\/bienvuch","https:\/\/www.linkedin.com\/company\/11262411\/"]},{"@type":"Person","@id":"https:\/\/info.bienvu.ch\/#\/schema\/person\/924890226b594e7a91d29facbffb653b","name":"S\u00e9bastien Haller","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a6a25f2e19e4cb576d385cd4506c090b86a5c88553e3ca26c3e9668ddf1a7d48?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a6a25f2e19e4cb576d385cd4506c090b86a5c88553e3ca26c3e9668ddf1a7d48?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a6a25f2e19e4cb576d385cd4506c090b86a5c88553e3ca26c3e9668ddf1a7d48?s=96&d=mm&r=g","caption":"S\u00e9bastien Haller"},"description":"partenaire informatique des professionnels et particuliers","sameAs":["https:\/\/info.bienvu.ch\/","https:\/\/www.facebook.com\/bienvu.ch\/","https:\/\/x.com\/bienvuch"]}]}},"builder_content":"<p><strong><em>D\u00e9terminer la dimension et la taille optimale des images sur un site web sera souvent une question de compromis.<\/em><\/strong><\/p><p style=\"padding-left: 40px;\"><strong><em>Visuellement, vous souhaitez la meilleure qualit\u00e9 possible, la plus grande r\u00e9solution, la plus grande finesse.<\/em><\/strong><\/p><p style=\"padding-left: 40px;\"><strong><em>Techniquement, vous souhaitez que le temps de chargement de vos pages ne soit pas affect\u00e9 par des fichiers trop lourds, vous favorisez les images les plus l\u00e9g\u00e8res possibles.<\/em><\/strong><\/p>\n<h1>D\u00e9termination des dimensions de l'image<\/h1><p>La dimension de l'image d\u00e9pend de l'usage qui en sera faite, par exemple:<\/p><ul><li>Une image de fond qui utilise 100% de l'\u00e9cran.<\/li><li>Une image en orientation 'portrait' qui utilise 100% la hauteur de l'\u00e9cran.<\/li><li>Une image visible sur 1\/4 de l'\u00e9cran.<\/li><li>Une vignette qui prend 5% de l'\u00e9cran.<\/li><li>\u00a0etc ...<\/li><\/ul><p>En principe, je prends la base de calcul simplifi\u00e9e suivante:<\/p><ul><li>100% de la largeur de l'\u00e9cran correspond \u00e0 2000 px.<\/li><li>100% de la hauteur de l'\u00e9cran correspond \u00e0 1100 px.<\/li><\/ul><h2>Prenons un cas pratique<\/h2><p>Vous voulez faire une nouvelle page pour vous pr\u00e9senter.<\/p><p>Vous commencez par \u00e9tablir une maquette de la pr\u00e9sentation de la page.<\/p><p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-1024x576.jpg\" alt=\"\" width=\"1024\" height=\"576\" srcset=\"https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-1024x576.jpg 1024w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-300x169.jpg 300w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-150x84.jpg 150w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-768x432.jpg 768w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-1536x864.jpg 1536w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-120x68.jpg 120w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-480x270.jpg 480w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe-640x360.jpg 640w, https:\/\/info.bienvu.ch\/wp-content\/uploads\/info.bienvu.ch\/sites\/8\/2023\/07\/maquette_john_doe.jpg 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p><h4>\u00a0<\/h4><h3>Dimensions th\u00e9oriques de la taille de la photo en pixel, d'apr\u00e8s la maquette<\/h3><p>Si la hauteur de la photo repr\u00e9sente 50% de l'\u00e9cran,\u00a0 elle fait donc 0.5 * 1100 px = environ 550 px.<\/p><p>Si la largeur de la photo repr\u00e9sente approximativement 15% de la largeur de l'\u00e9cran, elle fait donc\u00a0 0.15 * 2000 px = approximativement 300 px.<\/p><p>Ceci donne une id\u00e9e indicative de la dimension de la photo, un ordre de grandeur.<\/p><h3>Dimensions r\u00e9elles de la photo d'origine qui doit \u00eatre redimensionn\u00e9e<\/h3><p>Par exemple, la photo d'origine provient de votre appareil photo reflex \u00e9quip\u00e9 d'un capteur de 7360 px * 4912 px.<\/p><p>Vous faites quelques travaux de retouche\u00a0 (colorim\u00e9trie et de recadrage) dans votre logiciel de retouche pr\u00e9f\u00e9r\u00e9.<\/p><p>Au final, vous obtenez un clich\u00e9 d'une dimension\u00a0 6500 px * 4333 px.<\/p><h3>D\u00e9termination du facteur de redimensionnement \u00e0 appliquer<\/h3><p>Selon votre maquette, il faudrait th\u00e9oriquement r\u00e9duire la photo ainsi:<\/p><ul><li>Horizontalement :4333 px -> 300 px = 6.9%\u00a0 de la taille d'origine.<\/li><li>Verticalement: 6500 px -> 550px = 8.5% de la taille d'origine.<\/li><\/ul><p>Puisque vous ne voulez pas d\u00e9former la photo, vous choisissez le m\u00eame facteur de r\u00e9duction en hauteur et en largeur afin de conserver le ratio hauteur:largeur de l'image d'origine.<\/p><p>Vous obtez pour 8.5 %, car il vous semble pr\u00e9f\u00e9rable d'avoir un petit peu trop de qualit\u00e9, que pas assez.<\/p><p>Vous redimensionnez la photo HD ainsi:<\/p><ul><li>Largeur: 4333 * 0.085\u00a0 = 368 px<\/li><li>Hauteur: 6500 * 0.085\u00a0 = 553 px<\/li><\/ul><p>Ceci est pour l'axe 'dimension de l'image' qui contribue \u00e0 la taille du fichier.<\/p><h1>Format du fichier<\/h1><ul><li>Le format JPG est g\u00e9n\u00e9rallement outilis\u00e9 pour les images naturelles . Est entendu par 'naturel', les images du monde r\u00e9el (paysages, portraits)<\/li><li>Les formats PNG ou GIF seront r\u00e9serv\u00e9s pour des graphiques avec un nombre de couleurs tr\u00e8s r\u00e9duit (< 255)<\/li><li>Les fichiers TIFF ou RAW ne sont pas adapt\u00e9s \u00e0 une publication sur le web, car les tailles de ces fichiers sont monstrueuses. On r\u00e9serve ces formats pour le prepress, l'impression ou une retouche ult\u00e9rieure des photos. <br \/>Conseil: Si vous commandez des photos \u00e0 un photographe, essayez de r\u00e9cup\u00e9rer les clich\u00e9s dans un de ces formats 'lossless' (formats d'image sans perte).<\/li><\/ul><h2>Param\u00e8tre 'qualit\u00e9' du format JPG<\/h2><p>Le format JPG permet de r\u00e9gler la qualit\u00e9, le taux de compression qui influe sur la taille du fichier.<\/p><h3>R\u00e9glage de qualit\u00e9 faible ( 30% et moins)<\/h3><p>Une image avec un r\u00e9glage de qualit\u00e9 faible aura une taille de fichier r\u00e9duite, mais avec des art\u00e9facts visibles<\/p><blockquote>[caption id=\"\" align=\"alignnone\" width=\"150\"]<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6d\/Sego_lily_cm-150.jpg\" alt=\"\" width=\"150\" height=\"180\" \/> Compression forte, taille: 6Kb, beaucoup d'art\u00e9facts.[\/caption]<\/blockquote><h3>R\u00e9glage de qualit\u00e9 \u00e9lev\u00e9 (80% et plus)<\/h3><p>Une image avec un r\u00e9glage de qualit\u00e9 \u00e9lev\u00e9 n'aura pas\/peu d'art\u00e9facts visibles, par contre le fichier sera plus volumineux.<\/p><blockquote>[caption id=\"\" align=\"alignnone\" width=\"150\"]<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/bd\/Sego_lily_cm-150.png\" alt=\"\" width=\"150\" height=\"180\" \/> Peu de compression, taille: 37Kb, pas d'art\u00e9facts. Image tr\u00e8s claire mais 6x plus volumineuse.[\/caption]<\/blockquote><p>Par exp\u00e9rience, une qualit\u00e9 de 90% est excellente et est mon choix de pr\u00e9f\u00e9rence pour les portraits.<\/p><p>N\u00e9anmoins, si l'image est destin\u00e9e \u00e0 devenir une image de fond qui sera recouverte par d'autres \u00e9l\u00e9ments, vous pouvez r\u00e9duire la qualit\u00e9, par exemple \u00e0 60% si ce n'est pas visuellement choquant.<\/p><h1>Au final, le plus important, c'est la taille<\/h1><p>L'objectif est de produire la meilleure qualit\u00e9 visuelle possible, sans que le site devienne lourd en raison d'images longues \u00e0 charger.<\/p><p>Concernant la taille des fichiers, personnellement je me fixe les principes et limites suivantes:<\/p><ul><li>Une image de fond (plein \u00e9cran) ne devrait jamais d\u00e9passer 700 Kb.<\/li><li>Une photo qui prend 1\/2 \u00e9cran ne devrait jamais d\u00e9passer 300kb.<\/li><li>Une photo qui prend 1\/4 d'\u00e9cran ne devrait jamais d\u00e9passer 150kb.<\/li><li>Le volume de donn\u00e9es charg\u00e9es par une page web, tous \u00e9l\u00e9ments confondus (la page, les scripts, toutes les images qu'elle contient, etc ) ne devrait g\u00e9n\u00e9ralement pas d\u00e9passer 4Mb.<\/li><li>La plus petite taille possible est pr\u00e9f\u00e9rable, tant que \u00e7a ne devient pas visuellement choquant.<\/li><\/ul><h2>Que faire si la taille du fichier demeure trop importante?<\/h2><ol><li>Vous essaierez de r\u00e9duire la qualit\u00e9.<\/li><li>Si les art\u00e9facts deviennent g\u00eanants, vous r\u00e9duirez la taille de l'image (dimension en pixels).<\/li><li>Vous rechercherez le meilleur compromis possible pour trouver le bon \u00e9quilibre.<\/li><\/ol>","_links":{"self":[{"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/posts\/10392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/comments?post=10392"}],"version-history":[{"count":24,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/posts\/10392\/revisions"}],"predecessor-version":[{"id":10419,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/posts\/10392\/revisions\/10419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/media\/10389"}],"wp:attachment":[{"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/media?parent=10392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/categories?post=10392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/info.bienvu.ch\/en\/wp-json\/wp\/v2\/tags?post=10392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}