Damit Bilder auf deiner Website scharf, professionell und ohne Qualitätsverlust dargestellt werden, spielen Dateiformat, Auflösung und Seitenverhältnis eine entscheidende Rolle.
Die richtigen Bilddateien
Je nach Verwendungszweck solltest du folgende Formate nutzen:
JPG / JPEG: Ideal für Fotos und große Bilder mit vielen Farben. Gute Komprimierung bei relativ kleiner Dateigröße.
PNG: Perfekt für Grafiken
SVG: Ideal für Logos und Icons, da sie verlustfrei skalierbar sind.
Empfohlene Auflösungen
Hier sind einige Richtwerte für eine scharfe Darstellung auf Desktop- und Mobilgeräten:
Titelbild / Headerbild (Querformat)
Empfohlen: 1920 x 1080 px
Minimum: 1600 x 900 px
Normale Bilder im Querformat
Empfohlen: 1200 x 800 px
Bilder im Hochformat
Empfohlen: 800 x 1200 px
Quadratische Bilder
Empfohlen: 1000 x 1000 px
Ideal für Profilbilder oder Galerien
Logo
Als SVG (bevorzugt)
Alternativ: PNG mit mindestens 500 x 500 px
Hintergrund möglichst transparent
Favicon
32 x 32 px (Standard)
Format: PNG
Format richtig wählen
Ein häufiger Fehler entsteht, wenn man ein Querformat-Bild hochlädt, dieses auf der Website jedoch im Hochformat dargestellt wird.
Das System versucht, das Bild passend darzustellen. Dabei wird hineingezoomt. Durch dieses "Heranzoomen" geht Bildqualität verloren, weil nur ein Ausschnitt des Originals verwendet wird.
Ein Beispiel: Man lädt ein Querformat-Foto hoch. Die Website benötigt jedoch ein Bild im Hochformat.
Das System:
zoomt in das Bild hinein
schneidet somit rechts und links etwas ab
oder vergrößert es künstlich
Ergebnis:
→ Unscharfe Darstellung
→ Wichtige Bildbereiche fehlen
→ Qualitätsverlust
Achte also darauf, das Bild im gewünschten Format hochzuladen.
Beispiele:
Soll das Bild quadratisch angezeigt werden → direkt quadratisch zuschneiden und hochladen.
Wird es im Querformat benötigt → vorab im Querformat zuschneiden.
Wird es im Hochformat dargestellt → bereits im Hochformat vorbereiten.
Bildgröße anpassen im Editor
Wenn im Editor bei der Bildgröße "Automatisch", "Ausfüllen" oder "Skalieren" ausgewählt wird, kann es dazu kommen, dass die Pixel gestreckt werden.
Wichtig ist daher, wie oben beschrieben, das Bild im korrekten Format und in der passenden Auflösung hochzuladen.
Sollte das Bild online nicht schärfer wirken und keine manuelle Anpassung vorgenommen werden, empfiehlt es sich, bei der Bildgröße "Anpassen" zu wählen. In diesem Fall wird das Bild in seiner Originalgröße angezeigt und nicht zusätzlich skaliert.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂