Bild-Darstellung
Die Bild-Darstellung zeigt Bilder auf deiner Website an und optimiert sie automatisch für verschiedene Bildschirmgrößen. Besucher können Bilder optional in einem Vollbild-Modus betrachten. Das System lädt Bilder intelligent nach Bedarf, um die Ladezeiten zu verbessern.
Voraussetzungen
- Du arbeitest im Website-Editor von weboffice
- Du hast ein Bild hochgeladen oder ausgewählt
- Das Bild ist in einem unterstützten Format (JPG, PNG, WebP)
Aufbau der Bild-Darstellung
Haupt-Bild: Das Bild wird in der von dir gewählten Größe angezeigt.
Responsive Versionen: Automatisch werden verschiedene Bildgrößen für unterschiedliche Geräte bereitgestellt (480px, 1280px, 1920px Breite).
Lazy Loading: Bilder werden erst geladen, wenn sie im sichtbaren Bereich erscheinen, um die Seitenladezeit zu verbessern.
Alt-Text: Für Barrierefreiheit wird automatisch ein alternativer Text hinzugefügt.
Vollbild-Option: Bei aktivierter Option können Besucher das Bild durch Anklicken vergrößert betrachten.
So arbeitest du mit der Bild-Darstellung
Bild auswählen: Wähle ein Bild aus deiner Medienbibliothek oder lade ein neues hoch.
Größe festlegen: Bestimme, in welcher Größe das Bild angezeigt werden soll:
- Size480: Kleine Darstellung (480px breit)
- Size1280: Mittlere Darstellung (1280px breit)
- Size1920: Große Darstellung (1920px breit)
Titel hinzufügen: Gib einen beschreibenden Titel für das Bild ein. Dieser wird als Alt-Text und im Vollbild-Modus verwendet.
Vollbild aktivieren: Entscheide, ob Besucher das Bild durch Anklicken vergrößern können.
CSS-Klassen: Füge bei Bedarf zusätzliche CSS-Klassen für spezielle Styling-Anforderungen hinzu.
Höhe festlegen: Optional kannst du eine feste Höhe für das Bild definieren.
Bildoptimierung verstehen
Automatische Größenanpassung: Das System erstellt automatisch verschiedene Bildgrößen für optimale Performance.
Srcset-Technologie: Moderne Browser wählen automatisch die beste Bildgröße für das jeweilige Gerät.
Lazy Loading: Bilder werden erst geladen, wenn sie benötigt werden, was die Seitenladezeit erheblich verbessert.
Fetch Priority: Wichtige Bilder können mit höherer Priorität geladen werden.
Tipps und Hinweise
Bildqualität: Lade Bilder in hoher Qualität hoch - das System optimiert sie automatisch für verschiedene Verwendungen.
Alt-Text wichtig: Gib immer einen aussagekräftigen Titel ein, da dieser für Suchmaschinen und Barrierefreiheit wichtig ist.
Dateigröße beachten: Auch wenn das System optimiert, solltest du sehr große Bilddateien vor dem Upload komprimieren.
Vollbild sparsam nutzen: Aktiviere die Vollbild-Option nur bei Bildern, die Details zeigen, die vergrößert betrachtet werden sollen.
Mobile Ansicht testen: Überprüfe, wie deine Bilder auf verschiedenen Bildschirmgrößen aussehen.