Website-Generatoren, Frameworks und CMSs

Mit CMS wie WordPress und anderen Website-Generatoren nutzungsfreundlicher zu gestalten.

Obwohl sicherlich eine Verbesserung gegenüber dem manuellen Speichern alternativer Bildausschnitte und der manuellen Optimierung mit einem Tool wie dem Squoosh.app gibt, bringt die Automatisierung der Bildkomprimierung als Schritt im Entwicklungsprozess einige Einschränkungen mit sich. Zum einen dürfen Sie nicht Sie haben immer die volle Kontrolle über die auf einer Website verwendeten Bilder – die meisten Bilder, die Nutzer im Web sehen, sind eher inhaltsbezogene Bedenken. als bei Entwicklungsfragen, die von Nutzern oder Redakteuren hochgeladen werden, anstatt in einem Repository neben Entwicklungsressourcen wie JavaScript und Stylesheets.

Dazu sind in der Regel mehrere Prozesse für die Bildverwaltung erforderlich: eine Entwicklungsaufgabe für die Bild-Assets, die in Erstellung und Pflege einer Website – Hintergründe, Symbole, Logos usw. – sowie andere Aspekte, die sich mit Bild-Assets befassen, die durch die Nutzung generiert werden der Website, z. B. Fotos, die ein Redaktionsteam in einen Beitrag eingebettet hat, oder ein von einem Nutzer hochgeladener Avatar. Auch wenn der Kontext unterscheiden sich die Endziele: die automatische Codierung und Komprimierung basierend auf den vom Entwicklungsteam festgelegten Einstellungen.

Glücklicherweise können die Bildverarbeitungsbibliotheken, die Sie aus Ihren lokalen Entwicklungs-Workflows kennen, in beliebig vielen von Kontexten. Es gibt zwar keinen „One-Size-fits-all“-Ansatz für das Markup für responsive Bilder, aber diese Systeme bieten sinnvolle Standardeinstellungen, Konfigurationsoptionen und API-Hooks, um deren Implementierung zu vereinfachen.

Generatoren für statische Websites

Im Vergleich zu Task-Runnern gibt es bei statischen Website-Generatoren wie Jekyll oder Eleventy eine gewisse Ähnlichkeit bei der Herangehensweise an Bilder. Mit Diese Tools zum Erstellen einer bereitstellungsbereiten Website erfordern die Verwaltung von Assets, einschließlich CSS-Reduzierung oder -Transpilierung und -Bündelung von JavaScript. Wie Sie sich vorstellen können, können Sie mit diesen Tools Bild-Assets auf die gleiche Weise verarbeiten und dabei viele der Bibliotheken nutzen. die Sie bereits kennengelernt haben.

Das offizielle Bild-Plug-in für Eleventy verwendet Sharp für Größenanpassung, Generierung mehrerer Quellgrößen, Neucodierung und Komprimierung, wie bei einigen der hier beschriebenen Aufgaben.

Im Gegensatz zu einem Task-Runner hat ein Generator für statische Websites direkten Einblick in die Konfiguration und Nutzung dieser Bibliotheken. und dem Markup, das für die Produktionswebsite generiert wird. So lässt sich unser responsives Bild-Creative erheblich automatisieren. Markup. Wenn dieses Plug-in beispielsweise als Teil eines Kurzcodes zum Anzeigen von Bildern aufgerufen wird, gibt es HTML gemäß den zu den Konfigurationsoptionen hinzu, die an Sharp übergeben wurden.


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 standardmäßigen Bildsyntax verwendet werden:

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

Wenn wie oben für die Ausgabe mehrerer Codierungen konfiguriert wird, ist das generierte Markup ein <picture>-Element, das zugehörige <source>-Elemente, type-Attribute und srcset-Attribute, die bereits vollständig mit einer Liste von generierten Kandidatengrößen.

<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 brauchbares sizes-Attribut generieren, da es die endgültige Größe und Position nicht kennen kann. des Bilds im gerenderten Layout, akzeptiert aber beim Generieren des Markups eine Eingabe als Eingabe – einen anderen Job für RespImageLint.

Frameworks

Für clientseitige Rendering-Frameworks ist ein Task-Runner oder Bundler wie Webpack erforderlich, um Bild-Assets zu bearbeiten, zu codieren und zu komprimieren selbst. Beim Responsive-Ladeprogramm wird beispielsweise auch die Sharp-Bibliothek verwendet, um Bild-Assets neu zu speichern. Anschließend können Sie import Ihre Bilder dann als Objekte:

  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 lassen sich mithilfe von Abstraktionen wie der Bildkomponente von React oder zum Ausfüllen des responsiven Webdesigns verwenden. Bild-Markup direkt an:

<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 mit clientseitigem Rendering eignet sich gut für Lazysizes und sizes="auto". Damit haben Sie fast automatisch responsive Bilder.

Content-Management-Systeme

WordPress gehörte zu den ersten Nutzern des nativen Markups für responsive Bilder und die API wurde seitdem allmählich verbessert. Einführung in WordPress 4.4 mit Unterstützung für WebP und Steuerung des MIME-Typs für die Ausgabe. WordPress Core wurde für die Nutzung der ImageMagick-PHP-Erweiterung entwickelt. oder, falls nicht, die GD.

Wenn ein Bild über die WordPress-Administratoroberfläche hochgeladen wird, wird dieses Quellbild verwendet, um für den Nutzer sichtbare Dateien auf auf den Server übertragen, genau wie auf Ihrem lokalen Rechner. Standardmäßig wird jede von WordPress ausgegebene Bildausgabe mit einem Attribut srcset, das auf den in Ihrem Design konfigurierten Bildgrößen basiert.

Zwei wichtige Einstellungen, die für generierte Bilder konfiguriert werden können, sind die Komprimierungsqualität und der MIME-Typ für die Ausgabe.

So legen Sie beispielsweise die Standardkomprimierungsqualität für alle generierten Bilder auf 70 fest:

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

Für eine noch bessere Komprimierung kannst du das Ausgabeformat für hochgeladene JPEG-Bilder folgendermaßen in WebP ändern:

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

Da WordPress alle alternativen Schnitte versteht, und Codierungen, die aus einem hochgeladenen Bild generiert werden, können Hilfsfunktionen wie wp_get_attachment_image_srcset() bis den vollständigen, generierten srcset-Wert eines Bildanhangs abzurufen

Wie Sie wahrscheinlich schon vermutet haben, ist die Arbeit mit dem Attribut sizes etwas komplizierter. Keine Informationen wie Bilder in einem Layout verwendet werden, verwendet WordPress derzeit standardmäßig einen sizes-Wert, der genau lautet: „Dieses Bild sollten 100% des verfügbaren Darstellungsbereichs bis zur unveränderlichen Größe der größten Quelle einnehmen. Dies ist ein vorhersehbarer Standardwert, aber kein korrekter eine für jede reale Anwendung. Nutze wp_calculate_image_sizes() um kontextgerechte sizes-Attribute in Ihren Vorlagen festzulegen.

Natürlich gibt es zahllose WordPress-Plug-ins, die dazu dienen, moderne Bild-Workflows für Entwicklungsteams und Nutzer gleichermaßen zu beschleunigen. Plug-ins wie Jetpack's Site Accelerator (früher "Photon") kann serverseitige Verhandlungen für Codierungen ermöglichen, sodass Nutzer die kleinste und effizienteste Codierung erhalten, die ihr ohne dass die Markup-Muster <picture> und type erforderlich sind. Dies erfolgt mithilfe von Bildinhalten. Liefernetzwerks – 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 sich die Mechanismen selbst etwas unterscheiden: ähnliche Hooks zum Generieren alternativer Bildquellen und entsprechende srcset-Attribute und Art Direction über das <picture>-Element.