Optimisation des images - configuration

Making-of

11ty

L’du plugin d’optimisation d’images n’est pas suffisant. Il faut maintenant le configurer.

Préparation de pages d’exemples

Un exemple de page avec une image :

Index: blog/post-1.md

+![](/img/Introducing-Baldir.png)

Index: index.html

+<img
+        src="./img/Introducing-Baldir.png"
+        alt="Baldir; Développeur de valeur d‘usage et de logiciel."
+>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>
 
 <h2>{{ blog.data.title }}</h2>
-<p>{{ blog.content }}</p>

Index: _includes/layout.html

     <title>Baldir - {{title}}</title>
+    <style>
+        body{
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
 </head>
 <body>
 <header>

Configuration du plugin

import {eleventyImageTransformPlugin} from "@11ty/eleventy-img"

export default function (eleventyConfig) {

    // ...

    // Crée des variantes d'images de différentes dimensions et de différents formats.
    // Elles seront chargées selon la taille de l'écran
    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
        outputDir: "./_site/public/img/",
        urlPath: "/public/img/",

        extensions: "html",

        // output image formats
        formats: ["webp", "jpeg", "png"],

        // output image widths
        widths: ["320", "640", "800", "1024", "auto"],

        // attributes assigned on <img> override these values.
        defaultAttributes: {
            loading: "lazy",
            decoding: "async",
            sizes: `100vw`,
        },
    })

// ...
}