Optimale Bildgröße für Website - So machst du es richtig!
Optimale Bildgröße für Website: Bilder/Fotos spielen eine bedeutende Rolle bei der Gestaltung einer Webseite. Wir schätzen Bilder sehr. Aktuell gilt die Devise: je größer, desto besser. Allerdings kommt es häufig vor, dass Fotos in einer viel zu großen Dateigröße hochgeladen werden, was zu einer langsamen Ladezeit der Webseite führt.
Das kann sowohl Besucher vertreiben, die im Internet wenig Geduld haben, als auch von Google abgestraft werden, weil die Website zu langsam lädt.
Wie also können Fotos hochgeladen werden, die die Ladezeit nicht beeinträchtigen, aber dennoch gut aussehen? Und welche Maße sind die Richtigen? Hier erfährst du, wie es geht!
Bildgröße Website KB: Richtige Bildgrößen für Websites festlegen – die Grundlagen
Optimale Bildgröße Website: Bevor ich dir zeigen kann, mit welchen Tools du deine Bilder problemlos auf die richtige Größe anpasst, ist es wichtig, die Grundlagen zu verstehen, damit du weißt, was du da überhaupt machst.
Bildgröße für Web optimieren
Bei der Bearbeitung von Bildern spielen verschiedene Parameter eine Rolle! Es gibt u. a.:
Die Dateigröße = Speichergröße in KB und MB
Das Bildformat = in welchem Format wird das Bild gespeichert: jpg, png, gif, svg, webp, avif
Die Bildgröße = die Breite und Höhe des Bildes in Pixel
Die Auflösung = 72 DPI, 96 DPI oder 300 DPI
Im Folgenden schauen wir uns jeden dieser Punkte eingehend an.
Welches Format sollten Bilder im Web haben?
Die Auswahl des richtigen Bildformats hängt natürlich vom Verwendungszweck ab:
JPG (auch JPEG) eignet sich am besten für Fotos und Situationen, in denen Farbgenauigkeit wichtig ist. Es bietet eine gute Komprimierung bei hoher Bildqualität. Es ist das Standardformat im Web. Daher verwenden wir dieses Format für alle Bilder auf der Website, außer solchen mit transparenten Hintergründen, dafür kommt nun PNG zum Einsatz.
PNG ist ideal für Logos und Grafiken mit transparenten Hintergründen. Es kann ebenfalls komprimiert werden, wobei jedoch eine Farbreduktion auftreten kann, da musst du das Ergebnis testen, sieht es noch gut aus? PNG eignet sich besser für freigestellte Bilder mit transparentem Hintergrund, sowie für Logos und Grafiken ohne Farbverlauf, also einfache Farbflächen. Transparente Hintergründe können nur im PNG-Format (oder Gif-Format) erstellt werden.
GIF ist geeignet für Animationen, wie animierte Grafiken. Das können die anderen Formate nicht leisten. Willst du also eine Animation aus Grafiken erstellen, kommst du nicht um das Gif-Format herum.
SVG wird z. B. oft als Alternative zu Logos mit transparentem Hintergrund im PNG-Format gewählt, da die Qualität besser ist. Allerdings können SVG-Dateien nicht in WordPress hochgeladen werden. Hierfür ist ein Plugin wie z.B. SVG Support erforderlich. Der Vorteil von SVG: Eine SVG-Datei ist zwar eine Grafik, welche allerdings nicht auf Pixeln, sondern auf sogenannten Pfaden basiert. Das bedeutet, dass SVG-Bilder animiert, per HTML oder CSS manipuliert und problemlos skaliert werden können. Und die Dateigröße ist auch kleiner im Verhältnis zu den anderen Formaten.
WebP wird immer häufiger eingesetzt und ist ein neueres Format. Du solltest deine Bilder als WebP speichern, oder von einem Plugin umwandeln lassen, denn deine Website-Geschwindigkeit erhöht sich dadurch deutlich!
AVIF ist ebenfalls ein sehr neues Format und komprimiert die Bilder sogar noch stärker bei gleichbleibender Qualität wie WebP. Weil es so neu ist, unterstützt es zur Zeit dieses Blogartikels noch nicht jeder Browser. Dennoch gibt es schon Plugins für WordPress die deine Bilder als AVIF umwandeln und ausliefern können.
Welche Größe sollten Bilder für die Website haben?
Die passende Bildgröße für deine Website hängt davon ab, wo die Bilder verwendet werden sollen. Es ist empfehlenswert, die Bilder in der Größe hochzuladen, die tatsächlich benötigt wird. Hier zeige ich dir, wie du die optimalen Größen ermitteln kannst.
Für Webseiten gelten typischerweise folgende optimale Bildgrößen:
Bilder in voller Breite (die über die gesamte Bildschirmbreite gehen) sollten 1920px breit sein, um eine klare Darstellung zu gewährleisten. Zu kleine Bilder wirken unscharf, während zu große Bilder unnötig Speicherplatz beanspruchen und längere Ladezeiten verursachen.
Die Höhe für den Kopfbereich sollte bis zu 800 Pixel hoch sein, wenn du Above the fold, also das was der Besucher zuerst sieht, Bildschirmfüllend einsetzen willst. Ich habe mit
1920 x 800 Pixeln die besten Ergebnisse erzielt, also für das erste Bild im Kopfbereich, auch Hero genannt.
Für spezifische Einsatzbereiche reduziert sich die Breite entsprechend. Unten findest du eine Skizze, die als Leitfaden dient, um dir zu zeigen, wie breit das Bild in Pixel je nach Verwendungszweck sein sollte:
Auflösung Bilder Web DPI: Hier zeige ich dir eine Möglichkeit, die genaue Bildgröße direkt auf deiner Website herauszufinden:
Bildergrößen Website herausfinden:
Bildergrößen Website herausfinden: Das kannst du mit deinem Browser machen. Hier im kurzen Video zeige ich dir wie es geht.
Wie groß sollten deine Bilder sein? Welche Dateigröße ist ideal?
Generell gilt für Website-Bilder: Große Bilder, die die gesamte Breite einnehmen, sollten höchstens zwischen 100 und 250 KB groß sein. Kleinere Bilder, die etwas über die halbe Breite des Darstellung-Bereiches gehen, sollten um die 60 KB nicht überschreiten.
Bei Icons sollte die Größe maximal 5 – 15 KB betragen, je nach Größe.
Es mag nicht immer möglich sein, aber dies sind gute Richtwerte, soweit es die Qualität zulässt. Versuche, dich diesen Werten so gut wie möglich anzunähern. Google wird dich dafür belohnen, wenn deine Website schneller lädt!
Auflösung Bilder Website: Was ist die optimale Auflösung für Bilder im Internet?
Es ist wichtig, dass deine Bilder klar und unverzerrt, also nicht zu pixelig dargestellt werden. Eine Komprimierung ist sinnvoll, sollte aber die Bildauflösung nicht beeinträchtigen.
Auflösung Bilder Web DPI
Es stellt sich oft die Frage: Welche Auflösung soll ich für Website-Bilder nehmen? 72 DPI, 96 DPI oder gar 300 DPI?
Die Antwort lautet: Vollkommen egal und irrelevant! Ein Bild hat sagen wir 1920 x 800 Pixel, einmal mit der Auflösung 72 DPI und einmal 300 DPI. Das hat NUR für den Druck Bedeutung, nicht für die Darstellung am Bildschirm! Bei höherer Auflösung sind mehr Bildpunkte zum Drucken vorhanden, das brauchen wir aber am Bildschirm nicht! Da gilt alleine die Größe des Bildes!
Es empfiehlt sich, einfach die Bildqualität zu überprüfen, indem man sie in der gewünschten Größe auf dem Bildschirm betrachtet, so wie sie auf der Website erscheinen soll. Das ist die beste Vorgehensweise, wenn du dir unsicher bist.
Wie kann man Bilder für das Web speichern?
Photoshop bietet auch die Option, Bilder komprimiert für das Web zu abzuspeichern. Falls du Photoshop verwendest, geh auf „Datei“ --> „Für Web speichern“. Anschließend kannst du das Dateiformat (JPG, GIF, PNG-8 oder PNG-24) im entsprechenden Menü auswählen und die Bilder so optimiert abspeichern. Trotzdem solltest du die Bilder hinterher bei ilove.img.com noch einmal komprimieren, denn da kannst du noch einmal die Dateigröße bis zu 20 – 30 % verringern!
Mit dem Grafikprogramm Gimp ist es möglich, Bilder direkt komprimiert für das Web zu speichern. Allerdings musst du dafür ein Plugin installieren. Das Plugin ist leider nur noch zum Kauf verfügbar. Google nach „Gimp Plugin Save for Web“. Dann wirst du es finden. ALLERDINGS! Da du die Bilder auch bei iloveimg.com komprimieren kannst, ist es im Grunde überflüssig 😊.
So sieht der Einsatz vom Plugin bei Gimp aus:
Bildgröße mobile Website
Für die mobile Version deiner Website kannst du auch explizit für die mobile Ansicht ein anderes Bild verwenden. Vor allem wenn das Bild eine große Dateigröße hat, und/oder sich einfach in der mobilen Version nicht gut darstellen lässt.
Bildgröße mobile Website: Für die mobile Version eignen sich Bilder bis 600 Pixel Breite. Die meisten Geräte habe je nach Hersteller verschiedene Bildschirmauflösungen und darum ist 600 Pixel ein guter Durchschnitts-Wert. Außerdem verringert sich die Dateigröße und deine Website wird auf mobilen Geräten dann schneller geladen. Dazu muss ich anmerken: Google misst die mobile Version, die ist ausschlaggebend!
Praktische Tools zur Optimierung und Aufbereitung von Bildern für das Web
Wenn du Bilder direkt von deiner Kamera nutzt, sind sie sehr groß in der Pixelanzahl und damit Kilobyte. Bevor du sie auf deine Webseite hochlädst, solltest du sie unbedingt optimieren!
Dabei empfehlen sich folgende Schritte:
- Skalierung der Bilder für die Webseite:
Reduziere die Größe der Bilder auf die tatsächliche Breite und Höhe, die sie auf der Webseite haben sollen. Die empfohlenen Breiten für die Bilder kennst du ja bereits.
Zum Skalieren eignen sich die üblichen Grafikprogramme, allerdings zeige ich dir heir wie du am schnellsten vorgehst. Diese Arbeitsweise nutze ich auch:
Du gehst auf Iloveimg: https://www.iloveimg.com/de und klickst dort auf „Bild skalieren“, lädst dein Bild hoch und verkleinerst es damit.
- Komprimierung der Bilder für die Webseite:
An gleicher Stelle, mit dem Button ganz links „Bild skalieren“ verringerst du die Dateigröße der Bilder durch Komprimierung, um sicherzustellen, dass sie nur wenige Kilobyte groß sind. Dies ist entscheidend, damit die Bilder schnell geladen werden. An Dateigröße bzw. Kilobyte, kannst du bis zu 80 % verringern. Das ist enorm und ich kenne kein weiteres Tool was so gut komprimiert. Wenn du eins kennst das besser ist, lass doch bitte einen Kommentar hier und lass es die anderen Leser und mich wissen. Danke dafür!
Hier ein paar Tools zur Bildoptimierung:
Iloveimg: https://www.iloveimg.com/de
Photoshop: https://www.adobe.com/at/products/photoshop
Gimp: https://www.gimp.org/
Wie kann man Bilder für Suchmaschinen optimieren?
Beginne unbedingt damit, Bilder mit einem Dateinamen zu benennen, der das Keyword der Seite enthält, auf der du das Bild einfügst!
Der Dateiname spielt eine wichtige Rolle bei der Indexierung durch Google. Wenn du zum Beispiel in der Google Bildersuche nach dem Wort "Hundefutter" suchst, werden Bilder mit dem Dateinamen "hundefutter.jpg" höher eingestuft als Bilder mit dem Dateinamen der Kamera, oder einer anderen Bezeichnung die nicht zu deinen Keywords gehört.
Nach dem Hochladen der Bilder ist es wichtig, das Schlüsselwort auch im Titel- und Alt-Tag des Bildes zu verwenden!
Google erkennt den Zusammenhang zwischen dem Inhalt deines Textes und den von dir verwendeten Bildern. Daher ist es ratsam, deine Bilder auch in die passenden Textabschnitte einzufügen.
Fazit:
Du solltest deine Bilder auf jeden Fall optimieren. Daraus resultieren eine schnellere Ladezeit deiner Website und eine bessere Platzierung in den Suchergebnissen bei Google und Co.
Hier habe ich dir genau gezeigt wie es geht und du brauchst es nur nachzumachen! Viel Spaß beim Optimieren deiner Bilder und einer besseren Platzierung dadurch!
FAQ - Häufig gestellte Fragen zu optimale Bildgröße für Website
Welches Bildformat ist für die Homepage am besten?
Für Logos nimmst du am besten PNG, wenn sie keinen Farbverlauf haben. Für alle anderen Bilder JPG oder PNG, wenn sie einen transparenten Hintergrund haben sollen. Bei Animationen eignet sich am besten GIF. Wenn du Dateigröße sparen willst, solltest du deine JPG und PNG-Dateien in WebP umwandeln, oder noch besser in AVIF. Letzteres wird noch nicht von allen Browsern unterstützt, zur Zeit dieses Artikels.
Welche Bildgröße ist am besten?
Für den Headerbereich 1920 x 800 Pixel, für Bilder über die halb Breite entsprechend um die 600 Pixel bei einem Darstellungsbereich der Website von 1080 Pixel Breite. Für das Logo eignet sich meist 300 px mal 80 Pixel Höhe.
