Frontend-Ausgabe und picture

Frontend-Ausgabe und <picture>

FG Image WP erzeugt im Frontend keine Bilddateien. Es liest ausschließlich bereits registrierte Varianten und ergänzt daraus moderne <source>-Elemente rund um oder innerhalb vorhandener WordPress-Bildausgabe.

Reihenfolge der Bildformate

Für neu erzeugte FG-Image-<picture>-Elemente ist die Reihenfolge fest:

1. AVIF, sofern vollständig verfügbar;
2. WebP, sofern vollständig verfügbar;
3. das ursprüngliche <img> als Fallback.

Beispielhaftes Ergebnis:

<picture class="fg-image-picture">
  <source type="image/avif" srcset="…">
  <source type="image/webp" srcset="…">
  <img src="…" srcset="…" sizes="…" alt="…">
</picture>

Das genaue Markup hängt von den vorhandenen WordPress-Bildgrößen und registrierten FG-Varianten ab.

Vollständige srcset-Abdeckung

Ein moderner <source> wird nur ausgegeben, wenn FG Image für alle Kandidaten des ursprünglichen src/srcset eine passende Variante finden kann.

Das ist wichtig, weil einzelne moderne Varianten aufgrund der Mindest-Ersparnis fehlen können. Ohne die Vollständigkeitsprüfung könnte der Browser innerhalb eines unvollständigen modernen srcset eine kleinere Datei hochskalieren. In diesem Fall bleibt FG Image stattdessen beim nächsten vollständigen Format oder beim Original-Fallback.

Welche Bilder werden erkannt?

Die Frontend-Integration hängt unter anderem an:

• the_content;
• wp_get_attachment_image;
• wp_content_img_tag;
• einem abschließenden HTML-Pass des normalen Frontend-Responses.

Normale WordPress-Attachment-Bilder werden direkt verarbeitet. Standalone-<img>-Elemente aus Themes/Templates können ebenfalls verarbeitet werden, wenn sie eindeutig einem WordPress-Attachment zugeordnet werden können, beispielsweise über eine wp-image-{ID}-Klasse oder über im Request bekannte Attachment-URLs.

Unbekannte oder externe Bilder bleiben unverändert.

Ein <img> mit dem Attribut data-fg-image-skip wird nicht durch FG Image verpackt.

Bereits vorhandene <picture>-Elemente

Seit Version 1.0.1 unterstützt FG Image bestehende responsive <picture>-Strukturen in-place.

Dabei gilt:

• es wird kein <picture> in ein vorhandenes <picture> verschachtelt;
• vorhandene AVIF-/WebP-Sources werden nicht dupliziert;
• für JPEG-/PNG-/andere Original-Sources werden moderne Sources nur ergänzt, wenn sie vollständig verfügbar sind;
• media, sizes, width und height vorhandener Sources werden für die hinzugefügten modernen Sources übernommen;
• die vorhandene Art-Direction-/Crop-Struktur bleibt erhalten;
• ein generischer moderner Source für das Fallback-<img> wird nur ergänzt, wenn die vorhandene Struktur dies zulässt.

FG Image verändert bestehende <picture>-Elemente nur, wenn eine eindeutige Attachment-Zuordnung möglich ist.

Layout-Kompatibilität

Von FG Image neu erzeugte Wrapper erhalten die Klasse fg-image-picture. Das Plugin gibt dafür ein kleines Inline-Stylesheet im <head> aus:

.fg-image-picture {
  display: contents;
  width: inherit;
  min-width: inherit;
  max-width: inherit;
  height: inherit;
  min-height: inherit;
  max-height: inherit;
}

.ratio > .fg-image-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ratio > .fg-image-picture > img {
  display: block;
  width: 100%;
  height: 100%;
}

display: contents hält den zusätzlichen Wrapper in vielen Grid-/Flex-Layouts layoutneutral. Die .ratio-Sonderregel berücksichtigt Bootstrap-Container, deren Positionierungslogik das direkte Kindelement erwartet.

Bereits vom Theme oder Content vorhandene <picture>-Elemente erhalten diese FG-Image-Klasse nicht und werden durch dieses Stylesheet nicht gezielt umgestylt.

Wann läuft der finale HTML-Pass nicht?

Der Output-Buffer wird für normale Frontend-HTML-Antworten eingerichtet. Er wird unter anderem nicht für folgende Kontexte verwendet:

• WordPress-Adminbereich;
• AJAX;
• Cron;
• REST-Requests;
• Feeds;
• Trackbacks.

Frontend-Ausgabe gezielt steuern

Entwickler können die Verarbeitung einzelner Attachments über den Filter fg_image_frontend_enabled deaktivieren oder Quellen und finales Markup über weitere Frontend-Hooks anpassen.

Für CDN-/Storage-Integrationen steht fg_image_variant_url zur Verfügung.

Preloads mit FG Performance

Ist FG Performance vorhanden und die FG-Image-Frontend-Ausgabe aktiviert, kann FG Image eindeutig zuordenbare Image-Preloads auf den bevorzugten vollständigen modernen Source umschreiben. Details stehen unter Kompatibilität.