Der Seitenabschnitt „Bild“ dient der prominenten Darstellung eines einzelnen Bildes, ohne begleitenden Fließtext. Den Abschnitt „Text mit Bild“ kennen Sie bereits, er unterscheidet sich durch die Kombination mit einem Rich-Text-Editor-Textfeld.
Im Seitenabschnitt „Bild“ stehen Ihnen neben dem Feld für den Titel, den Sie ausblenden können, die folgenden Felder zur Verfügung:
- Bild / Medien hinzufügen: Öffnen des Medienbrowsers und Auswahl eines vorhandenen Bildes oder Hochladen einer neuen Bilddatei.
- Beschriftung: Eine kurze Beschreibung des Bildes, die als Bildunterschrift unter dem Bild angezeigt wird.
- Zoom-Optionen: Hier werden die Informationen für den Bildausschnitt eingefügt, zur Auswahl des Bildabschnitts erscheint der Button „Bildauschnitt“ nachdem Sie ein Bild aus dem Medienbrowser ausgewählt haben. Diese Funktion lernen Sie im Kapitel 2.9.3Gestaltung mit Zoom und Bildausschnitt: Zoom-Option genauer kennen.
- Datei auswählen: Sind im Medienobjekt mehrere Bilder enthalten, wählen Sie hier das Bild, das als Bild in der Ausstellung angezeigt wird und für das die Zoom-Optionen gelten.
Ein zusätzliches Textfeld, wie es in anderen Abschnitten vorhanden ist, gibt es im Abschnitt „Bild“ nicht.
Beim Öffnen des Medienbrowsers innerhalb eines Seitenabschnitts vom Typ „Bild“ werden ausschließlich Medienobjekte vom Typ „Bild“ angezeigt. Andere Medientypen (z. B. Audio oder Video) stehen hier nicht zur Auswahl. Dies stellt sicher, dass ausschließlich geeignete Medien im jeweiligen Kontext eingebunden werden können.
2.9.1. Bildobjekte: Bildauflösungen/-formate
DDBStudio unterstützt die im Internet üblichen Bildformate:
- JPG / JPEG – ideal für Fotografien und detailreiche Motive, bei gutem Kompromiss aus Qualität und Dateigröße
- PNG – geeignet für Bilder mit Transparenz oder hoher Farbtreue, z. B. Logos oder Illustrationen
- GIF – selten genutzt, nur sinnvoll für einfache Grafiken oder kleine Animationen, DDBStudio unterstützt animierte GIFs und kann diese auch dynamisch auf die benötigten Auflösungen verkleinern.
- SVG – vektorbasiertes Format, optimal für skalierbare Grafiken und Icons ohne Qualitätsverlust
Bitte beachten Sie: SVG-Dateien können in bestimmten Browsern Sicherheitsrichtlinien unterliegen – verwenden Sie sie daher nur für geprüfte und vertrauenswürdige Inhalte.
Dateien in unkomprimierten Formaten (z.B. .tiff) konvertieren Sie bitte vor dem Upload in .jpg oder .png. PDF-Dateien können nicht zur Repräsentation des Objekts verwendet werden.
Transparente Hintergründe und Animationen
Gerade im Design von DDBstudio mit den abgestimmten farbigen Hintergründen können Sie sehr schöne Effekte mit freigestellten Objektbildern erzielen, also mit Darstellungen, bei denen der Hintergrund eine Alphatransparenz aufweist. Möglich ist dies in den Formaten .png und .gif. Für hochauflösende Bilder mit nuancierter Farbigkeit sollten Sie .png-Bilder verwenden.
Auch animierte .gif-Bilder können Ihre Ausstellung beleben. Gedacht ist dieses Format allerdings für sehr kurze, in Endlosschleife laufende Animationen. Wenn die Bewegtbildabfolge komplexer und länger wird, empfehlen wir, „richtige“ Videos einzusetzen. Sie sind dafür besser geeignet, bieten den NutzerInnen die Möglichkeit, die Wiedergabe zu kontrollieren und werden gestreamt, nicht auf einmal geladen. Dateien für längere .gif-Animationen werden schnell sehr groß.
Anforderungen an Bildauflösungen
Die Bildauflösung (also wie viele Bildpunkte – Pixel – ein Bild hat) bestimmt, wie scharf und klar ein Bild auf dem Bildschirm dargestellt wird. Je höher die Auflösung, desto besser ist die Bildqualität – besonders bei großen oder detailreichen Bildern.
Moderne Bildschirme, Smartphones und Tablets zeigen Inhalte oft in sehr hoher Auflösung an – zum Beispiel in Full HD (1920 × 1080 Pixel) oder sogar 4K (3840 × 2160 Pixel).
Damit ein Bild auf solchen Geräten scharf dargestellt wird, sollte es mindestens so viele Pixel haben wie der Bildschirm.
Wenn Nutzer in das Bild hineinzoomen können sollen, muss das Bild sogar noch größer sein. Zum Beispiel: Wenn ein Bild doppelt so groß angezeigt werden soll (Zoom-Stufe 2), braucht es auch doppelt so viele Pixel in Breite und Höhe.
Grundsätzlich gilt:
- 1400px Breite sollten Bilder mindestens haben, damit sie auf der Website in guter Qualität dargestellt werden.
- Vollformat-Bilder, die als Hintergrund oder in voller Seitenbreite erscheinen, sollten mindestens 1920px Breite aufweisen. Für Retina-Displays (mit doppelter Pixeldichte) empfiehlt sich eine Verdopplung der Auflösung, also z.B. mindestens 3840px in der Breite für Vollbild-Hintergründe.
- Wenn Sie die Zoom-Funktion aktivieren, sollte die hochgeladene Datei deutlich größer sein als die angezeigte Standardgröße – je nach Detailtiefe können das auch 6000px oder mehr sein. Hier empfiehlt sich die höchstmögliche Auflösung, die die herangezoomten Details noch sauber abbildet.
Performance und automatische Bildverarbeitung
Große Bilddateien sehen zwar gut aus, brauchen aber auch länger zum Laden. Besonders bei vielen Bildern kann das die Ladezeit einer Ausstellung verlängern. Zum Glück müssen Sie sich darum nicht kümmern.
DDBStudio übernimmt das automatisch für Sie. Beim Anzeigen der Ausstellung erstellt das System für jedes Bild kleinere Versionen – zum Beispiel für Vorschauen oder für Mobilgeräte.
Das bedeutet:
- Auf einem kleinen Bildschirm (wie einem Smartphone oder Tablet) wird nur eine kleinere Bildversion geladen.
- Auf einem großen Monitor mit hoher Auflösung wird automatisch eine größere, schärfere Version geladen.
So sorgt DDBStudio dafür, dass die Bilder auf jedem Gerät gut aussehen – ohne unnötig lange Ladezeiten. Die dafür benötigten angepassten Varianten eines Bildes werden automatisch beim Laden der Ausstellung durch DDBStudio erzeugt und gespeichert. Das erste Anzeigen einer Ausstellung kann dadurch etwas langsamer sein, da die Bildgenerierung auf dem Server etwas Zeit benötigt. Beim wiederholten Aufrufen werden dann die gespeicherte Bilddateien verwendet und die Ausstellung ist viel schneller geladen.
Fazit:
- Sie dürfen hochauflösende Bilder verwenden
- Sie müssen dies aber nur dann tun, wenn es für die Zoom- oder Detaildarstellung tatsächlich relevant ist
- DDBStudio sorgt in jedem Fall automatisch für die optimale Bildgröße bei der Anzeige der Ausstellung im Frontend
2.9.2. „Bookviewer“-Effekt = Bilderstapel
Medien vom Typ „Bild“ können mehrere Bilddateien umfassen. In der Ausstellung wird dann weiterhin nur ein Bild in einem Seitenabschnitt angezeigt, der Besucher kann dann allerdings über das Bilderstapel -Symbol alle Bilder ansehen:
Ein Klick auf das Bilderstapel-Symbol öffnet eine Lightbox mit allen Bildern dieses Objektes. Die Metadaten über das Info-Symbol („i“) sind dabei für alle Bilder gleich. Alle Bilder stellen somit ein Objekt dar. In der Lightbox können die verschiedenen Bilder zusammenhängend betrachtet werden. Insbesondere für mehrere Seiten eines Buch-Objektes ist diese Option interessant. Der Benutzer kann so die Seiten in der richtigen Reihenfolge nacheinander lesen ohne immer wieder in der Ausstellung die nächste Seite suchen zu müssen.
Am linken und am rechten Bildrand stehen Navigationspfeile zur Verfügung um zum nächsten und vorherigen Bild zu gelangen.
Am unteren Bildrand erscheinen Vorschaubilder aller Bilder in diesem Bilderstapel. Ein Klick auf diese Vorschaubilder bringt Sie zu diesem Bild.
Bezogen auf das aktuelle Bild erscheinen am oberen Bildrand Symbole um in das Bild hineinzuzoomen und bei vergrößerten Bilder die Ansicht zu verschieben. Das Neuladen-Symbol ganz rechts bringt Sie wieder zur ursprünglichen Ansicht zurück.
Ganz rechts oben können Sie den Vollbildmodus aktivieren, die Vorschaubilder ausschalten und die Lightbox-Ansicht mit dem Schließen-Symbol („X“) wieder schließen:
Ganz links oben wird die Anzahl der Bilder in diesem Bilderstapel angezeigt.
2.9.3. Gestaltung mit Zoom und Bildausschnitt: Zoom-Option
Das in DDBStudio integrierte Zoom-Werkzeug ermöglicht es Nutzer*innen, in hochauflösende Bilder hineinzuzoomen. Dies ist besonders bei detailreichen Objekten (z. B. Karten, Gemälden oder technischen Zeichnungen) hilfreich.
Als Kuratorin können Sie darüber hinaus einen initialen Zoom-Ausschnitt definieren. So lenken Sie gezielt die Aufmerksamkeit der Nutzerinnen auf bestimmte Bilddetails. Zum Beispiel: „Schauen Sie mal auf dieses Detail in der oberen linken Ecke des Gemäldes.“ Das Öffnen des Bildes startet dann automatisch die große Bildanzeige (Lightbox), die Zoom-Stufe wird angezeigt und der von Ihnen gewählte Bildausschnitt wird angezeigt.
Diese Möglichkeit bietet vielfältige kuratorische Gestaltungsoptionen und unterstützt ein fokussiertes Ausstellungserlebnis.
In einem Seitenabschnitt mit einem bereits zugeordneten Bildobjekt erscheint dafür ein zusätzlicher Button „Bildausschnitt“.
Hinweis: Verwenden Sie ein Medienobjekt mit mehreren Bilddateien müssen Sie im Auswahlfeld „Datei auswählen“ zunächst das Bild aus der Liste auswählen, für dass der Bildausschnitt festgelegt werden soll.
Klicken Sie nach der Wahl des richtigen Bildes auf den Button, dann öffnet sich ein Auswahldialog in dem Sie durch den Auswahlrahmen den Bildausschnitt für die Zoomansicht festlegen:
Mit der Maus können Sie die kleinen weißen Quadrate verschieben und so den Ausschnitt verändern. Klicken und ziehen Sie außerhalb des vorhandenen Rahmens, legen Sie einen neuen Rahmen fest und müssen nicht alle Ränder einzeln verschieben.
Haben Sie den Rahmen an der richtigen Stelle Ihres Bildausschnittes platziert, klicken Sie unten auf den Button „Auswahl übernehmen“ und die Koordinaten des gewählten Bildausschnitts wird im Feld „Zoom-Optionen“ gespeichert.
Achten Sie bei der Wahl des Bildausschnittes darauf, dass die Bildauflösung für den gewählten Ausschnitt groß genug ist. Testen Sie das Ergebnis in jedem Fall vor der Veröffentlichung selbst. Sonst ist der Bildausschnitt nur unscharf zu erkennen:
Prüfen Sie, ob Ihnen eine größere Bildauflösung zur Verfügung steht.