Generatore di siti, framework e CMS

Scopri in che modo CMS come WordPress e altri generatori di siti possono riuscirci è più facile usare immagini adattabili.

È sicuramente un miglioramento rispetto al salvataggio manuale dei tagli alternativi di ogni immagine e all'ottimizzazione manuale tramite uno strumento come Squoosh.app, l'automazione della compressione delle immagini come fase del processo di sviluppo presenta alcune limitazioni. Per prima cosa, non puoi Hanno sempre il pieno controllo sulle immagini utilizzate in un sito: la maggior parte delle immagini rivolte agli utenti sul web riguarda i contenuti. anziché problemi di sviluppo, caricati da utenti o editor, piuttosto che risiedere in un repository insieme ad asset di sviluppo come JavaScript e fogli di stile.

Ciò richiede in genere più di un processo per la gestione delle immagini: un'attività a livello di sviluppo per gli asset immagine utilizzati in creare e gestire un sito (sfondi, icone, loghi e così via) e un'altra incentrata sugli asset immagine generati tramite l'uso del sito, come fotografie incorporate in un post di un team editoriale o un avatar caricato da un utente. Sebbene il contesto differiscono, gli obiettivi finali sono gli stessi: codifica e compressione automatiche in base alle impostazioni definite dal team di sviluppo.

Fortunatamente, le librerie di elaborazione delle immagini che hai compreso nei tuoi flussi di lavoro di sviluppo locale possono essere utilizzate in qualsiasi dei contesti. Sebbene non possa mai esistere un approccio unico per tutti al markup delle immagini adattabili, questi sistemi forniscono valori predefiniti, opzioni di configurazione e hook API per semplificarne l'implementazione.

Generatori di siti statici

Rispetto ai runner delle attività, c'è una certa somiglianza nel modo in cui i generatori statici di siti, come Jekyll o Eleventy, si avvicinano alle immagini. Utilizzo Questi strumenti per produrre un sito web pronto per l'implementazione richiedono la gestione degli asset, compresa la minimizzazione o la transpile dei CSS di JavaScript. Come puoi immaginare, questo significa che questi strumenti consentono di elaborare gli asset immagine allo stesso modo, utilizzando molte delle librerie che hai già imparato.

Il plug-in delle immagini ufficiale per Eleventy utilizza Sharp per fornire il ridimensionamento, la generazione di più dimensioni del codice sorgente, la ricodifica e la compressione, proprio come alcune delle attività che hai imparato qui.

A differenza di un runner di attività, un generatore di siti statico può avere informazioni dirette sia sulla configurazione che sull'utilizzo di queste librerie, e il markup generato per il sito di produzione, il che significa che può fare molto di più per automatizzare l'immagine reattiva markup dei dati. Ad esempio, se richiamato come parte di uno shortcode per la visualizzazione delle immagini, il plug-in genera codice HTML in base alle opzioni di configurazione trasmesse a 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);
};

Questo shortcode può quindi essere utilizzato al posto della sintassi predefinita dell'immagine:

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

Se configurato per produrre più codifiche, come sopra, il markup generato sarà un elemento <picture> contenente elementi <source> corrispondenti, attributi type e attributi srcset già completamente compilati con un elenco di dimensioni dei candidati generate.

<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>

Ovviamente, questo plug-in non sarà in grado di generare un attributo sizes utilizzabile, poiché non può conoscere la dimensione e la posizione definitiva. dell'immagine nel layout sottoposto a rendering, ma ne accetta uno come input durante la generazione del markup, un altro job per RespImageLint.

Framework

I framework di rendering lato client richiedono un runner o un bundler di attività come Webpack per modificare, codificare e comprimere gli asset immagine le istanze server autonomamente. Il caricatore adattabile, ad esempio, utilizza anche la libreria Sharp per salvare di nuovo gli asset immagine. Ti consente quindi di quindi import le immagini come oggetti:

  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';

Queste immagini importate possono quindi essere utilizzate tramite astrazioni come il componente Immagine di React o per compilare il codice eseguire il markup delle immagini direttamente:

<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 per il rendering lato client è un ottimo candidato per gli asset Lazysize e sizes="auto", fornendo quasi completamente immagini adattabili automatizzate.

Sistemi di gestione dei contenuti

WordPress è stato uno dei primi utenti ad adottare il markup delle immagini adattabili native e l'API è stata gradualmente migliorata da quando introdotto in WordPress 4.4 con supporto per WebP e controllo sul tipo MIME di output. WordPress core è progettato per utilizzare l'estensione PHP ImageMagick (o, in assenza di questo, la libreria GD).

Quando un'immagine viene caricata tramite l'interfaccia di amministrazione di WordPress, tale immagine di origine viene utilizzata per generare file rivolti agli utenti. sul server, come faresti sul tuo computer locale. Per impostazione predefinita, WordPress con un attributo srcset generato in base alle dimensioni delle immagini configurate nel tema.

Due impostazioni chiave che possono essere configurate per le immagini generate sono la qualità di compressione e il tipo MIME output.

Ad esempio, per impostare la qualità di compressione predefinita su 70 per tutte le immagini generate, utilizza quanto segue:

add_filter( 'wp_editor_set_quality', function() { return 70; } );

Per una compressione ancora migliore, cambia il formato di output delle immagini JPEG caricate in WebP con quanto segue:

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

Poiché WordPress comprende appieno tutti i tagli alternativi e le codifiche che genera da un'immagine caricata, può fornire funzioni helper come Da wp_get_attachment_image_srcset() a recupera il valore srcset completo generato di un'immagine allegata.

Come avrai intuito a questo punto, l'utilizzo dell'attributo sizes è un po' più complicato. Informazioni mancanti su come verranno utilizzate le immagini in un layout, WordPress attualmente utilizza per impostazione predefinita un valore sizes che indica chiaramente "questa immagine dovrebbe occupare il 100% dell'area visibile disponibile, fino alla dimensione intrinseca dell'origine più grande", un valore predefinito prevedibile, ma uno per qualsiasi applicazione reale. Assicurati di utilizzare wp_calculate_image_sizes() per impostare attributi sizes appropriati al contesto nei tuoi modelli.

Naturalmente, ci sono innumerevoli plug-in WordPress dedicati a rendere più veloci i moderni flussi di lavoro delle immagini per i team di sviluppo e per gli utenti. L'aspetto più interessante è costituito da plug-in come Site Accelerator di Jetpack (in precedenza "Photon") può fornire la negoziazione lato server per le codifiche, garantendo che gli utenti ricevano la codifica più piccola ed efficiente che i loro browser è in grado di supportare senza bisogno del pattern di markup <picture> e type. Per farlo, usa contenuti immagine di distribuzione dei contenuti: una tecnologia che puoi utilizzare autonomamente, indipendentemente dal tuo CMS.

Tutto questo vale anche per le soluzioni CMS ospitate come Shopify, sebbene i meccanismi stessi siano leggermente diversi: hook per generare origini di immagini alternative e attributi srcset corrispondenti e direzione artistica tramite l'elemento <picture>.