Bild
Optimiertes Bildmaterial. Nahtlose Leistung.
Mit der Image-Komponente können Sie hochgradig optimierte, responsive Bilder in Ihre Inhalte einfügen, ohne Code schreiben zu müssen. Mit automatischer Formatkonvertierung (AVIF, WebP), progressivem Laden, themenabhängigen Variationen und vollständiger Kontrolle über das visuelle Rendering ist diese Komponente darauf ausgelegt, die bestmögliche Benutzererfahrung und Leistung zu bieten.
Von Fokuspunkten bis hin zu benutzerdefinierten responsiven Größen und Lazy Loading wird jedes Bild so angepasst, dass nur das angezeigt wird, was Ihre Benutzer benötigen, wodurch Ihr Projekt schneller, leichter zugänglich und SEO-freundlich wird.
Leistung und Flexibilität garantiert
Bild-Formate der nächsten Generation.
Automatisch als AVIF oder WebP ausgelifert.Responsive Varianten.
Liefer Sie nur perfekte Bildgrößen.Standardmäßig Lazy Loaded.
Verbessern Sie UX & Core Web Vitals sofort.
Optimale Bild-Bereitstellung
Theme-spezifische Bild-Varianten.
Wechseln Sie Bilder nach aktivem Theme.Verwenden Sie Thumbhashes für Previews.
Reibungslose, progressive Erlebnisse.Stellen Sie Qualität, Fade-in und Fokus ein.
Stimmen Sie Ihr visuelles Storytelling ab.
Anwendungsfälle
Verwenden Sie die Bildkomponente für alle visuellen Elemente auf Ihrer Seite, die Leistung und Designpräzision erfordern:
Hero-Banner und hervorgehobene Bilder
Produkt- und Portfolio-Anzeigen
Bilder für Blogs oder Artikel
Hintergrundbilder und dekorative Elemente
Theme Visuals für helle und dunkle UI-Varianten
Icons oder Infografiken, die responsive Skalierung erfordern
In Verbindung mit der Bildoptimierungspipeline von Vertex Forge und dem Image Service von Storyblok sorgt die Komponente dafür, dass Ihre Inhalte überall schnell und ansprechend geladen werden.
Konfigurationsoptionen und Funktionen
Die Image-Komponente liefert pixelgenaues Bildmaterial, das automatisch für Leistung, SEO und Benutzerfreundlichkeit optimiert ist.
Mit Unterstützung für Responsive Sizing, Formatkonvertierung, Platzhalter und visuelle Konsistenz über verschiedene Themes hinweg können Sie Ihre visuelle Geschichte erzählen, während Ihre Website blitzschnell bleibt.
Schnelleres Laden. Schärfere Bilder. Intelligentere Bereitstellung.
Asset
Wählen Sie Ihr Bild aus der internen Asset-Bibliothek.
Die Bilder werden hier hochgeladen und verwaltet, was ein strukturiertes Asset-Management ermöglicht.
Asset Varianten
Definieren Sie alternative Bild-Varianten, die für verschiedene Themes verwendet werden sollen.
Stellen Sie zum Beispiel eine Version mit dunklem Theme bereit, wenn Ihr Projekt in den dunklen Modus wechselt.
Alt
Geben Sie einen beschreibenden Alternativtext ein, um die Barrierefreiheit und die Suchmaschinenoptimierung zu verbessern.
Alt-Texte helfen Bildschirmlesern und Suchmaschinen, den Kontext Ihres Bildes besser zu verstehen.
Platzhalter
Aktivieren Sie diese Option, um eine minimale Thumbhash-Vorschau des Bildes beim Laden anzuzeigen.
Großartig für die Leistung und die wahrgenommene Geschwindigkeit.
Thumbhashes sind sofortige, geladene und unscharfe Vorschauen Ihres ausgewählten Assets, die Ihren Nutzern bei progressiven Ladestrategien eine sofortige wahrgenommene Leistungssteigerung bieten.
Max Width Sizes
Definieren Sie responsive Breakpoints, die die Anzahl der pro Bildschirmbreite zu erzeugenden und bereitzustellenden Bildversionen bestimmen.
Sorgt für eine optimierte Bereitstellung je nach Gerätegröße.
Lazy
Umschalten, um das Bild erst kurz bevor es benötigt wird zu laden, wenn es unterhalb des ursprünglichen sichtbaren Bereichs beim Laden der Seite liegt.
Reduziert die Ladezeit und die Bandbreitennutzung für nicht sofort sichtbare Inhalte.
Qualität
Legen Sie die Bildqualitätsstufe fest (z. B. 80, 90, 100).
Halten Sie je nach Anwendungsfall ein Gleichgewicht zwischen visueller Wiedergabetreue und Dateigröße.
Transition
Aktivieren Sie eine sanfte Einblendungsanimation, sobald das Bild geladen ist. Verbessert die Wahrnehmung des Nutzers von Geschwindigkeit und Eleganz.
Komponenten Theme
Verwenden Sie ein einheitliches Theme für Ihren Bildcontainer.
Dazu gehören Abstände, Ausrichtung, Rahmen und andere Designmerkmale.