Hier erfährst du, wie CMS wie WordPress und andere Websitegeneratoren die Verwendung responsiver Bilder vereinfachen können.
Es ist zwar sicher eine Verbesserung gegenüber dem manuellen Speichern alternativer Schnitte jedes Bildes und deren manueller Optimierung mit einem Tool wie Squoosh.app, die Automatisierung der Bildkomprimierung als Schritt im Entwicklungsprozess hat jedoch einige Einschränkungen. Zum einen haben Sie möglicherweise nicht immer die volle Kontrolle über die Bilder, die auf einer Website verwendet werden. Die meisten für Nutzer sichtbaren Bilder im Web sind inhaltsbezogene Inhalte, die eher inhaltlich sind und von Nutzern oder Bearbeitern hochgeladen werden, anstatt in einem Repository neben Entwicklungs-Assets wie JavaScript und Stylesheets zu wohnen.
Dazu ist in der Regel mehr als ein Prozess für die Bildverwaltung erforderlich: eine Aufgabe auf Entwicklungsebene für die Bild-Assets, die beim Erstellen und Verwalten einer Website verwendet werden, z. B. Hintergründe, Symbole und Logos, und eine weitere Aufgabe für Bildassets, die durch die Nutzung der Website generiert wurden, z. B. Fotos, die von einem Redaktionsteam in einen Beitrag eingebettet sind, oder einen Avatar, der von einem Nutzer hochgeladen wurde. Auch wenn der Kontext unterschiedlich sein kann, sind die Ziele die gleichen: die automatische Codierung und Komprimierung basierend auf den vom Entwicklungsteam festgelegten Einstellungen.
Glücklicherweise können die Bildverarbeitungsbibliotheken, die Sie in Ihren lokalen Entwicklungsworkflows kennen, in beliebig vielen Kontexten verwendet werden. Auch wenn es für Ihr responsives Bild-Markup keinen allgemeingültigen Ansatz gibt, bieten diese Systeme vernünftige Standardeinstellungen, Konfigurationsoptionen und API-Hooks, die ihre Implementierung vereinfachen.
Generatoren für statische Websites
Im Vergleich zu Task-Runnern gibt es eine gewisse Ähnlichkeit in der Art und Weise, wie statische Website-Generatoren wie Jekyll oder Eleventy an Bilder herangehen. Die Verwendung dieser Tools zum Erstellen einer für die Bereitstellung vorbereiteten Website erfordert die Verwaltung von Assets, einschließlich CSS-Komprimierung oder Transpilierung und Bündelung von JavaScript. Sie können sich also vorstellen, dass Sie mit diesen Tools Bild-Assets auf die gleiche Weise verarbeiten können. Dabei kommen viele der Bibliotheken zum Einsatz, die Sie bereits kennengelernt haben.
Das offizielle Bild-Plug-in für Eleventy nutzt Sharp, um die Größenanpassung, das Generieren mehrerer Quellgrößen sowie die Neucodierung und Komprimierung zu ermöglichen – genau wie bei einigen der Aufgaben, die Sie hier kennengelernt haben.
Im Gegensatz zu einem Task-Runner bietet ein statischer Websitegenerator direkten Einblick in die Konfiguration und Nutzung dieser Bibliotheken sowie das für die Produktionswebsite generierte Markup. Dadurch können wir unser responsives Bild-Markup erheblich automatisieren. Wenn dieses Plug-in beispielsweise als Teil eines Kurzcodes für die Anzeige von Bildern aufgerufen wird, gibt dieses Plug-in HTML-Code gemäß den an Sharp übergebenen Konfigurationsoptionen aus.
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);
};
Dieser Kurzcode könnte dann anstelle der Standard-Image-Syntax verwendet werden:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
Wenn das Markup wie oben für die Ausgabe mehrerer Codierungen konfiguriert ist, ist das generierte Markup ein <picture>-Element, das die entsprechenden <source>-, type- und srcset-Attribute enthält, bereits vollständig mit einer Liste der generierten möglichen Größen gefüllt.
<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>
Natürlich kann dieses Plug-in kein gültiges sizes-Attribut generate, da es die endgültige Größe und Position des Bildes im gerenderten Layout nicht kennen kann. Es akzeptiert jedoch eine Eingabe als Eingabe beim Generieren des Markups – ein weiterer Job für RespImageLint.
Frameworks
Clientseitige Rendering-Frameworks benötigen einen Task-Runner oder Bundler wie Webpack, um Bild-Assets selbst zu bearbeiten, zu codieren und zu komprimieren. Beim Responsive Loader wird beispielsweise ebenfalls die Sharp-Bibliothek verwendet, um Bild-Assets neu zu speichern. Sie können Ihre Bilder dann mit import als Objekte ausführen:
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';
Diese importierten Bilder können dann durch Abstraktionen wie die React-Bildkomponente verwendet oder direkt in das responsive Bild-Markup eingefügt werden:
<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"
/>
Ein Framework für clientseitiges Rendering ist ein guter Kandidat für Lazysizes und sizes="auto", da Sie damit fast vollständig automatisierte responsive Bilder erhalten.
Content-Management-Systeme
WordPress war einer der ersten Anbieter nativer responsiver Bilder-Markups und die API wurde seit der Einführung in WordPress 4.4 schrittweise verbessert. Sie unterstützt WebP und den MIME-Typ für die Ausgabe. WordPress Core ist für die Verwendung der ImageMagick PHP-Erweiterung (oder, falls nicht vorhanden, der GD) entwickelt.
Wenn ein Image über die WordPress-Admin-Schnittstelle hochgeladen wird, wird dieses Quell-Image verwendet, um für Nutzer sichtbare Dateien auf dem Server zu generieren, ähnlich wie auf Ihrem lokalen Computer. Standardmäßig enthält jede von WordPress ausgegebene Bildausgabe ein generiertes srcset-Attribut, das auf den in Ihrem Design konfigurierten Bildgrößen basiert.
Zwei wichtige Einstellungen, die für generierte Images konfiguriert werden können, sind die Komprimierungsqualität und der Ausgabe-MIME-Typ.
So kannst du beispielsweise die Standardkomprimierungsqualität für alle generierten Bilder auf 70 festlegen:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
Sie können das Ausgabeformat für hochgeladene JPEG-Bilder folgendermaßen zu WebP ändern, um eine noch bessere Komprimierung zu erreichen:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
Da WordPress alle alternativen Schnitte und Codierungen versteht, die es aus einem hochgeladenen Bild generiert, kann es Hilfsfunktionen wie wp_get_attachment_image_srcset() bereitstellen, um den vollständigen, generierten srcset-Wert eines Bildanhangs abzurufen.
Wie Sie zu diesem Zeitpunkt wahrscheinlich vermutet haben, ist die Arbeit mit dem Attribut sizes etwas komplizierter. Ohne Informationen dazu, wie Bilder in einem Layout verwendet werden, verwendet WordPress derzeit standardmäßig einen sizes-Wert, der besagt, dass dieses Bild 100% des verfügbaren Darstellungsbereichs bis zur tatsächlichen Größe der größten Quelle einnehmen sollte. Dies ist zwar ein vorhersehbarer Standardwert, aber kein korrekter Wert für reale Anwendungen. Verwenden Sie unbedingt wp_calculate_image_sizes(), um kontextgerechte sizes-Attribute in Ihren Vorlagen festzulegen.
Natürlich gibt es zahlreiche WordPress-Plug-ins, mit denen sich moderne Image-Workflows für Entwicklungsteams und Nutzer gleichermaßen beschleunigen lassen.
Am interessantesten ist vielleicht, dass Plug-ins wie der Site Accelerator von Jetpack (früher „Photon“) eine serverseitige Verhandlung von Codierungen ermöglichen. Dadurch wird sichergestellt, dass Nutzer die kleinste und effizienteste Codierung erhalten, die ihr Browser unterstützt, ohne dass <picture>- und type-Markup-Muster erforderlich sind. Dazu wird ein Content Delivery Network für Bilder verwendet – eine Technologie, die Sie unabhängig von Ihrem CMS nutzen können.
All dies gilt auch für gehostete CMS-Lösungen wie Shopify, wobei die Mechanismen selbst etwas anders aussehen: Sie bieten ähnliche Hooks zum Generieren alternativer Bildquellen und entsprechender srcset-Attribute sowie Art Direction (Art Direction) über das Element <picture>.