{"id":4898,"date":"2025-02-19T15:42:28","date_gmt":"2025-02-19T20:42:28","guid":{"rendered":"https:\/\/adonato.dectim.ca\/agencetim\/?p=4898"},"modified":"2025-02-19T16:15:11","modified_gmt":"2025-02-19T21:15:11","slug":"optimiser-les-images-pour-un-site-web","status":"publish","type":"post","link":"https:\/\/adonato.dectim.ca\/agencetim\/optimiser-les-images-pour-un-site-web\/","title":{"rendered":"Optimiser les images matricielles pour un site web"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">L&rsquo;optimisation des images pour un site WordPress est essentielle pour garantir une performance optimale et un affichage visuellement harmonieux. Voici les \u00e9tapes cl\u00e9s \u00e0 suivre :<\/h5>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. T\u00e9l\u00e9chargement et stockage des fichiers sources<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Il est crucial de conserver une <strong>version haute r\u00e9solution<\/strong> de chaque image dans un espace de stockage organis\u00e9 (Google Drive, Dropbox, disque dur externe). Cela permet de r\u00e9utiliser ou de modifier les images sans perte de qualit\u00e9 en cas de besoin. <\/li>\n\n\n\n<li>De plus, notez syst\u00e9matiquement la <strong>source<\/strong> de chaque image (site d\u2019origine, auteur, licence) dans un fichier texte ou une feuille de calcul. Cette bonne pratique garantit le respect des droits d\u2019auteur et facilite la gestion des ressources visuelles \u00e0 long terme\u200b.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. D\u00e9termination de la taille d&rsquo;affichage<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avant d&rsquo;ajouter une image \u00e0 votre site, identifiez la taille exacte \u00e0 laquelle elle sera affich\u00e9e. <\/li>\n\n\n\n<li>Examinez le design du site (via les outils de d\u00e9veloppement ou la documentation du th\u00e8me) pour conna\u00eetre les dimensions id\u00e9ales. <\/li>\n\n\n\n<li>Par exemple, une image de banni\u00e8re pleine largeur peut n\u00e9cessiter une r\u00e9solution de <strong>1920&#215;1080 pixels<\/strong>, tandis qu&rsquo;une vignette pourrait suffire en <strong>300&#215;300 pixels<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Choix du format d\u2019image appropri\u00e9<\/strong><\/h3>\n\n\n\n<p>Le format d\u2019image d\u00e9pendra de l\u2019utilisation :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JPEG (.jpg)<\/strong> : Id\u00e9al pour les photos et les images riches en couleurs. Il offre un bon rapport qualit\u00e9\/taille. Choisissez le niveau de compression de l&rsquo;image mais \u00e9vitez de descendre \u00e0 une qualit\u00e9 inf\u00e9rieure \u00e0 60%.<\/li>\n\n\n\n<li><strong>PNG (.png)<\/strong> : Format sans compression avec transparence, id\u00e9al pour les logos, ic\u00f4nes et photos d\u00e9tour\u00e9es.<\/li>\n\n\n\n<li><strong>GIF (.gif)<\/strong> : Adapt\u00e9 aux images anim\u00e9es, mais limit\u00e9 en qualit\u00e9. Avec transparence.<\/li>\n\n\n\n<li><strong>WebP (.webp)<\/strong> : Format moderne offrant une excellente compression sans perte de qualit\u00e9 visible, recommand\u00e9 pour WordPress.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Recadrage de l\u2019image et ajustement de la taille<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Une fois la taille d\u00e9finie (en pixels), utilisez un logiciel comme <strong>Photoshop, GIMP ou Figma <\/strong>pour recadrer l\u2019image en respectant le ratio d&rsquo;origine, en \u00e9vitant \u00e0 tout prix de d\u00e9former (squisshh) l&rsquo;image.<\/li>\n\n\n\n<li>Assurez-vous de centrer les \u00e9l\u00e9ments importants de l\u2019image pour une composition \u00e9quilibr\u00e9e.<\/li>\n\n\n\n<li>Ajuster la taille finale d\u00e9sir\u00e9e en pixels<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Exportation de la version finale optimis\u00e9e<\/strong> pour le web<\/h3>\n\n\n\n<p>Avant de t\u00e9l\u00e9verser l\u2019image sur WordPress, optimisez-la pour r\u00e9duire sa taille sans sacrifier la qualit\u00e9. Utilisez des outils comme :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Photoshop<\/strong>: Option \u00ab\u00a0Exporter sous\u00a0\u00bb  ou \u00ab\u00a0Exporter pour le web\u00a0\u00bb en choisissant le format et le taux de compression.\n<ul class=\"wp-block-list\">\n<li><strong>Attention, pour le format WEBP<\/strong>, vous devez d&rsquo;abord convertir votre image en 8bits et utiliser la fonction \u00ab\u00a0Sauvegarder sous\u00a0\u00bb<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Gimp<\/strong> (logiciel desktop gratuit \u00e0 installer sur votre ordinateur presqu&rsquo;aussi puissant que Photoshop): Permet d&rsquo;exporter dans tous les formats, incluant WEBP<\/li>\n\n\n\n<li><strong>Figma<\/strong>: fonction EXPORT, avec r\u00e9glages de format (png ou jpg). \n<ul class=\"wp-block-list\">\n<li><strong>Attention, pour exporter au format WEBP<\/strong>, utiliser le plugin WebP Exporter.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/squoosh.app\/\">Application web Squoosh<\/a><\/strong> (<a href=\"https:\/\/squoosh.app\/\">en ligne<\/a>) : permet d&rsquo;exporter au format PNG, JPG et WEBP<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;optimisation des images pour un site WordPress est essentielle pour garantir une performance optimale et un affichage visuellement harmonieux. Voici [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4899,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-objectif-dapprentissage-4-assembler-integrer-et-programmer-linteractivite-dune-presentation-multimedia"],"_links":{"self":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/comments?post=4898"}],"version-history":[{"count":7,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4898\/revisions"}],"predecessor-version":[{"id":4909,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/posts\/4898\/revisions\/4909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/media\/4899"}],"wp:attachment":[{"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/media?parent=4898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/categories?post=4898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adonato.dectim.ca\/agencetim\/wp-json\/wp\/v2\/tags?post=4898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}