Welche Bildgröße die richtige für deine Website ist, kommt darauf an, wo 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 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 ist. Die Höhe eines Bildes kannst du in den Bild-Einstellungen unter “Fixe Höhe” definieren und nachschauen.
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.
Dateigröße
Als Faustregel für Bilder gilt: Große Bilder, die über die volle Breite gehen, sollten maximal ca. bis 900 kB haben. Bilder im Inhalt sollten kleiner sein (ca. maximal ungefähr 200 – 600 kB). Die Dateigröße kann je nach Bildmotiv jedoch variieren, auch wenn die Bilder grundsätzlich gleich groß sind.
Bilder fürs Web speichern und komprimieren
Wir empfehlen, die Bilder vor dem Hochladen 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.