{"id":123634,"date":"2025-03-03T08:20:27","date_gmt":"2025-03-03T06:20:27","guid":{"rendered":"https:\/\/elementor.com\/blog\/comment-redimensionner-une-image-en-css-et-html\/"},"modified":"2025-12-17T17:03:07","modified_gmt":"2025-12-17T15:03:07","slug":"comment-redimensionner-une-image-en-css-et-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/","title":{"rendered":"Comment redimensionner une image en CSS et HTML"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

C’est l\u00e0 qu’intervient le redimensionnement d’images en CSS. Avec CSS<\/a> (Cascading Style Sheets), vous disposez d’outils puissants pour contr\u00f4ler l’apparence des images sur votre site web, en veillant \u00e0 ce qu’elles soient pr\u00e9sent\u00e9es de mani\u00e8re optimale sans compromettre les temps de chargement des pages.<\/span><\/p>\n

Ce guide vous fournira tout ce dont vous avez besoin pour ma\u00eetriser le redimensionnement d’images en CSS comme un professionnel. Que vous construisiez un blog personnel, une boutique en ligne \u00e9l\u00e9gante ou une application web complexe, vous apprendrez comment faire briller vos images. <\/span><\/p>\n

Comprendre les fondamentaux du redimensionnement d’images <\/span><\/h2>\n

Dimensions et r\u00e9solution des images<\/span><\/h3>\n

Avant d’explorer les techniques CSS, commen\u00e7ons par comprendre les concepts fondamentaux des dimensions et de la r\u00e9solution des images.<\/span><\/p>\n

    \n
  • Pixels :<\/b> Les images sur le web sont compos\u00e9es de minuscules carr\u00e9s appel\u00e9s pixels. Chaque pixel contient des informations de couleur. Plus une image contient de pixels, plus sa r\u00e9solution est \u00e9lev\u00e9e et plus elle peut afficher de d\u00e9tails.<\/span><\/li>\n
  • Dimensions de l’image :<\/b> Les dimensions des images sont exprim\u00e9es en largeur et en hauteur, mesur\u00e9es en pixels (par exemple, 1200px x 800px). Ces dimensions d\u00e9terminent l’espace physique qu’une image occupe sur une page web.<\/span><\/li>\n
  • Ratio d’aspect :<\/b> Le rapport d’aspect est la relation proportionnelle entre la largeur et la hauteur d’une image (par exemple, 16:9, 4:3). Maintenir le rapport d’aspect est crucial lors du redimensionnement des images pour \u00e9viter la distorsion.<\/span><\/li>\n<\/ul>\n

    Formats de fichiers d’images<\/span><\/h3>\n

    Le web prend en charge divers formats de fichiers d’images, chacun ayant ses points forts et ses cas d’utilisation id\u00e9aux. Explorons bri\u00e8vement les plus courants que vous rencontrerez :<\/span><\/p>\n

      \n
    1. JPEG (JPG) :<\/b> Ce format est optimal pour les photographies et les images avec des couleurs et des d\u00e9grad\u00e9s complexes. Il prend en charge une compression ajustable pour \u00e9quilibrer la qualit\u00e9 et la taille du fichier.<\/span><\/li>\n
    2. PNG : <\/b>est id\u00e9al pour les logos, les graphiques et les images n\u00e9cessitant de la transparence. Il prend en charge la compression sans perte (sans perte de qualit\u00e9).<\/span><\/li>\n
    3. GIF :<\/b> Principalement utilis\u00e9 pour les animations simples et les graphiques. Palette de couleurs limit\u00e9e.<\/span><\/li>\n
    4. SVG : <\/b>est un format vectoriel parfait pour les logos, les ic\u00f4nes et les illustrations. Il est infiniment redimensionnable sans perte de qualit\u00e9.<\/span><\/li>\n<\/ol>\n

      Comprendre ces formats de fichiers est important car le choix du bon format peut avoir un impact significatif sur la taille de vos images web et leurs temps de chargement. Et n’oubliez pas, GenericProductName prend en charge de mani\u00e8re transparente tous ces types de fichiers, vous permettant d’utiliser l’image parfaite pour chaque situation sur votre site web.<\/span><\/p>\n

      Impact sur les performances web<\/span><\/h3>\n

      Pourquoi toute cette discussion sur les pixels, les formats d’image et le redimensionnement est-elle importante ? Cela se r\u00e9sume aux performances web. Les images volumineuses et non optimis\u00e9es sont un coupable majeur des sites web lents. Voici pourquoi:<\/span><\/p>\n

        \n
      • Consommation de bande passante :<\/b> Les fichiers d’images volumineux n\u00e9cessitent le transfert de plus de donn\u00e9es du serveur au navigateur du visiteur, consommant une pr\u00e9cieuse bande passante.<\/span><\/li>\n
      • Augmentation des temps de chargement :<\/b> Le navigateur a besoin de temps pour t\u00e9l\u00e9charger et traiter les fichiers d’images volumineux, retardant l’affichage de la page enti\u00e8re et conduisant \u00e0 une exp\u00e9rience utilisateur frustrante.<\/span><\/li>\n
      • Impact n\u00e9gatif sur le r\u00e9f\u00e9rencement :<\/b> Les moteurs de recherche comme Google consid\u00e8rent la vitesse du site comme un facteur de classement. Les sites web lents peuvent \u00eatre p\u00e9nalis\u00e9s dans les r\u00e9sultats de recherche.<\/span><\/li>\n
      • Mauvaise exp\u00e9rience utilisateur (UX) :<\/b> Les images non optimis\u00e9es, en particulier sur les appareils mobiles avec des connexions plus lentes, peuvent ruiner l’exp\u00e9rience utilisateur et amener les visiteurs \u00e0 abandonner votre site web avant qu’il ne se charge compl\u00e8tement.<\/span><\/li>\n<\/ul>\n

        C’est pourquoi le redimensionnement d’images, ainsi que d’autres techniques d’optimisation, est une pierre angulaire de la construction de sites web rapides et attrayants, en particulier si vous pr\u00e9voyez d’offrir une exp\u00e9rience visuellement riche !<\/span><\/p>\n

        Techniques CSS pour redimensionner les images<\/span><\/h2>\n

        Propri\u00e9t\u00e9s width et height<\/span><\/h3>\n

        La m\u00e9thode la plus fondamentale pour redimensionner les images en CSS consiste \u00e0 utiliser les propri\u00e9t\u00e9s <\/span>width<\/span> et <\/span>height<\/span> . Vous pouvez contr\u00f4ler directement la taille d’affichage d’une image en d\u00e9finissant ces propri\u00e9t\u00e9s avec diverses valeurs :<\/span><\/p>\n

          \n
        1. Pixels (px) :<\/b> Cela offre le contr\u00f4le le plus pr\u00e9cis sur les dimensions de l’image (par exemple, width: 300px; height: 200px).<\/span><\/li>\n
        2. Pourcentages (%) :<\/ci> Cela rend les images adaptatives en leur permettant de se redimensionner par rapport \u00e0 leur conteneur parent (par exemple, largeur : 50 % ; hauteur : auto, pour qu’une image occupe la moiti\u00e9 de la largeur de son conteneur).<\/ci><\/li>\n<\/ol>\n

          Exemple de code<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\n\t\t\t\t\tHTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 400px; height: 300px;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23408f6 elementor-widget elementor-widget-text-editor\" data-id=\"23408f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Remarque importante :<\/ci><ci id=\"gid_1\"> Il convient toujours de prendre en consid\u00e9ration la conception adaptative lors de l&rsquo;utilisation de <\/ci><ci id=\"gid_2\">width<\/ci><ci id=\"gid_3\"> et <\/ci><ci id=\"gid_4\">height<\/ci><span style=\"font-weight: 400;\">. Avec Elementor, vous disposez de contr\u00f4les visuels intuitifs pour ajuster les tailles d&rsquo;images sur diff\u00e9rentes tailles d&rsquo;\u00e9cran, garantissant ainsi que vos images apparaissent parfaitement sur n&rsquo;importe quel appareil.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propri\u00e9t\u00e9s max-width et max-height<\/span><\/h3>\n<p><ci id=\"gid_0\">Alors que <\/ci><ci id=\"gid_1\">width<\/ci><ci id=\"gid_2\"> et <\/ci><ci id=\"gid_3\">height<\/ci><ci id=\"gid_4\"> d\u00e9finissent des dimensions explicites, les propri\u00e9t\u00e9s <\/ci><ci id=\"gid_5\">max-width<\/ci><ci id=\"gid_6\"> et <\/ci><ci id=\"gid_7\">max-height<\/ci><ci id=\"gid_8\"> sont incroyablement utiles pour d\u00e9finir des limites de taille tout en conservant l&rsquo;adaptativit\u00e9.<\/ci><\/p>\n<p><span style=\"font-weight: 400;\">Voici comment ils fonctionnent :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">max-width :<\/ci><ci id=\"gid_1\"> Emp\u00eache une image de d\u00e9passer une largeur sp\u00e9cifi\u00e9e, lui permettant de se r\u00e9duire si n\u00e9cessaire (par exemple, <\/ci><ci id=\"gid_2\">max-width: 100%;<\/ci><ci id=\"gid_3\"> garantit que l&rsquo;image n&rsquo;occupe jamais plus de 100 % de la largeur de son conteneur).<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">max-height :<\/ci><ci id=\"gid_1\"> Fonctionne de mani\u00e8re similaire, limitant la hauteur d&rsquo;une image (par exemple, <\/ci><ci id=\"gid_2\">max-height: 400px;<\/ci><ci id=\"gid_3\"> emp\u00eacherait l&rsquo;image de d\u00e9passer 400 pixels en hauteur).<\/ci><\/li>\n<\/ul>\n<p><b>Pourquoi les utiliser ?<\/b><span style=\"font-weight: 400;\"> Elles constituent un outil essentiel pour emp\u00eacher les images de sortir de leurs conteneurs et de perturber votre mise en page, en particulier dans les conceptions adaptatives.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Exemple de code<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13b72f0 elementor-widget elementor-widget-code-highlight\" data-id=\"13b72f0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"max-width: 100%; height: auto;\"> \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd04060 elementor-widget elementor-widget-text-editor\" data-id=\"dd04060\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Conseil d&rsquo;expert :<\/ci><ci id=\"gid_1\"> Souvent, d\u00e9finir <\/ci><ci id=\"gid_2\">max-width: 100%;<\/ci><ci id=\"gid_3\"> avec <\/ci><ci id=\"gid_4\">height: auto;<\/ci><ci id=\"gid_5\"> est votre meilleure option pour le redimensionnement adaptatif des images, mais nous explorerons les raisons de cela dans la sous-rubrique suivante !<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Pr\u00e9server le rapport d&rsquo;aspect avec &lsquo;auto&rsquo;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vous vous souvenez de ces rapports d&rsquo;aspect dont nous avons discut\u00e9 pr\u00e9c\u00e9demment ? Les maintenir lors du redimensionnement est crucial pour \u00e9viter que vos images n&rsquo;apparaissent compress\u00e9es, \u00e9tir\u00e9es ou d\u00e9form\u00e9es. C&rsquo;est ici que la valeur <\/span><ci id=\"gid_0\">auto<\/ci><ci id=\"gid_1\"> vient \u00e0 la rescousse :<\/ci><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">D\u00e9finir une dimension, l&rsquo;autre &lsquo;auto&rsquo; :<\/ci><ci id=\"gid_1\"> Lorsque vous d\u00e9finissez soit <\/ci><ci id=\"gid_2\">width<\/ci><ci id=\"gid_3\"> soit <\/ci><ci id=\"gid_4\">height<\/ci><ci id=\"gid_5\"> \u00e0 une valeur sp\u00e9cifique (pixels ou pourcentage) et la dimension oppos\u00e9e \u00e0 <\/ci><ci id=\"gid_6\">auto<\/ci><ci id=\"gid_7\">, le navigateur calcule automatiquement la dimension manquante pour pr\u00e9server le rapport d&rsquo;aspect.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Pourquoi c&rsquo;est important<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Int\u00e9grit\u00e9 visuelle :<\/ci><ci id=\"gid_1\"> Garantit que vos images apparaissent au mieux et comme pr\u00e9vu.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Harmonie de la mise en page :<\/ci><ci id=\"gid_1\"> Emp\u00eache les images de perturber la conception de votre site web.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Professionnalisme :<\/ci><ci id=\"gid_1\"> Des images d\u00e9form\u00e9es peuvent donner une impression non professionnelle.<\/ci><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Exemple de code<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9a0b08 elementor-widget elementor-widget-code-highlight\" data-id=\"c9a0b08\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 100%; height: auto;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e1ee92 elementor-widget elementor-widget-text-editor\" data-id=\"1e1ee92\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">Astuce Elementor :<\/ci><ci id=\"gid_1\"> L&rsquo;\u00e9diteur visuel d&rsquo;Elementor facilite incroyablement le redimensionnement des images tout en maintenant automatiquement les rapports d&rsquo;aspect, vous offrant un \u00e9quilibre parfait entre contr\u00f4le et commodit\u00e9.<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Images d&rsquo;arri\u00e8re-plan et background-size<\/span><\/h3>\n<p><ci id=\"gid_0\">Au lieu d&rsquo;utiliser la balise <\/ci><ci id=\"gid_1\"><cx id=\"gid_2\"><\/cx>img<cx id=\"gid_3\"><\/cx><\/ci><span style=\"font-weight: 400;\"> , CSS vous permet de d\u00e9finir des images comme arri\u00e8re-plan de divers \u00e9l\u00e9ments. Cela d\u00e9verrouille des possibilit\u00e9s de conception cr\u00e9atives et des techniques de redimensionnement puissantes en utilisant la propri\u00e9t\u00e9 <\/span><ci id=\"gid_0\">background-size<\/ci><ci id=\"gid_1\">.<\/ci><\/p>\n<p><ci id=\"gid_0\">Voici les valeurs cl\u00e9s pour <\/ci><ci id=\"gid_1\">background-size<\/ci><ci id=\"gid_2\"> :<\/ci><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image est mise \u00e0 l&rsquo;\u00e9chelle pour s&rsquo;adapter enti\u00e8rement dans le conteneur tout en maintenant son rapport d&rsquo;aspect. Certaines zones de l&rsquo;arri\u00e8re-plan peuvent rester vides si le rapport d&rsquo;aspect de l&rsquo;image ne correspond pas \u00e0 celui du conteneur.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image est mise \u00e0 l&rsquo;\u00e9chelle pour couvrir enti\u00e8rement le conteneur tout en maintenant son rapport d&rsquo;aspect. Cela peut entra\u00eener le recadrage de certaines parties de l&rsquo;image si les rapports d&rsquo;aspect ne s&rsquo;alignent pas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">100% 100% :<\/ci><ci id=\"gid_1\"> Force l&rsquo;image \u00e0 s&rsquo;\u00e9tirer pour remplir toute la largeur et la hauteur du conteneur, d\u00e9formant potentiellement le rapport d&rsquo;aspect.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Valeurs personnalis\u00e9es :<\/ci><ci id=\"gid_1\"> Vous pouvez \u00e9galement d\u00e9finir des valeurs sp\u00e9cifiques en pixels ou en pourcentage pour <\/ci><ci id=\"gid_2\">background size (par exemple, background-size: 500px 300px)<\/ci><ci id=\"gid_3\">.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemple de code<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90bf6ea elementor-widget elementor-widget-code-highlight\" data-id=\"90bf6ea\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.my-element {\r\n  background-image: url(\"my-image.jpg\");\r\n  background-size: cover; \r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9b8899 elementor-widget elementor-widget-text-editor\" data-id=\"a9b8899\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Cas d&rsquo;Utilisation<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Sections h\u00e9ros :<\/ci><ci id=\"gid_1\"> Cr\u00e9ez des zones h\u00e9ros visuellement saisissantes avec de grandes images d&rsquo;arri\u00e8re-plan.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Superpositions de texte :<\/ci><ci id=\"gid_1\"> Combinez des images d&rsquo;arri\u00e8re-plan avec du texte pour des effets engageants.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Motifs :<\/ci><ci id=\"gid_1\"> Utilisez de petites images r\u00e9p\u00e9titives pour cr\u00e9er des motifs d&rsquo;arri\u00e8re-plan int\u00e9ressants.<\/ci><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Propri\u00e9t\u00e9 object-fit<\/span><\/h3>\n<p><ci id=\"gid_0\">La propri\u00e9t\u00e9 <\/ci><ci id=\"gid_1\">object-fit<\/ci><span style=\"font-weight: 400;\"> La propri\u00e9t\u00e9 object-fit offre un contr\u00f4le pr\u00e9cis sur la mani\u00e8re dont une image (ou une vid\u00e9o) s&rsquo;adapte \u00e0 l&rsquo;int\u00e9rieur de sa bo\u00eete de contenu. Consid\u00e9rez-la comme l&rsquo;\u00e9quivalent CSS des <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> et <\/span><span style=\"font-weight: 400;\">cover<\/span><span style=\"font-weight: 400;\"> concepts que nous avons explor\u00e9s avec <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">, mais avec encore plus d&rsquo;options :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fill :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image s&rsquo;\u00e9tire (potentiellement en se d\u00e9formant) pour remplir enti\u00e8rement la bo\u00eete de contenu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image est redimensionn\u00e9e pour s&rsquo;adapter enti\u00e8rement \u00e0 l&rsquo;int\u00e9rieur de la bo\u00eete de contenu, en conservant son rapport d&rsquo;aspect (similaire \u00e0 <\/span><span style=\"font-weight: 400;\">background-size: contain<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image est redimensionn\u00e9e pour couvrir l&rsquo;int\u00e9gralit\u00e9 de la bo\u00eete de contenu tout en pr\u00e9servant son rapport d&rsquo;aspect, potentiellement en recadrant certaines parties de l&rsquo;image (similaire \u00e0 <\/span><span style=\"font-weight: 400;\">background-size: cover<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>none :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image s&rsquo;affiche dans sa taille d&rsquo;origine, sans redimensionnement.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale-down :<\/b><span style=\"font-weight: 400;\"> L&rsquo;image choisit entre <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> et <\/span><span style=\"font-weight: 400;\">none<\/span><span style=\"font-weight: 400;\"> en fonction de la taille de l&rsquo;image par rapport \u00e0 celle de la bo\u00eete de contenu.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemple de code<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f13963 elementor-widget elementor-widget-code-highlight\" data-id=\"8f13963\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3e025 elementor-widget elementor-widget-text-editor\" data-id=\"fc3e025\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Comparaisons visuelles :<\/b><span style=\"font-weight: 400;\"> Il est souvent pr\u00e9f\u00e9rable de voir les diff\u00e9rentes valeurs de <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  en action pour bien saisir leurs diff\u00e9rences. Envisagez d&rsquo;inclure un ensemble d&rsquo;exemples d&rsquo;images d\u00e9montrant chaque valeur dans cette section de l&rsquo;article.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Quand utiliser object-fit<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Images de produits :<\/b><span style=\"font-weight: 400;\"> Assurer un affichage coh\u00e9rent des photos de produits dans des conteneurs de taille fixe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vignettes :<\/b><span style=\"font-weight: 400;\"> Cr\u00e9er des galeries de vignettes uniformes o\u00f9 les rapports d&rsquo;aspect peuvent varier.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contenu t\u00e9l\u00e9charg\u00e9 par l&rsquo;utilisateur :<\/b><span style=\"font-weight: 400;\"> Contr\u00f4ler l&rsquo;affichage d&rsquo;images de tailles potentiellement impr\u00e9visibles.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Redimensionnement d&rsquo;image r\u00e9actif <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Requ\u00eates M\u00e9dia<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les requ\u00eates m\u00e9dia sont la pierre angulaire de la conception web r\u00e9active. Elles vous permettent d&rsquo;appliquer diff\u00e9rents styles CSS en fonction de conditions sp\u00e9cifiques, telles que la taille de l&rsquo;\u00e9cran ou l&rsquo;orientation de l&rsquo;appareil du navigateur du visiteur.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Syntaxe de base des requ\u00eates m\u00e9dia<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd8e6a6 elementor-widget elementor-widget-code-highlight\" data-id=\"dd8e6a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\n\n@media (min-width: 768px) {\n\n\u00a0\u00a0\/* CSS styles for screens 768px or wider *\/\n\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c89ad42 elementor-widget elementor-widget-text-editor\" data-id=\"c89ad42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Points de rupture :<\/b><span style=\"font-weight: 400;\"> Les <\/span><span style=\"font-weight: 400;\">min-width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\">, etc., dans les requ\u00eates m\u00e9dia, d\u00e9finissent les points de rupture o\u00f9 votre design change. Les points de rupture courants ciblent les tablettes, les t\u00e9l\u00e9phones mobiles et les ordinateurs de bureau plus grands.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Requ\u00eates m\u00e9dia pour les images<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Vous pouvez utiliser des requ\u00eates m\u00e9dia pour redimensionner diff\u00e9remment les images selon les tailles d&rsquo;\u00e9cran :<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c475496 elementor-widget elementor-widget-code-highlight\" data-id=\"c475496\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-560d7f7 elementor-widget elementor-widget-text-editor\" data-id=\"560d7f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Explication :<\/b><span style=\"font-weight: 400;\"> Dans cet exemple, les images occuperont toute la largeur du conteneur sur les petits \u00e9crans, puis se r\u00e9duiront \u00e0 50% de la largeur du conteneur sur les \u00e9crans plus larges que 768px.<\/span><\/p>\n<p><b>Conseil important :<\/b><span style=\"font-weight: 400;\">  Pensez toujours d&rsquo;abord au mobile ! Commencez par concevoir pour les petits \u00e9crans, puis utilisez des requ\u00eates m\u00e9dia pour am\u00e9liorer progressivement la mise en page pour les \u00e9crans plus grands.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Techniques de redimensionnement fluide<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bien que les requ\u00eates m\u00e9dia vous donnent beaucoup de contr\u00f4le, parfois vous voulez que les images se redimensionnent de mani\u00e8re fluide et proportionnelle sur toutes les tailles d&rsquo;\u00e9cran, pas seulement \u00e0 des points de rupture sp\u00e9cifiques. Voici quelques fa\u00e7ons d&rsquo;y parvenir :<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Max-width: 100% et Height: auto (revisit\u00e9) :<\/b><span style=\"font-weight: 400;\">  Si vous vous souvenez, nous avons introduit cette technique plus t\u00f4t. Sa v\u00e9ritable puissance r\u00e9side dans sa r\u00e9activit\u00e9 automatique &#8211; les images ne d\u00e9passeront jamais la largeur de leur conteneur, et leur hauteur s&rsquo;ajustera proportionnellement.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Combinaison de pourcentages avec des requ\u00eates m\u00e9dia :<\/b><span style=\"font-weight: 400;\">  Vous pouvez utiliser des pourcentages pour la largeur dans les requ\u00eates m\u00e9dia afin de cr\u00e9er des mises en page fluides avec des ajustements cibl\u00e9s. Par exemple :<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-478ee4c elementor-widget elementor-widget-code-highlight\" data-id=\"478ee4c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg { \r\n  width: 100%; \r\n  height: auto;  \r\n}\r\n@media (min-width: 768px) {\r\n  img {\r\n    width: 50%;  \/* Images occupy 50% of their container on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc19d3d elementor-widget elementor-widget-text-editor\" data-id=\"fc19d3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le redimensionnement fluide n&rsquo;est pas toujours la solution parfaite. Parfois, les images avec des dimensions fixes fonctionnent mieux dans certains \u00e9l\u00e9ments de design sp\u00e9cifiques. Il est essentiel de choisir strat\u00e9giquement les bonnes techniques de redimensionnement en fonction de votre mise en page globale.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">L&rsquo;attribut &lsquo;srcset&rsquo;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">L&rsquo;attribut <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\">, utilis\u00e9 avec la balise <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> , offre un moyen de proposer au navigateur plusieurs versions de la m\u00eame image \u00e0 diff\u00e9rentes r\u00e9solutions. Cela permet au navigateur de s\u00e9lectionner l&rsquo;image la plus appropri\u00e9e en fonction de l&rsquo;appareil et de la taille d&rsquo;\u00e9cran de l&rsquo;utilisateur.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Syntaxe de base<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2825604 elementor-widget elementor-widget-code-highlight\" data-id=\"2825604\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\"\r\n     srcset=\"my-image-small.jpg 480w, \r\n             my-image-medium.jpg 800w, \r\n             my-image-large.jpg 1200w\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44082ef elementor-widget elementor-widget-text-editor\" data-id=\"44082ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Le descripteur &lsquo;w&rsquo; :<\/b><span style=\"font-weight: 400;\"> Indique au navigateur la largeur de chaque version de l&rsquo;image.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Avantages<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Performance am\u00e9lior\u00e9e en \u00e9vitant les t\u00e9l\u00e9chargements d&rsquo;images inutilement volumineux.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Affichage optimis\u00e9 pour les \u00e9crans haute r\u00e9solution.<\/span><\/li>\n<\/ol>\n<p><ci id=\"gid_0\">Remarque :<\/ci> <ci id=\"gid_1\">srcset<\/ci><ci id=\"gid_2\"> est un outil puissant pour l&rsquo;optimisation avanc\u00e9e des images r\u00e9actives, souvent utilis\u00e9 en combinaison avec d&rsquo;autres techniques que nous avons abord\u00e9es.<\/ci><\/p>\n<h2><span style=\"font-weight: 400;\">Optimisation et meilleures pratiques <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Outils d&rsquo;optimisation d&rsquo;image<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bien que vous puissiez redimensionner manuellement les images \u00e0 l&rsquo;aide de logiciels d&rsquo;\u00e9dition d&rsquo;images, des outils d&rsquo;optimisation d\u00e9di\u00e9s rationalisent le processus et permettent d&rsquo;obtenir des gains de performance suppl\u00e9mentaires :<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">L&rsquo;optimiseur d&rsquo;images d&rsquo;Elementor : <\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Cet outil puissant est parfaitement int\u00e9gr\u00e9 \u00e0 l&rsquo;exp\u00e9rience Elementor et simplifie l&rsquo;optimisation des images dans votre flux de travail WordPress.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Consid\u00e9rations cl\u00e9s<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Compression avec perte vs sans perte :<\/b><span style=\"font-weight: 400;\"> La compression avec perte offre une r\u00e9duction plus importante de la taille du fichier, mais au d\u00e9triment d&rsquo;une certaine perte de qualit\u00e9 de l&rsquo;image. La compression sans perte pr\u00e9serve la qualit\u00e9 int\u00e9grale au prix de fichiers l\u00e9g\u00e8rement plus volumineux. Choisissez judicieusement en fonction du type d&rsquo;image.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Format d&rsquo;image (Revu) :<\/b><span style=\"font-weight: 400;\"> Rappelez-vous que les JPEG sont g\u00e9n\u00e9ralement pr\u00e9f\u00e9rables pour les photos, tandis que les PNG excellent pour les graphiques. Le choix du bon format avant l&rsquo;optimisation est essentiel !<\/span><\/li>\n<\/ol>\n<p><ci id=\"gid_0\">Conseil d&rsquo;expert :<\/ci><ci id=\"gid_1\"> Souvent, l&rsquo;utilisation combin\u00e9e de l&rsquo;optimiseur d&rsquo;images Elementor pour le traitement principal des images et d&rsquo;un service externe sp\u00e9cialis\u00e9 pour des besoins sp\u00e9cifiques vous offre la plus grande flexibilit\u00e9 et les meilleurs r\u00e9sultats.<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Propri\u00e9t\u00e9 image-rendering<\/span><\/h3>\n<p><ci id=\"gid_0\">La propri\u00e9t\u00e9 <\/ci><ci id=\"gid_1\">image-rendering<\/ci><span style=\"font-weight: 400;\">  fournit des indications au navigateur sur la mani\u00e8re dont il doit prioriser le rendu lorsqu&rsquo;une image est agrandie ou r\u00e9duite. Voici les valeurs courantes :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>auto :<\/b><span style=\"font-weight: 400;\">  Le param\u00e8tre par d\u00e9faut du navigateur. Il tente g\u00e9n\u00e9ralement de trouver un \u00e9quilibre entre la vitesse et la qualit\u00e9.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">pixelated :<\/ci><ci id=\"gid_1\"> Maintient un aspect net et pix\u00e9lis\u00e9, id\u00e9al pour les graphiques de style r\u00e9tro ou lorsqu&rsquo;on souhaite intentionnellement pr\u00e9server des bords de pixels durs lors de l&rsquo;agrandissement.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">smooth :<\/ci><ci id=\"gid_1\"> Privil\u00e9gie un aspect plus lisse et moins pix\u00e9lis\u00e9 (cela peut introduire un flou lors de l&rsquo;agrandissement des images).<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemple<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16d5c62 elementor-widget elementor-widget-code-highlight\" data-id=\"16d5c62\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  image-rendering: pixelated; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78f3c46 elementor-widget elementor-widget-text-editor\" data-id=\"78f3c46\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Quand l&rsquo;utiliser<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Art pixel :<\/ci> <ci id=\"gid_1\">pixelated<\/ci><ci id=\"gid_2\"> est essentiel pour l&rsquo;art pixel afin de conserver son esth\u00e9tique voulue.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Consid\u00e9rations de performance :<\/ci><ci id=\"gid_1\"> Dans certains cas, le choix de <\/ci><ci id=\"gid_2\">pixelated<\/ci><ci id=\"gid_3\"> peut offrir de l\u00e9g\u00e8res am\u00e9liorations de la vitesse de rendu pour les images agrandies.<\/ci><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Les navigateurs modernes sont assez performants en mati\u00e8re de rendu automatique des images. Utilisez <\/span><ci id=\"gid_0\">image rendering<\/ci><ci id=\"gid_1\"> de mani\u00e8re strat\u00e9gique, car la modification des param\u00e8tres par d\u00e9faut peut parfois avoir des cons\u00e9quences impr\u00e9vues.<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Consid\u00e9rations de redimensionnement pour des types d&rsquo;images sp\u00e9cifiques<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Examinons les \u00e9l\u00e9ments cl\u00e9s \u00e0 garder \u00e0 l&rsquo;esprit lors du redimensionnement de certains des types d&rsquo;images les plus courants que vous rencontrerez sur les sites web :<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Images de h\u00e9ros<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Les images de grande taille attirant l&rsquo;attention doivent \u00eatre superbes \u00e0 toutes les dimensions.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">L&rsquo;optimisation de la taille des fichiers est cruciale (envisagez des formats comme WebP s&rsquo;ils sont pris en charge).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Utilisez des requ\u00eates m\u00e9dia ou <\/ci><ci id=\"gid_1\">srcset<\/ci><ci id=\"gid_2\"> pour garantir une r\u00e9solution optimale pour diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Galeries d&rsquo;images<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Utilisez des vignettes qui se chargent rapidement, en les liant \u00e0 des versions optimis\u00e9es en pleine taille.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mettez en \u0153uvre des techniques telles que le chargement paresseux pour des exp\u00e9riences de chargement d&rsquo;images fluides.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Des ratios d&rsquo;aspect coh\u00e9rents entre les images de la galerie cr\u00e9ent un aspect soign\u00e9.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Images de produits (commerce \u00e9lectronique)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Des images de haute qualit\u00e9 sont essentielles pour favoriser les conversions.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Une fonctionnalit\u00e9 de zoom peut \u00eatre n\u00e9cessaire, exigeant des tailles d&rsquo;images plus importantes.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Un redimensionnement coh\u00e9rent et des espaces blancs cr\u00e9ent un catalogue de produits \u00e9pur\u00e9.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Envisagez d&rsquo;utiliser un <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cdn\/\"   title=\"What Is A CDN (Content Delivery Network)?\u00a02025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20372\">CDN<\/a> (comme Cloudflare Enterprise inclus avec l&rsquo;h\u00e9bergement Elementor) pour une diffusion rapide des images dans le monde entier.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Contenu t\u00e9l\u00e9charg\u00e9 par l&rsquo;utilisateur<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mettez en place des contr\u00f4les de validit\u00e9 c\u00f4t\u00e9 serveur pour limiter les dimensions et les tailles de fichiers des images.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Optimisation automatique pour emp\u00eacher le t\u00e9l\u00e9chargement d&rsquo;images massives et non optimis\u00e9es.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Affichez des directives claires aux utilisateurs concernant les formats d&rsquo;images accept\u00e9s et les contraintes de taille.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Compatibilit\u00e9 des navigateurs<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bien que les navigateurs modernes offrent une excellente support pour la plupart des techniques de redimensionnement d&rsquo;images CSS, il est essentiel d&rsquo;\u00eatre conscient des incoh\u00e9rences potentielles et de la mani\u00e8re de les r\u00e9soudre.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Navigateurs plus anciens<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Il se peut qu&rsquo;ils <\/ci><ci id=\"gid_1\">ne support pas les fonctionnalit\u00e9s plus r\u00e9centes comme <\/ci><ci id=\"gid_2\">object-fit<\/ci><ci id=\"gid_3\"> ou le comportement avanc\u00e9 de <\/ci><ci id=\"gid_4\">background-size<\/ci><ci id=\"gid_5\">.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Des polyfills<\/ci><ci id=\"gid_1\"> ou des solutions de repli peuvent \u00eatre n\u00e9cessaires pour fournir une exp\u00e9rience coh\u00e9rente sur les navigateurs plus anciens (si leur prise en charge est une exigence).<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Pr\u00e9fixes sp\u00e9cifiques aux fournisseurs<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Occasionnellement<\/ci><ci id=\"gid_1\">, les fonctionnalit\u00e9s CSS exp\u00e9rimentales n\u00e9cessitent des pr\u00e9fixes de fournisseur (par exemple, <\/ci><ci id=\"gid_2\">-webkit-<\/ci><ci id=\"gid_3\">, <\/ci><ci id=\"gid_4\">-moz-<\/ci><ci id=\"gid_5\">) pour assurer la plus large compatibilit\u00e9 jusqu&rsquo;\u00e0 ce qu&rsquo;elles soient pleinement standardis\u00e9es.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Test<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Minutieusement<\/ci><ci id=\"gid_1\"> testez l&rsquo;affichage des images de votre site web sur diff\u00e9rents navigateurs et appareils.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Des outils<\/ci><ci id=\"gid_1\"> tels que BrowserStack facilitent les tests inter-navigateurs.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Am\u00e9lioration progressive<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Commencez<\/ci><ci id=\"gid_1\"> par une exp\u00e9rience de base solide qui fonctionne partout.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Utilisez <\/ci><ci id=\"gid_1\">des techniques telles que la d\u00e9tection de fonctionnalit\u00e9s pour ajouter des fonctions avanc\u00e9es de redimensionnement d&rsquo;images pour les navigateurs qui support.<\/ci><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Avec Elementor, bon nombre de ces probl\u00e8mes de compatibilit\u00e9 sont g\u00e9r\u00e9s pour vous, assurant un affichage d&rsquo;image r\u00e9actif et inter-navigateurs sans avoir \u00e0 investiguer chaque petit d\u00e9tail.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Techniques avanc\u00e9es de redimensionnement <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Unit\u00e9s de viewport (vh, vw)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les unit\u00e9s de viewport offrent un moyen de dimensionner les \u00e9l\u00e9ments par rapport au viewport (la zone visible du navigateur). Voici comment elles se rapportent au redimensionnement d&rsquo;image :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">vh :<\/ci><ci id=\"gid_1\"> 1vh \u00e9quivaut \u00e0 1% de la hauteur du viewport.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">vw :<\/ci><ci id=\"gid_1\"> 1vw \u00e9quivaut \u00e0 1% de la largeur du viewport.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Exemple<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-575ca47 elementor-widget elementor-widget-code-highlight\" data-id=\"575ca47\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-height: 80vh;  \/* Image height will never exceed 80% of the viewport height *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb67780 elementor-widget elementor-widget-text-editor\" data-id=\"cb67780\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Cas d&rsquo;utilisation avec les images<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">D\u00e9finition de tailles flexibles :<\/ci><ci id=\"gid_1\"> Combinez des pourcentages et des unit\u00e9s fixes pour cr\u00e9er des \u00e9l\u00e9ments qui se redimensionnent tout en maintenant des d\u00e9calages sp\u00e9cifiques (par exemple, une barre lat\u00e9rale qui occupe 30% de la largeur moins une marge fixe de 20px).<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Calculs complexes :<\/ci><ci id=\"gid_1\"> Cr\u00e9ez des r\u00e8gles de redimensionnement complexes qui prennent en compte de multiples facteurs.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Ajustements r\u00e9actifs :<\/ci><ci id=\"gid_1\"> Utilisez <\/ci><ci id=\"gid_2\">calc()<\/ci><ci id=\"gid_3\"> dans les requ\u00eates m\u00e9dia pour affiner le redimensionnement des images \u00e0 des points de rupture sp\u00e9cifiques.<\/ci><\/li>\n<\/ul>\n<p><ci id=\"gid_0\">Note :<\/ci><ci id=\"gid_1\"> La support du navigateur pour <\/ci><ci id=\"gid_2\">calc()<\/ci><ci id=\"gid_3\"> est excellente, mais la compatibilit\u00e9 doit toujours \u00eatre prise en compte.<\/ci><\/p>\n<h4><span style=\"font-weight: 400;\">Exemple<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c38189b elementor-widget elementor-widget-code-highlight\" data-id=\"c38189b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-width: 100%;  \r\n  height: auto; \r\n}\r\n@media (min-width: 900px) {\r\n  img {\r\n    width: calc(50% - 30px); \/* Image takes up 50% of its container minus 30px on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0a618b elementor-widget elementor-widget-text-editor\" data-id=\"d0a618b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Filtres et transformations CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les filtres et les transformations CSS offrent des moyens de manipuler visuellement les images, ouvrant des possibilit\u00e9s cr\u00e9atives qui vont au-del\u00e0 du simple redimensionnement.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Filtres<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">grayscale :<\/ci><ci id=\"gid_1\"> Convertit une image en niveaux de gris.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">sepia :<\/ci><ci id=\"gid_1\"> Applique un ton s\u00e9pia de style vintage.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">blur :<\/ci><ci id=\"gid_1\"> Floute une image.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">brightness, contrast, saturation :<\/ci><ci id=\"gid_1\"> Ajuste ces propri\u00e9t\u00e9s visuelles.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Et plus encore !<\/b><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Transformations<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">scale :<\/ci><ci id=\"gid_1\"> Agrandit ou r\u00e9duit une image.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">rotate :<\/ci><ci id=\"gid_1\"> Fait pivoter une image.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">skew, translate :<\/ci><ci id=\"gid_1\"> Applique des effets d&rsquo;inclinaison ou repositionne une image.<\/ci><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Exemple<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc42968 elementor-widget elementor-widget-code-highlight\" data-id=\"cc42968\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg:hover {\r\n  filter: grayscale(100%); \r\n  transform: scale(1.1); \/* Image scales up slightly on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eae8283 elementor-widget elementor-widget-text-editor\" data-id=\"eae8283\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Note sur la performance :<\/b><span style=\"font-weight: 400;\"> L&rsquo;utilisation excessive de filtres et de transformations peut potentiellement impacter les vitesses de chargement des pages, en particulier sur les appareils plus anciens. Utilisez-les strat\u00e9giquement pour des effets cibl\u00e9s.<\/span><\/p>\n<p><ci id=\"gid_0\">Int\u00e9gration Elementor :<\/ci><ci id=\"gid_1\"> Elementor fournit des contr\u00f4les visuels intuitifs pour appliquer bon nombre de ces effets, vous permettant d&rsquo;exp\u00e9rimenter avec des transformations d&rsquo;image sans avoir besoin d&rsquo;\u00e9crire du code manuellement.<\/ci><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusion <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Tout au long de ce guide, vous avez appris que le redimensionnement d&rsquo;image ne consiste pas simplement \u00e0 adapter les images. C&rsquo;est un aspect crucial de la performance web, de l&rsquo;exp\u00e9rience utilisateur et du maintien d&rsquo;une pr\u00e9sence en ligne professionnelle.<\/span><\/p>\n<p><ci id=\"gid_0\">En comprenant comment les propri\u00e9t\u00e9s CSS telles que <\/ci><ci id=\"gid_1\">width<\/ci><ci id=\"gid_2\">, <\/ci><ci id=\"gid_3\">height<\/ci><ci id=\"gid_4\">, <\/ci><ci id=\"gid_5\">object-fit<\/ci><ci id=\"gid_6\">, et <\/ci><ci id=\"gid_7\">background-size<\/ci><span style=\"font-weight: 400;\">  fonctionnent, vous avez acquis des outils puissants pour contr\u00f4ler l&rsquo;affichage des images. Nous avons explor\u00e9 les techniques d&rsquo;images r\u00e9actives et les meilleures pratiques d&rsquo;optimisation, et avons m\u00eame abord\u00e9 des possibilit\u00e9s avanc\u00e9es de redimensionnement.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Si vous \u00eates un utilisateur WordPress, Elementor simplifie l&rsquo;ensemble du processus. Des contr\u00f4les intuitifs de redimensionnement d&rsquo;image et son Image Optimizer int\u00e9gr\u00e9 \u00e0 l&rsquo;int\u00e9gration transparente avec une solution d&rsquo;h\u00e9bergement ax\u00e9e sur la performance comme Elementor Hosting, vous avez tout pour offrir des visuels \u00e9poustouflants sans sacrifier la vitesse.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Rappelez-vous :<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Optimisez vos images <\/ci><ci id=\"gid_1\"><ci id=\"gid_2\">avant<\/ci><\/ci><ci id=\"gid_3\"> de les t\u00e9l\u00e9charger.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Consid\u00e9rez toujours l&rsquo;objectif et le contexte de l&rsquo;image lors du choix des techniques de redimensionnement.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Testez l&rsquo;affichage visuel de votre site web sur diff\u00e9rents appareils pour garantir une exp\u00e9rience parfaite \u00e0 tous les visiteurs.<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Les images sont l&rsquo;essence m\u00eame des sites web modernes. Elles captent l&rsquo;attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s&rsquo;accompagnent d&rsquo;une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l&rsquo;ensemble de votre strat\u00e9gie en ligne.<\/p>\n","protected":false},"author":2024234,"featured_media":107742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[514],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment redimensionner une image en CSS et HTML<\/title>\n<meta name=\"description\" content=\"Les images sont l&#039;essence m\u00eame des sites web modernes. Elles captent l&#039;attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s&#039;accompagnent d&#039;une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l&#039;ensemble de votre strat\u00e9gie en ligne.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment redimensionner une image en CSS et HTML\" \/>\n<meta property=\"og:description\" content=\"Les images sont l&#039;essence m\u00eame des sites web modernes. Elles captent l&#039;attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s&#039;accompagnent d&#039;une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l&#039;ensemble de votre strat\u00e9gie en ligne.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T15:03:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Comment redimensionner une image en CSS et HTML\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2025-12-17T15:03:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\"},\"wordCount\":3740,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"articleSection\":[\"Ressources\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\",\"name\":\"Comment redimensionner une image en CSS et HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2025-12-17T15:03:07+00:00\",\"description\":\"Les images sont l'essence m\u00eame des sites web modernes. Elles captent l'attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s'accompagnent d'une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l'ensemble de votre strat\u00e9gie en ligne.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ressources\",\"item\":\"https:\/\/elementor.com\/blog\/fr\/category\/ressources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment redimensionner une image en CSS et HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/fr\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment redimensionner une image en CSS et HTML","description":"Les images sont l'essence m\u00eame des sites web modernes. Elles captent l'attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s'accompagnent d'une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l'ensemble de votre strat\u00e9gie en ligne.","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:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment redimensionner une image en CSS et HTML","og_description":"Les images sont l'essence m\u00eame des sites web modernes. Elles captent l'attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s'accompagnent d'une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l'ensemble de votre strat\u00e9gie en ligne.","og_url":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:27+00:00","article_modified_time":"2025-12-17T15:03:07+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"\u00c9crit par":"Itamar Haim","Dur\u00e9e de lecture estim\u00e9e":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Comment redimensionner une image en CSS et HTML","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2025-12-17T15:03:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/"},"wordCount":3740,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","articleSection":["Ressources"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/","url":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/","name":"Comment redimensionner une image en CSS et HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2025-12-17T15:03:07+00:00","description":"Les images sont l'essence m\u00eame des sites web modernes. Elles captent l'attention, transmettent des \u00e9motions et d\u00e9finissent le ton de votre pr\u00e9sence en ligne tout enti\u00e8re. Cependant, les visuels saisissants s'accompagnent d'une mise en garde : les images non optimis\u00e9es peuvent s\u00e9rieusement ralentir la vitesse de votre site web. Les sites web lents frustrent les visiteurs, nuisent \u00e0 votre classement dans les moteurs de recherche et, en fin de compte, compromettent l'ensemble de votre strat\u00e9gie en ligne.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/fr\/comment-redimensionner-une-image-en-css-et-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Ressources","item":"https:\/\/elementor.com\/blog\/fr\/category\/ressources\/"},{"@type":"ListItem","position":3,"name":"Comment redimensionner une image en CSS et HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/fr\/#website","url":"https:\/\/elementor.com\/blog\/fr\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/fr\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/fr\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/123634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=123634"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/123634\/revisions"}],"predecessor-version":[{"id":147889,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/123634\/revisions\/147889"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media\/107742"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=123634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=123634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=123634"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_persona?post=123634"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_intent?post=123634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}