Scopri in che modo CMS come WordPress e altri generatori di siti possono semplificare l'utilizzo delle immagini adattabili.
Sebbene si tratti di 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 passaggio nel processo di sviluppo presenta alcune limitazioni. Ad esempio, potresti non avere sempre il pieno controllo sulle immagini utilizzate in un sito: la maggior parte delle immagini rivolte agli utenti sul Web sono contenuti che riguardano più che problemi di sviluppo, caricati da utenti o editor, piuttosto che stare in un repository insieme ad asset di sviluppo come JavaScript e fogli di stile.
Di solito, questo richiede più di un processo per la gestione delle immagini: un'attività a livello di sviluppo per gli asset immagine utilizzati per creare e gestire un sito (sfondi, icone, loghi e così via) e un'altra per gli asset immagine generati tramite l'uso del sito, ad esempio fotografie incorporate in un post da parte di una redazione o un avatar caricato da un utente. Anche se il contesto può variare, 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 imparato nei tuoi flussi di lavoro di sviluppo locale possono essere utilizzate in numerosi contesti. Sebbene non possa esistere un approccio universale per il markup delle immagini reattivo, questi sistemi offrono valori predefiniti sensibili, opzioni di configurazione e hook API per facilitarne l'implementazione.
Generatori di siti statici
Rispetto ai runner, c'è qualche somiglianza nel modo in cui generatori di siti statici come Jekyll o Eleventy si avvicinano. L'utilizzo di questi strumenti per creare un sito web pronto per il deployment richiede la gestione degli asset, inclusa la minimizzazione CSS, il transpiling e il raggruppamento di JavaScript. Come puoi immaginare, questi strumenti ti consentono di elaborare gli asset immagine nello stesso modo, utilizzando molte delle librerie che hai già imparato.
Il plug-in delle immagini per Eleventy ufficiale utilizza Sharp per fornire il ridimensionamento, la generazione di più dimensioni di origine, la ricodifica e la compressione, proprio come alcune delle attività che hai imparato qui.
A differenza di un'esecuzione di attività, un generatore di siti statico ha informazioni dirette sia sulla configurazione che sull'utilizzo di queste librerie e sul markup generato per il sito di produzione, il che significa che può fare molto di più per automatizzare il nostro markup delle immagini adattabili. Ad esempio, se Richiamato come parte di uno Shortcode per la visualizzazione delle immagini, questo 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 codice breve potrebbe quindi essere utilizzato al posto della sintassi predefinita dell'immagine:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
Se configurato per generare più codifiche, come sopra, il markup generato sarà un elemento <picture> contenente
elementi <source>, attributi type e attributi srcset corrispondenti già completamente completati con un elenco di
dimensioni candidate 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>
Naturalmente, questo plug-in non sarà in grado di generate un attributo sizes utilizzabile, in quanto non può conoscere le dimensioni e la posizione finali dell'immagine nel layout visualizzato, 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'esecuzione o un bundler di attività come Webpack per modificare, codificare e comprimere gli asset immagine. Il caricatore adattabile, ad esempio, utilizza anche la raccolta Sharp per salvare di nuovo gli asset immagine. Quindi, puoi 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 essere utilizzate tramite astrazioni come il componente Immagine di React o per completare direttamente il markup delle immagini adattabile:
<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 che esegue il rendering lato client è un ottimo candidato per Lazysizes e sizes="auto", offrendo immagini adattabili quasi completamente automatiche.
Sistemi di gestione dei contenuti
WordPress è stato uno dei primi utenti del markup delle immagini adattabili native e l'API è stata gradualmente migliorata da quando è stata introdotta in WordPress 4.4 con supporto per WebP e controllo sul tipo MIME di output. Il core di WordPress è progettato per utilizzare l'estensione PHP ImageMagick (o, in sua assenza, la libreria GD).
Quando un'immagine viene caricata tramite l'interfaccia di amministrazione di WordPress, l'immagine sorgente viene utilizzata per generare file rivolti agli utenti sul server, più o meno come faresti sulla tua macchina locale. Per impostazione predefinita, qualsiasi output di immagine da parte di WordPress include 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 la seguente istruzione:
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 nel seguente modo:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
Dato che WordPress ha una comprensione completa di tutti i tagli alternativi
e le codifiche che genera da un'immagine caricata, può fornire funzioni helper quali
wp_get_attachment_image_srcset() per
recuperare il valore srcset completo generato di un'immagine allegata.
Come avrai intuito a questo punto, l'utilizzo dell'attributo sizes è un po' più complicato. In assenza di informazioni
su come verranno utilizzate le immagini in un layout, WordPress utilizza attualmente un valore sizes che indica per impostazione predefinita "questa immagine
deve occupare il 100% dell'area visibile disponibile, fino alle dimensioni intrinseche della sorgente più grande", un valore predefinito prevedibile, ma non corretto
per qualsiasi applicazione reale. Assicurati di utilizzare wp_calculate_image_sizes()
per impostare attributi sizes appropriati al contesto nei tuoi modelli.
Ovviamente esistono innumerevoli plug-in WordPress dedicati a rendere più veloci i moderni flussi di lavoro delle immagini sia per i team di sviluppo che per gli utenti.
L'aspetto più interessante è che plug-in come Site Accelerator di Jetpack (in precedenza "Photon") possono fornire negoziazione lato server per le codifiche, garantendo che gli utenti ricevano la codifica più piccola ed efficiente che il loro browser è in grado di supportare senza la necessità di pattern di markup <picture> e type. Ciò avviene attraverso l'utilizzo di una rete CDN (Content Delivery Network),
una tecnologia che puoi utilizzare autonomamente, indipendentemente dal tuo CMS.
Tutto questo è vero anche per le soluzioni CMS ospitate come Shopify, anche se i meccanismi stessi saranno leggermente diversi: offrire hook simili per generare origini immagini alternative e attributi srcset corrispondenti e direzione artistica tramite l'elemento <picture>.