Générateurs de sites, frameworks et CMS

Découvrez comment les CMS tels que WordPress et d'autres générateurs de sites peuvent plus facile à utiliser des images responsives.

Il s'agit certainement d'une amélioration par rapport à l'enregistrement manuel de différentes coupes de chaque image et à leur optimisation manuelle à l'aide d'un outil comme L'automatisation de la compression d'images en tant qu'étape du développement de Squoosh.app présente certaines limites. D'une part, vous ne pouvez pas ont toujours un contrôle total sur les images utilisées sur un site. Sur le Web, la plupart des images destinées aux utilisateurs concernent davantage le contenu. que les problèmes de développement, mis en ligne par des utilisateurs ou des éditeurs, plutôt que de résider dans un dépôt avec des éléments de développement tels que JavaScript et les feuilles de style.

Cette opération nécessite généralement plusieurs processus de gestion des images: une tâche de développement pour les composants Image utilisés dans la création et la maintenance d'un site (arrière-plans, icônes, logos, etc.), ainsi qu'une autre activité axée sur les composants Image générés par l'utilisation. du site, comme des photos intégrées dans un post par une équipe éditoriale ou un avatar mis en ligne par un utilisateur. Bien que le contexte puisse différents, les objectifs finaux sont les mêmes: encodage et compression automatisés en fonction des paramètres définis par l'équipe de développement.

Heureusement, les bibliothèques de traitement d'images que vous connaissez dans vos workflows de développement locaux peuvent être utilisées dans n'importe quel nombre de contextes. Même s'il n'existe pas d'approche universelle pour le balisage de vos images responsives, ces systèmes offrent des solutions les valeurs par défaut, les options de configuration et les hooks d'API pour faciliter leur implémentation.

Générateurs de sites statiques

Par rapport aux exécuteurs de tâches, les générateurs de sites statiques, comme Jekyll ou Eleventy, présentent des similitudes dans la façon dont ils abordent les images. En utilisant la création d'un site Web prêt à être déployé nécessite de gérer les éléments, y compris la minimisation, le transpilage et le regroupement de CSS. de JavaScript. Comme vous pouvez l'imaginer, cela signifie que ces outils vous permettent de traiter les composants Image de la même manière, à l'aide de nombreuses bibliothèques que vous avez déjà appris.

Le plug-in d'image officiel pour Eleventy utilise Sharp pour permettre le redimensionnement, la génération de sources de différentes tailles, le réencodage et la compression, tout comme certaines des tâches que vous avez apprises ici.

Contrairement à un exécuteur de tâches, un générateur de site statique a un aperçu direct de la configuration et de l'utilisation de ces bibliothèques, et le balisage généré pour le site de production, ce qui signifie qu'il peut être très utile pour automatiser notre image responsive le balisage. 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 selon aux 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 les éléments <source>, les attributs type et les attributs srcset correspondants déjà renseignés avec une liste de les tailles de candidats 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 générer un attribut sizes viable, car il ne peut pas connaître la taille ni la position finales. de l'image dans la mise en page affichée, mais celle-ci en accepte une 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écessitent un exécuteur de tâches ou un bundler comme Webpack pour modifier, encoder et compresser les éléments image eux-mêmes. Responsive-Loader, par exemple, utilise également la bibliothèque Sharp pour réenregistrer les composants Image. Il vous permet ensuite puis utilisez 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 remplir votre code le balisage d'image directement:

<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 est particulièrement adapté aux Lazysizes et aux sizes="auto", ce qui offre une disponibilité presque complète. des images responsives automatisées.

Systèmes de gestion de contenu

WordPress a été l'un des premiers à avoir adopté le balisage d'images responsif natif, et l'API a été progressivement améliorée depuis ajoutée dans WordPress 4.4 avec une compatibilité avec WebP et un contrôle du type MIME de sortie. WordPress Core est conçu pour utiliser l'extension PHP ImageMagick. (ou, en l'absence de cela, la bibliothèque GD).

Lorsqu'une image est importée via l'interface d'administration de WordPress, cette image source est utilisée pour générer des fichiers visibles par l'utilisateur sur le serveur, à peu près de la même manière que vous le feriez sur votre machine locale. Par défaut, toute image générée par WordPress sera avec un attribut srcset généré en fonction des tailles d'image configurées dans votre thème.

Vous pouvez configurer deux paramètres clés pour les images générées : la qualité de 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 une compression encore meilleure, changez le format de sortie des images JPEG importées vers WebP en procédant comme suit:

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

Étant donné que WordPress connaît parfaitement toutes les versions alternatives et 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() jusqu'à récupérer la valeur srcset complète générée d'une image jointe.

Comme vous l'avez probablement deviné à ce stade, l'utilisation de l'attribut sizes est un peu plus compliquée. Absence d'informations concernant l'utilisation des images dans une mise en page, WordPress utilise actuellement par défaut une valeur sizes indiquant "cette image" doit occuper 100% de la fenêtre d'affichage disponible, jusqu'à la taille intrinsèque de la source la plus importante." Il s'agit d'une valeur par défaut prévisible, mais pas d'une une pour toute application réelle. Veillez à utiliser wp_calculate_image_sizes() pour définir des attributs sizes adaptés au contexte dans vos modèles.

Bien entendu, il existe d'innombrables plug-ins WordPress conçus pour accélérer les workflows d'images modernes, aussi bien pour les équipes de développement que pour les utilisateurs. et surtout, des plug-ins tels que Jetpack's Site Accelerator (anciennement "Photon") peut permettre la négociation côté serveur des encodages, garantissant que les utilisateurs bénéficient du codage le plus petit et le plus efficace possible navigateur peut prendre en charge sans avoir besoin des schémas de balisage <picture> et type. Pour ce faire, il utilise un contenu image réseau de diffusion de contenu : une technologie que vous pouvez utiliser vous-même, indépendamment de votre CMS.

Tout cela est également vrai pour les CMS hébergés comme Shopify, même si les mécanismes eux-mêmes différeront quelque peu: offrir des solutions similaires des hooks pour générer d'autres sources d'images et les attributs srcset correspondants. et la direction artistique via l'élément <picture>.