Bildformate

Die Bildformate im Überblick

Einsatzbereich Min. Maße (px) Min. Maße (px) x2 Ausschnitt Safearea
Logo zentriert (1) 170 x 140 340 x 280 scale to fit Volle Auflösung
Logo linksbündig (1) 225 x 100 450 x 200 scale to fit Volle Auflösung
Titelbild Startseite 1920 x 940 3840 x 1880 crop Safearea
Titelbild Inhaltsseite 1920 x 450 3840 x 900 crop Safearea
Bild mit Text - landscape 470 x 248 940 x 496 crop Volle Auflösung
Bild mit Text - portrait 248 x 330 496 x 660 crop Volle Auflösung
Bild ohne Text - landscape 700 x 369 1400 x 737 crop Volle Auflösung
Bild ohne Text - portrait 525 x 700 1050 x 1400 crop Volle Auflösung
Bild - Full Width 1920 x 450 3840 x 900 crop Safearea
Hinweisfenster 570 x 300 1140 x 600 crop Volle Auflösung
2-spaltig - landscape 570 x 300 1140 x 600 crop Volle Auflösung
2-spaltig - portrait 525 x 700 1050 x 1400 crop Volle Auflösung
3-spaltig - landscape 370 x 230 760 x 400 crop Volle Auflösung
3-spaltig - portrait 340 x 453 680 x 906 crop Volle Auflösung
4-spaltig - landscape 285 x 150 570 x 300 crop Volle Auflösung
4-spaltig - portrait 270 x 360 540 x 720 crop Volle Auflösung
Galerie - Vorschaubild 970 x 604 1940 x 1208 crop Volle Auflösung
Speisekartenkategorie 370 x 198 740 x 396 crop Volle Auflösung
Speise 770 x 345 1540 x 690 crop Volle Auflösung
Aktuelles - Bild 770 x 405 1540 x 810 crop Volle Auflösung
Kontakt 370 x 230 740 x 460 crop Volle Auflösung
Galerie-Bilder Hoch-/Querformat Hoch-/Querformat Original (2) Volle Auflösung
Galerie-Detail Hoch-/Querformat Hoch-/Querformat Original (2) Volle Auflösung
Link 330 x 212 680 x 425 crop Volle Auflösung

(1): Immer mit Außenabstand anlegen. Der empfohlene Abstand liegt bei 15 px an jeder Seite. (Tatsächlich kann der nötige Abstand von Datei zu Datei variieren und die Angaben sind ohne Gewähr. Korrigieren Sie entsprechend nach, wenn die Darstellung nicht optimal erscheint.

(2): Die Datei wird automatisch auf eine Miniaturansicht skaliert.

Weitere Informationen zu den Begriffen crop und safearea finden Sie weiter unten.

Hier finden Sie eine grafische Übersicht zu den Bildformaten und können diese als Vorlage herunterladen:

Logo zentriert (Abstand blau markiert)

Logo linksbündig (Abstand blau markiert)

Titelbild Startseite (Safearea rot markiert)

Titelbild Inhaltsseite/Unterseite (Safearea rot markiert)

Bild mit Text - landscape

Bild mit Text - portrait

Bild ohne Text - landscape

Bild ohne Text - portrait

Bild - Full Width (Safearea rot markiert)

Hinweisfenster

2-spaltig - landscape

2-spaltig - portrait

3-spaltig - landscape

3-spaltig - portrait

4-spaltig - landscape

4-spaltig - portrait

Galerie - Vorschaubild

Speisekartenkategorie

Speise

Aktuelles - Bild

Kontakt

Link

Safearea

Als Safearea (deutsch: Schutzbereich) bezeichnet man den Bereich innerhalb einer Grafik, der, wenn diese auf einer Website zum Einsatz kommt, garantiert sichtbar und lesbar ist. Indem Sie sich also an die Vorgaben der Safearea halten, stellen Sie sicher, dass keine Informationen verloren gehen.

Hintergrund des Einsatzes der Safearea ist die Tatsache, dass Homepages auf vielen unterschiedlichen Endgeräten mit unterschiedlichen Auflösungen betrachtet werden, sodass überall eine andere Darstellung erfolgt. Die Safearea garantiert aber, dass die wesentlichen Informationen, die innerhalb des Bereichs liegen, immer im Fokus stehen und nicht abgeschnitten werden.

Safearea - Titelbild Startseite

Hier sehen Sie die Angaben zur Safeare für das Titelbild. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Sie sichergehen wollen, dass diese nicht verloren gehen.

Safearea - Bild (Full Width)

Hier sehen Sie die Angaben zur Safearea für das Titelbild, wenn Sie ein Bild mit voller Breite (Full Width) darstellen möchten. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Sie sichergehen wollen, dass diese nicht verloren gehen.

Begriffserklärung: Ausschnitte

Als Cropping (deutsch: Abschneiden, Stutzen) wird das Beschneiden von Bildrändern zum Zwecke der Bildformatänderung bezeichnet. Dadurch wird verhindert, dass Ränder entstehen oder das Bild in irgendeiner Weise verzerrt werden muss.

Zur Veranschaulichung sehen Sie hier in grau dargestellt das Originalformat des Bildes. Der rot markierte Bereich ist die Zielformatierung, die durch das Cropping erreicht werden soll. Das Bild wird also auf volle Breite und Höhe skaliert.

Als scale to fit (deutsch: Skalierung nach Maß) wird die Erweiterung des Bildausschnitts bezeichnet, sodass kleinere Bildformate passend untergebracht werden können. Dadurch wird die Verzerrung und das Beschneiden eines Bildes vermieden.

Zur Veranschaulichung sehen Sie hier in grau (überlagert von rot) das Originalformat des Bildes. Der rot markierte Bereich ist der Bildausschnitt, der angezeigt wird. Das Originalformat des Bildes bleibt unberührt und wird in das gewünschte Format eingefügt. Dabei entstehen keine Verzerrungen oder Abschnitte an den Rändern.

Die Informationen sind allgemeiner Art und stellen keine Rechtsberatung dar. Das Supportportal erhebt keinen Anspruch auf Vollständigkeit. Änderungen bleiben ohne Vorankündigung jederzeit vorbehalten. Es wird an dieser Stelle darauf hingewiesen, dass die ausschließliche Verwendung der männlichen Form geschlechtsunabhängig verstanden werden soll.