Bildgrößen für Produkte, Webshop & Locations — so werden Fotos perfekt angezeigt

Empfohlene Auflösung, Seitenverhältnis und Dateiformat für Produktbilder, Titelbild und Logo deiner Buchungsseite (Webshop) und Locationbilder — damit nichts unschön beschnitten wird.

Gute Fotos verkaufen — aber nur, wenn sie auch richtig angezeigt werden. Diese Vorgaben kannst du direkt an deine Grafikerin, deinen Fotografen oder dein Team weitergeben. Kurz zusammengefasst:

Produktbilder: 1600 × 1200 Pixel, Seitenverhältnis 4:3 (Querformat), als JPG
Titelbild der Buchungsseite (Webshop): 2520 × 1080 Pixel, Seitenverhältnis 21:9, als JPG — Wichtiges in die Bildmitte
Logo der Buchungsseite: PNG mit transparentem Hintergrund, Querformat, mindestens 120 Pixel hoch
Locationbilder: 1200 × 600 Pixel, Querformat, als JPG

Warum das Seitenverhältnis wichtig ist

Univents zeigt Bilder in festen Rahmen an, damit Buchungsseite und Webshop ruhig und aufgeräumt wirken. Produktbilder erscheinen in einer 4:3-Kachel (Querformat), das Titelbild des Webshops und die Locationbilder in der Übersicht als breiter Streifen.

Dabei gilt:

Bilder, die genau im empfohlenen Format angelegt sind, füllen ihren Rahmen randlos und vollständig.
Quadratische oder hochformatige Produktbilder werden vollständig, aber mit seitlichen Rändern angezeigt. Produktbilder, die breiter als 4:3 sind (z. B. 16:9), werden dagegen an den Seiten beschnitten.
Mit der Lupe (Bild vergrößern) ist immer das ganze Bild zu sehen.
In den Kacheln lädt Univents automatisch eine verkleinerte Vorschau deines Bildes. Erst beim Vergrößern mit der Lupe kommt die große Fassung. So bleiben Buchungsseite und Webshop auch mit vielen Fotos schnell. Kann ein Bild nicht geladen werden, versucht die Seite es automatisch noch einmal und zeigt sonst einen neutralen Platzhalter.

Ein Sonderfall sind gestaltete Menükarten mit Text im Bild: Lege sie unbedingt im 4:3-Querformat an, damit der Text in der Kachel vollständig lesbar bleibt.

Produkt-, Menü- und Gerichtsbilder

Gilt für das Hauptbild, das du im Inventar am Produkt im Abschnitt Stammdaten hinterlegst — es erscheint auf der Buchungsseite, im Webshop, im Produktdetail und in den Paket-Bestandteilen.

Auflösung: 1600 × 1200 Pixel (mindestens 1200 × 900 Pixel)
Seitenverhältnis: genau 4:3 (Querformat) — dann wird in der Kachel nichts abgeschnitten
Dateiformat: JPG für Fotos, PNG nur für Bilder mit transparentem Hintergrund. WebP und iPhone-Fotos (HEIC) kannst du ebenfalls hochladen — Univents wandelt sie beim Hochladen in JPG um (nur sehr kleine Dateien bis 500 KB bleiben unverändert).
Dateigröße: auswählen kannst du Fotos bis 20 MB — größere Fotos werden vor dem Hochladen automatisch verkleinert (lange Kante max. 1600 Pixel), gespeichert werden höchstens 5 MB. Du musst Fotos also nicht vorher bearbeiten.
Weitere Bilder: Bei Rezept-Produkten kannst du im Abschnitt Rezept unter Rezept Bilder bis zu 8 weitere Bilder hochladen. Sie erscheinen auf der Buchungsseite in der Bildergalerie des Produkts hinter dem Hauptbild und brauchen dasselbe Format.

Tipp: Motiv mittig platzieren und rundherum etwas Luft lassen — so wirkt das Bild in jeder Ansicht ausgewogen.

Titelbild der Buchungsseite (Webshop)

Gilt für das große Bild oben auf deiner Buchungsseite im Design Webshop und auf Ticketseiten. Du lädst es in der Buchungsseite in Sektion 01 Details im Feld Hero-Bild hoch.

Auflösung: 2520 × 1080 Pixel
Seitenverhältnis: 21:9 (breites Querformat)
Dateiformat: JPG; PNG und WebP gehen auch
Dateigröße: auswählen kannst du Fotos bis 20 MB — größere Fotos werden vor dem Hochladen automatisch verkleinert (lange Kante max. 2560 Pixel), gespeichert werden höchstens 5 MB. Du musst das Titelbild also nicht vorher bearbeiten.
Anzeige im Webshop: über die volle Breite als Streifen, 192 Pixel hoch auf dem Handy und 256 Pixel ab dem Tablet. Darüber liegen eine leichte Abdunklung und links dein Seitentitel bzw. Slogan.
Beschnitt im Webshop: Auf dem Handy siehst du fast das ganze Bild. Auf einem breiten Monitor ist der Streifen dagegen viel flacher als 21:9 — dort bleibt nur ein waagrechter Streifen aus der Bildmitte sichtbar (etwa das mittlere Drittel der Bildhöhe), oben und unten wird abgeschnitten.
Anzeige auf Ticketseiten: 16:9 auf dem Handy, 21:9 ab dem Tablet — dort ist fast das ganze Bild zu sehen.

Tipp: Wähle ein ruhiges Motiv ohne Text im Bild und lege das Wichtigste in die Mitte — waagrecht und senkrecht. Die linke Bildhälfte sollte nicht zu unruhig sein, weil dort der Titel steht.

Logo der Buchungsseite

Gilt für das Logo, das du in Sektion 01 Details im Feld Logo hochlädst. Bleibt das Feld leer, verwendet die Seite dein Workspace-Logo.

Dateiformat: PNG mit transparentem Hintergrund ist ideal; JPG und WebP gehen auch
Form: Querformat, ohne breiten leeren Rand um das Logo herum
Auflösung: mindestens 120 Pixel hoch, z. B. 600 × 200 Pixel
Dateigröße: maximal 5 MB
Anzeige: Das Logo erscheint klein in der Kopfzeile (je nach Design 24 bis 40 Pixel hoch) und wird nie beschnitten, sondern immer vollständig eingepasst. Ein breiter leerer Rand lässt es deshalb kleiner wirken.

Locationbilder

Gilt für die Fotogalerie deiner Eventlocations — sie erscheinen in der Locationauswahl auf der Buchungsseite und im Location-Detail.

Das ist nicht das Titelbild oben auf der Buchungsseite: Dieses Hero-Bild lädst du in der Buchungsseite in Sektion 01 Details im Feld Hero-Bild hoch — siehe dazu den Abschnitt Titelbild der Buchungsseite (Webshop) oben in diesem Artikel.

Format: Querformat, z. B. 1200 × 600 Pixel — das Hauptmotiv mittig platzieren
Anzeige: In der Übersicht wird das Bild als breiter Streifen angezeigt; oben und unten kann dabei etwas beschnitten werden. Beim Anklicken zum Vergrößern ist immer das ganze Bild zu sehen.
Dateiformat: JPG; PNG und WebP gehen auch
Dateigröße: auswählen kannst du Fotos bis 20 MB pro Bild, z. B. direkt vom Fotografen — sie werden vor dem Hochladen automatisch verkleinert (lange Kante max. 2560 Pixel), gespeichert werden höchstens 5 MB. Du musst die Fotos also nicht vorher bearbeiten. In der Übersicht laden auch große Dateien schnell, weil dort eine verkleinerte Vorschau gezeigt wird.
Anzahl: bis zu 12 Bilder pro Location

Kurz-Spezifikation zum Weitergeben

Diese Tabelle kannst du 1:1 an deine Designerin oder Agentur schicken:

	Produktbilder	Titelbild Webshop	Logo Buchungsseite	Locationbilder
Auflösung	1600 × 1200 px (mind. 1200 × 900)	2520 × 1080 px	mind. 120 px hoch, z. B. 600 × 200 px	1200 × 600 px
Seitenverhältnis	genau 4:3 (Querformat)	21:9, Wichtiges in die Mitte	Querformat, ohne leeren Rand	Querformat, Hauptmotiv mittig
Dateiformat	JPG (PNG nur mit Transparenz)	JPG	PNG mit transparentem Hintergrund	JPG
Max. Dateigröße	20 MB auswählbar, wird automatisch verkleinert (gespeichert max. 5 MB)	20 MB auswählbar, wird automatisch verkleinert (gespeichert max. 5 MB)	5 MB	20 MB auswählbar, wird automatisch verkleinert (gespeichert max. 5 MB)
Anzeige	4:3-Kachel, randlos bei exaktem 4:3	Streifen über die volle Breite, 192 bis 256 px hoch, oben/unten beschnitten	24 bis 40 px hoch, nie beschnitten	breiter Streifen, oben/unten ggf. beschnitten

Häufige Fragen

Was passiert mit quadratischen Bildern? Produktbilder im Quadrat- oder Hochformat werden vollständig angezeigt, bekommen aber seitliche Ränder in der Kachel. Nichts geht verloren — fürs sauberste Ergebnis empfehlen wir trotzdem 4:3.

Welches Dateiformat ist das richtige? Für Fotos JPG, für Logos und Grafiken mit transparentem Hintergrund PNG. WebP musst du nicht extra erzeugen: Produktfotos wandelt Univents beim Hochladen ohnehin in JPG um, und JPG funktioniert überall — auch in Angeboten und anderen PDFs.

Warum wird mein Titelbild im Webshop so stark beschnitten? Der Streifen oben im Webshop ist auf breiten Bildschirmen viel flacher als jedes Foto. Lege das Titelbild deshalb in 21:9 an und das Wichtige in die Mitte — dann bleibt es auf Handy und Monitor sichtbar.

Kann ich eine PDF als Produktbild hochladen? Nein — PDFs können im Browser nicht als Bild angezeigt werden. Exportiere die Seite (z. B. eine Menükarte) als JPG oder PNG und lade diese Datei hoch.