Attention aux optimisations automatiques

• Simplicité
• Frugalité
• Sobriété-numérique
• Optimisation

Parfois les optimisations automatiques sont conte productives

Ah ben, je fais des images en Gif et très peu de couleurs (4bits).

Et mon script qui optimise les images me propose des alternatives plus modernes… mais parfois plus volumineuses.

Autant sur des images modernes (avec un peu plus de couleurs) ça optimise en général.
Autant sur des images un peu plus "low-tech" ça empire.

À voir sur un échantillon plus gros.

Le code généré

<picture>
    <source type="image/webp" srcset="/public/img/C7WZXcX7IS-276.webp 276w" sizes="100vw">
    <source type="image/png" srcset="/public/img/C7WZXcX7IS-276.png 276w" sizes="100vw">
    <source type="image/gif" srcset="/public/img/C7WZXcX7IS-276.gif 276w" sizes="100vw">
    <img loading="lazy" decoding="async" alt="Dessin d’un canard avec un chapeau de sorcier"
         src="/public/img/C7WZXcX7IS-276.jpeg" width="276" height="384">
</picture>

L'extension eleventy (voir making of installation et making of configuration) et le paramétrage qui amène à cette optimisation :

    // Create images variants of different dimensions and different formats.
    // They will be loaded depending on the viewport
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    outputDir: "./_site/public/img/",
    urlPath: "/public/img/",

    extensions: "html",

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

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

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

    sharpOptions: {
        animated: true,
    },

    sharpPngOptions:{
      palette:true  
    }
})

Peut-être devrais-je jouer un peu avec certains paramètres de cette extension pour gagner encore en optimisation ?