Découvrez comment les CMS tels que WordPress et d'autres générateurs de sites facilitent l'utilisation des images responsives.
Bien que cela soit certainement une amélioration par rapport à l'enregistrement manuel de versions alternatives de chaque image et à leur optimisation manuelle via un outil tel que Squoosh.app, l'automatisation de la compression d'images en tant qu'étape du processus de développement présente certaines limites. D'une part, vous n'avez pas toujours le contrôle total des images utilisées sur un site. La plupart des images visibles par les internautes sur le Web concernent davantage le contenu que des problèmes de développement, importées par les utilisateurs ou les éditeurs, plutôt que d'être stockées dans un dépôt à côté d'éléments de développement tels que JavaScript et les feuilles de style.
Cela implique généralement plusieurs processus de gestion des images: une tâche au niveau du développement pour les éléments image utilisés dans la création et la maintenance d'un site (arrière-plans, icônes, logos, etc.), et une autre tâche concernant les assets image générés par l'utilisation du site, comme les photos intégrées dans un post par une équipe éditoriale ou un avatar importé par un utilisateur. Bien que le contexte puisse différer, les objectifs finaux sont les mêmes: automatiser l'encodage et la compression en fonction de paramètres définis par l'équipe de développement.
Heureusement, les bibliothèques de traitement d'images que vous avez appris à comprendre à partir de vos workflows de développement local peuvent être utilisées dans n'importe quel nombre de contextes. Et bien qu'il ne puisse jamais exister d'approche universelle pour votre balisage d'images responsives, ces systèmes fournissent des valeurs par défaut, des options de configuration et des hooks d'API judicieux pour faciliter leur implémentation.
Générateurs de sites statiques
Par rapport aux exécuteurs de tâches, il existe une certaine similitude dans la façon dont les générateurs de sites statiques tels que Jekyll ou Eleven abordent les images. L'utilisation de ces outils pour créer un site Web prêt à être déployé nécessite de gérer les éléments, y compris la minimisation CSS, le transpilation et le regroupement de code JavaScript. Comme vous pouvez l'imaginer, cela signifie que ces outils vous permettent de traiter les éléments image de la même manière, en utilisant de nombreuses bibliothèques que vous avez déjà découvertes.
Le plug-in d'image officiel d'Eleven utilise Sharp pour assurer le redimensionnement, la génération de différentes tailles de sources, le réencodage et la compression, comme certaines des tâches que vous avez apprises ici.
Contrairement à un exécuteur de tâches, un générateur de site statique dispose d'informations directes sur la configuration et l'utilisation de ces bibliothèques, ainsi que sur le balisage généré pour le site de production. En d'autres termes, il offre beaucoup plus de possibilités pour automatiser le balisage d'images responsives. Par exemple, lorsqu'il est invoqué dans le cadre d'un code court pour l'affichage d'images, ce plug-in affiche le code HTML en fonction des options de configuration transmises à Sharp.
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
async function imageShortcode(src, alt, sizes="100vw") {
let metadata = await Image(src, {
formats: ["avif", "webp", "jpeg"],
widths: [1000, 800, 400],
outputDir: "_dist/img/",
filenameFormat: function( id, src, width, format, options ) {
const ext = path.extname( src ),
name = path.basename( src, ext );
return `${name}-${width}.${format}`
}
});
let imageAttributes = {
alt,
sizes,
loading: "lazy"
};
return Image.generateHTML(metadata, imageAttributes);
}
eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};
Ce code court peut ensuite être utilisé à la place de la syntaxe d'image par défaut:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
S'il est configuré pour générer plusieurs encodages, comme ci-dessus, le balisage généré sera un élément <picture> contenant des éléments <source> correspondants, des attributs type et des attributs srcset déjà entièrement renseignés avec une liste de tailles candidates générées.
<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
Bien entendu, ce plug-in ne pourra pas generate un attribut sizes viable, car il ne peut pas connaître la taille ni la position ultimes de l'image dans la mise en page affichée. Toutefois, il accepte un attribut comme entrée lors de la génération du balisage, une autre tâche pour RespImageLint.
Frameworks
Les frameworks de rendu côté client nécessiteront un exécuteur de tâches ou un bundler comme Webpack pour modifier, encoder et compresser les éléments image eux-mêmes. Par exemple, Responsive-loader utilise également la bibliothèque Sharp pour réenregistrer les éléments image. Il vous permet ensuite d'utiliser import pour vos images en tant qu'objets:
import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
Ces images importées peuvent ensuite être utilisées via des abstractions telles que le composant Image de React ou pour renseigner directement votre balisage d'image responsive:
<picture>
<source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
<source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
<img
src={imageDefault.src}
srcSet={imageDefault.srcSet}
width={imageDefault.width}
height={imageDefault.height}
sizes='…'
loading="lazy"
/>
Un framework qui effectue un rendu côté client s'avère particulièrement adapté aux tailles différées et sizes="auto", ce qui vous permet d'obtenir des images responsives presque entièrement automatisées.
Systèmes de gestion de contenu
WordPress a été l'un des premiers à utiliser le balisage d'images responsives natives. L'API a été progressivement améliorée depuis son introduction dans WordPress 4.4, avec prise en charge de WebP et contrôle du type MIME de sortie. WordPress Core est conçu pour utiliser l'extension PHP ImageMagick (ou, à défaut, la bibliothèque GD).
Lorsqu'une image est importée via l'interface d'administration WordPress, l'image source est utilisée pour générer des fichiers visibles par l'utilisateur sur le serveur, de la même manière que sur votre ordinateur local. Par défaut, toute image générée par WordPress est fournie avec un attribut srcset généré en fonction des tailles d'image configurées dans votre thème.
Les deux paramètres clés qui peuvent être configurés pour les images générées sont la qualité de la compression et le type MIME de sortie.
Par exemple, pour définir la qualité de compression par défaut sur 70 pour toutes les images générées, utilisez le code suivant:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
Pour améliorer la compression, changez le format de sortie des images JPEG importées vers WebP comme suit:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
Étant donné que WordPress comprend parfaitement toutes les versions alternatives et tous les encodages qu'il génère à partir d'une image importée, il peut fournir des fonctions d'assistance telles que wp_get_attachment_image_srcset() pour récupérer la valeur srcset générée complète d'une pièce jointe d'image.
Comme vous l'avez probablement deviné à ce stade, l'utilisation de l'attribut sizes est un peu plus compliquée. En l'absence d'informations sur la façon dont les images seront utilisées dans une mise en page, WordPress utilise actuellement par défaut une valeur sizes qui indique que "cette image doit occuper 100% de la fenêtre d'affichage disponible, jusqu'à la taille intrinsèque de la source la plus importante". C'est une valeur par défaut prévisible, mais pas correcte pour une application réelle. Veillez à utiliser wp_calculate_image_sizes() pour définir des attributs sizes contextuels dans vos modèles.
Il existe bien sûr d'innombrables plug-ins WordPress destinés à accélérer les workflows d'images modernes, aussi bien pour les équipes de développement que pour les utilisateurs.
Plus intéressant encore, les plug-ins tels que Jetpack Site Accelerator (anciennement "Photon ") permettent de négocier les encodages côté serveur. Ainsi, les utilisateurs bénéficient de l'encodage le plus petit et le plus efficace que leur navigateur puisse prendre en charge sans avoir besoin des schémas de balisage <picture> et type. Pour ce faire, elle utilise un réseau de diffusion de contenu image, une technologie que vous pouvez utiliser vous-même, indépendamment de votre CMS.
Tout cela est également vrai pour les solutions CMS hébergées comme Shopify, bien que les mécanismes eux-mêmes diffèrent quelque peu: ils proposent des hooks similaires pour générer d'autres sources d'images et les attributs srcset correspondants et une direction artistique via l'élément <picture>.