Wie groß sollten meine Bilder sein (Bild- und Dateigröße)?

Welche Bildgröße die richtige für deine Website ist, kommt darauf an, wo im Website Creator sie genau eingesetzt werden. Wird ein Bild als zu große Datei hochgeladen, ist das Ergebnis eine schlechte Ladezeit der Website (vor allem auch wichtig bei SEO). Das ist sowohl für Besucher ohne Geduld oder schlechtem Internet, als auch Google nicht optimal.

Für die Bearbeitung spielen diese Parameter eine Rolle:

  • Bildgröße: Breite und Höhe des Bildes (Maßangabe in Pixel)
  • Dateigröße: Speichergröße in kB und MB

Bildgröße

Im Idealfall sind die Bilder nur so groß, wie sie tatsächlich benötigt werden. Dabei unterscheiden wir im Website Creator zwischen Header- und Inhaltsbilder.

Headerbilder und Inhaltsabschnitte-Hintergrundbilder

Headerbilder füllen meistens (je nach gewähltem Design) die gesamte Bildschirmbreite aus und sollten daher 1920px breit sein. Mit dieser Größe bist du auf der sicheren Seite. Vorlagen, wo die Headerbilder nicht über die gesamte Breite gehen (z.B. Designvorlage Architekt oder Elektro Service), können auch nur 1000px sein.

Bilder im Inhalt

Die Bildgröße für Inhaltsbilder kann variieren, da die Größe frei wählbar ist. Ein Inhaltsbild ist normalerweise aber nicht breiter als 960px, da dies die Standardbreite von Layouts im Website Creator ist. Die Höhe eines Bildes kannst du in den Bild-Einstellungen unter “Fixe Höhe”definieren und nachschauen.

In den Bild-Einstellungen findest du die Höhe des Bildes, sofern du “Fixe Höhe” aktiviert hast.

Als Kontrolle kannst du nach dem Einfügen immer checken, ob das Bild unscharf oder verpixelt aussieht. Ist dies der Fall, ist die Bildgröße zu klein.

Für Kenner:
Wenn du dich mit dem Entwickler-Tool im Browser vertraut bist, kannst du auch dieses benutzen, um die Bildgröße festzustellen. Im Firefox und Chrome Browser drücke für das Öffnen des Entwicklertools das Tastaturkürzel Cmd+Option+I (Mac) oder Strg+Shift+I (Windows).

Alternativ kann auch es auch über das Browser-Menü geöffnet werden:
• Chrome: Anzeigen → Entwickler → Entwicklertools
• Firefox: “Web-Konsole” vom Web-Entwickler Untermenü im Firefox-Menü (oder Extras-Menü, wenn du die Menüleiste aktiviert hast oder Mac OS X benutzt)
Fahre mit der Maus über das Bild, um die Bildgröße angezeigt zu bekommen.

Beispiel, wie das Entwicklertool im Chrome Browser die Bildgrösse anzeigen kann.

Dateigröße

Als Faustregel für Bilder gilt: Große Bilder, die über die volle Breite gehen, sollten maximal 500 – 500 kB haben. Bilder im Inhalt sollten kleiner sein. Die Dateigröße variiert auch je nach Bildmotiv, auch wenn die Bilder grundsätzlich gleich groß sind.

Bilder fürs Web speichern und komprimieren

Wir empfehlen, die Bilder vor dem Hochladen im Website Creator in der richtigen Größe zuzuschneiden und weboptimiert zu speichern (z.B. Photoshop oder Gimp). Es gibt auch Onlinetools zur Komprimierung (z.B. iloveimg oder tinyjpg) und auch zum Zuschneiden (bildverkleinern.com), falls du selbst kein Programm besitzt. Achte bei der Komprimierung darauf, dass die Bilder nicht zu stark komprimiert und dadurch unscharf oder verpixelt werden. Mögliche Bildformate sind JPG und PNG.

Updated on 6. May 2022

Was this article helpful?

Related Articles

Do you need support?
Deine Lösung steht noch nicht in den FAQ? Keine Sorge, wir sind für dich da.
Kontaktiere uns!