{"id":1852,"date":"2023-01-16T12:05:29","date_gmt":"2023-01-16T12:05:29","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr\/support\/2023\/01\/16\/6466243-hostinger-createur-de-site-web-conception-web-reactive-et-taille-de-l-image\/"},"modified":"2023-01-16T12:05:29","modified_gmt":"2023-01-16T12:05:29","slug":"6466243-hostinger-createur-de-site-web-conception-web-reactive-et-taille-de-l-image","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/fr\/support\/6466243-hostinger-createur-de-site-web-conception-web-reactive-et-taille-de-l-image\/","title":{"rendered":"Hostinger Cr\u00e9ateur de Site Web : Conception Web R\u00e9active et Taille de l&rsquo;Image"},"content":{"rendered":"<p class=\"no-margin\">Tous les mod&egrave;les de sites web disponibles avec <b><a href=\"https:\/\/www.hostinger.fr\/createur-de-sites-internet\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">le Cr&eacute;ateur de sites web Hostinger<\/a><\/b> suivent <b><a href=\"https:\/\/www.hostinger.com\/tutorials\/website-terminology#Responsiveness\" target=\"_blank\" class=\"intercom-content-link\">un design web r&eacute;actif<\/a><\/b> qui garantit la meilleure exp&eacute;rience utilisateur sur tous les appareils. Le responsive web design signifie que le contenu de votre site web <b>s&rsquo;adaptera automatiquement<\/b> &ndash; en s&rsquo;&eacute;tirant ou en se r&eacute;tr&eacute;cissant l&eacute;g&egrave;rement &ndash; <b>en fonction des propri&eacute;t&eacute;s de l&rsquo;appareil du visiteur du site web<\/b> (taille de son &eacute;cran, r&eacute;solution, etc.).<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">En d&rsquo;autres termes, le responsive web design modifie de mani&egrave;re dynamique l&rsquo;apparence d&rsquo;un site web en fonction de l&rsquo;appareil utilis&eacute; pour le consulter. Soyez assur&eacute; que chaque &eacute;l&eacute;ment de votre site Web sera beau pour chaque utilisateur !<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Cela signifie <b>qu&rsquo;il n&rsquo;y a pas un seul ensemble de dimensions pour une taille d&rsquo;image parfaite<\/b>. M&ecirc;me s&rsquo;il n&rsquo;existe pas de taille d&rsquo;image optimale pour les &eacute;l&eacute;ments d&rsquo;image ni pour les images d&rsquo;arri&egrave;re-plan des sections, vous pouvez <b><a href=\"\/fr\/support\/6491230-createur-de-sites-web-comment-redimensionner-les-elements-et-les-sections\" target=\"_blank\" class=\"intercom-content-link\">redimensionner les &eacute;l&eacute;ments et les sections<\/a><\/b> comme vous le souhaitez.<\/p><p class=\"no-margin\">\n<\/p><h1 id=\"h_f131ccee9c\">Notes et conseils<\/h1><ul>\n<li>\n<p class=\"no-margin\">La taille maximale d&rsquo;un fichier image est de <b>15 MB<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Le format de fichier image recommand&eacute; est <b>.webp<\/b>, mais le constructeur prend en charge d&rsquo;autres formats (&agrave; l&rsquo;exception de <b>.heic<\/b>)<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Certains outils d&rsquo;audit SEO v&eacute;rifient le format du fichier image et signalent une image .png ou .jpg parce qu&rsquo;ils s&rsquo;attendent &agrave; des formats modernes tels que <b>.webp <\/b>ou <b>.avif<\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\">Le constructeur ne modifie pas\/convertit les formats d&rsquo;image, mais il <b>compresse les images<\/b>, par exemple l&rsquo;<b><a href=\"https:\/\/assets.zyrosite.com\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">image originale<\/a><\/b> et l&rsquo;<b><a href=\"https:\/\/assets.zyrosite.com\/cdn-cgi\/image\/format=auto,w=282,fit=crop\/YanOrZx36wUk8XVJ\/12123231-Y4LlaDGvaDI4yxOv.jpg\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">image compress&eacute;e<\/a><\/b> ; l&rsquo;image compress&eacute;e a une qualit&eacute; moindre et une &eacute;chelle plus petite, mais d&rsquo;un autre c&ocirc;t&eacute;, l&rsquo;image compress&eacute;e p&egrave;se 5 kB, alors que l&rsquo;image originale p&egrave;se 64 kB, ce qui augmente la vitesse de chargement de la page<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">&Eacute;vitez les images avec des bordures excessives ; par exemple, les images ci-dessus ont des bordures noires redondantes qui augmentent leur largeur : cela affecte la compression, car il est impossible de savoir si les bordures apportent une valeur ou non ; l&rsquo;image enti&egrave;re est donc r&eacute;duite en conservant le rapport d&rsquo;aspect<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">La taille recommand&eacute;e pour l&rsquo;<b><a href=\"\/fr\/support\/6466412-createur-de-sites-web-comment-ajouter-des-images-d-apercu-des-liens\" target=\"_blank\" class=\"intercom-content-link\">image de pr&eacute;visualisation du lien<\/a><\/b> est de <b>1200&times;630 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Le format recommand&eacute; pour le <b><a href=\"\/fr\/support\/6435805-createur-de-sites-web-comment-ajouter-ou-modifier-le-logo\" target=\"_blank\" class=\"intercom-content-link\">logo<\/a><\/b> est<b> .png<\/b> ou<b> .svg<\/b>, car les logos sont g&eacute;n&eacute;ralement transparents<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">La taille recommand&eacute;e pour l&rsquo;<b><a href=\"\/fr\/support\/6811698-createur-de-sites-web-comment-modifier-les-proportions-des-images-des-produits\" target=\"_blank\" class=\"intercom-content-link\">image du produit<\/a><\/b> est de<b> 600&times;600<\/b> ou <b>900&times;900 PX<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">&Eacute;vitez de t&eacute;l&eacute;charger des visuels dont les titres contiennent des espaces ou des caract&egrave;res sp&eacute;ciaux\/non latins<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">&Eacute;vitez d&rsquo;utiliser des GIF, car ils peuvent ralentir la page<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9couvrez comment les visuels sont trait\u00e9s \u00e0 l&rsquo;aide du Cr\u00e9ateur de sites Web Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[256],"tags":[],"class_list":["post-1852","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6466243-hostinger-website-builder-responsive-web-design-and-image-size\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6466243-hostinger-creador-de-sitios-web-diseno-web-adaptable-y-tamano-de-las-imagenes\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6466243-hostinger-createur-de-site-web-conception-web-reactive-et-taille-de-l-image\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6466243-hostinger-website-builder-responsive-web-design-dan-ukuran-gambar\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6466243-svetainiu-kurimo-irankis-hostinger-adaptyvusis-svetaines-dizainas-ir-rekomendacijos-vizualams\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6466243-hostinger-criador-de-sites-design-visual-responsivo-e-tamanho-de-imagem\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts\/1852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/comments?post=1852"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts\/1852\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/media?parent=1852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/categories?post=1852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/tags?post=1852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}