Bildformate
Die Bildformate im Überblick
| Einsatzbereich | Min. Maße (px) | Min. Maße (px) x2 | Ausschnitt | Safearea |
|---|---|---|---|---|
| Unternehmenslogo / Logo zentriert (1) | 170 x 140 | 340 x 280 | scale to fit | Volle Auflösung |
| Unternehmenslogo / 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. Korrigiere 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 findest Du weiter unten.
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 Du Dich also an die Vorgaben der Safearea hältst, stellst Du 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 siehst Du die Angaben zur Safearea für das Titelbild. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Du sichergehen willst, dass diese nicht verloren gehen.
Safearea - Bild (Full Width)
Hier siehst Du die Angaben zur Safearea für das Titelbild, wenn Du ein Bild mit voller Breite (Full Width) darstellen möchtest. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Du sichergehen willst, 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 siehst Du 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 siehst Du 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.
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.