Welche Größe sollten die Bilder auf meiner Website haben?

Hast du jemals davon gehört, dass Bilder zu groß für deine Website sein können? Ein schönes Bild lässt eine Website lebendig erscheinen und vierzehn Pixel mehr oder weniger fallen nicht wirklich auf, aber es ist wichtig zu verstehen, wie man Fotos für den eigenen Bedarf optimiert.

Heute werden wir also darüber sprechen, wie man für ein optimales Ergebnis die richtige Bildgröße wählt. Es ist einfacher als du denkst und ich bin hier, um dir zu helfen.

Manchmal möchten wir unsere Fotos in jedem Fall so groß wie möglich auf der Website anzeigen lassen, aber das ist nicht immer die klügste Wahl. Warum? Nun, große Bilder werden langsamer geladen und wenn deine Website ewig lädt, sind deine Besucher schneller wieder weg, als dir lieb ist. Und auch bei Google und Co. Kannst du damit nicht punkten.

Halte deine Bilder also so klein wie nötig, mit der besten Qualität wie möglich.

Wie du das in Photoshop am Besten machst, erfährst du gleich. Zuvor widmen wir uns einmal den Bildformaten.

Welches Bildformat sollten deine Bilder haben?

Bevor du also mit dem Größeneinstellen deiner Bilder beginnst, frag dich zuerst, welches Format du verwenden möchtest.

JPG, PNG, GIF – diese Formate stehen zur Wahl.

JPG-Bilder sind kompakt und gut für Fotos geeignet, sie sind meist auch am leichtesten zu bearbeiten. Die Farbqualität kann auch bei komprimierten Bildern gut erhalten werden.

PNG-Bilder sind schärfer, jedoch ein bisschen schwerer; sie sind eine bessere Wahl, wenn du komplexe Grafiken erstellen willst. Für Logos und Bilder mit transparenten Hintergründen wähle ich immer PNG als Dateiformat.

GIF-Bilder sind bekannt für Animationen.


Wenn ich Bilder auf eine Website lade, gehe ich in drei Schritten vor:

1. Ich skaliere die Bilder auf die gewünschte Bildgröße.

2. Ich komprimiere die Dateigröße, sodass sie nicht zu groß für das Internet ist und schnell geladen werden kann.

3. Ich optimiere die Bilder für die Suchmaschinen.

Welche Größe sollten die Bilder für deine Website haben?
(Skalierung deiner Bilder)

Es gibt bestimmte Standardgrößen an die du dich halten kannst, jedoch musst du immer beachten WO du deine Bilder einsetzt.

Soll dein Bild auf der gesamten Bildschirmbreite angezeigt werden, sollte dein Bild 1920px breit sein. Ist dein Bild größer, verbraucht es mehr Speicher und lädt langsamer. Ist es kleiner, wird es unscharf dargestellt.

Hast du z.B. einen Blog mit einer eingestellten Standardbreite, liegt die Bildgröße für dein Bild bei 1080px Breite.

Möchtest du also zwei Bilder nebeneinander setzten, liegt die Breite deiner Bilder jeweils bei ca. 500px. Bei drei Bildern sind dies 340px, bei vier 250px und so weiter.

Natürlich hast du auch hier freie Hand bei der Gestaltung. Möchtest du z.B. zwei Bilder nebeneinander setzten, das rechte Bild soll aber mehr herausstechen, also größer sein, könntest du z.B. Bild 1 (links) 340px breit machen und das größere Bild 2 (rechts) dann ca. 700px breit. Insgesamt solltest du also immer auf die Standardbreite von ca. 1080px kommen (hierbei habe ich etwas Rand addiert, damit die Bilder nicht aneinanderkleben).


Im folgenden Bild veranschauliche ich es dir zum besseren Verständnis:

Welche Dateigröße sollten deine Bilder haben?
(Komprimierung deiner Bilder)

Auch die Größe der Datei spielt eine große Rolle.

Hier halte ich mich an eine Faustregel:

Kleine Bilder liegen bei ca. 50KB. Große Bilder, also die, die über den gesamten Bildschirm gehen, haben ca. eine Dateigröße von maximal 250KB. Icons sollten schnell geladen werden und deshalb nicht mehr als 10KB groß sein.

Nicht immer kann man diese Größen einhalten, aber je näher du dran liegst, desto besser ist deine Ladezeit.

Bilder direkt für Web speichern

Bei Photoshop hast du die Möglichkeit deine Bilder direkt für das Web zu speichern. Hier kannst du die folgenden Dateiformate einstellen: JPG, PNG-8 oder PNG-24. Auch die kostenlose Alternative Gimp bietet diese Funktion. Ich rate dir auch dazu, dies zu tun, damit du direkt eine kleinere Dateigröße fürs Web hast.

Bilder für Suchmaschinen optimieren

Damit du auch bei Google & Co. punkten kannst, solltest du deine Bilder richtig benennen.

Wähle dabei einen aussagekräftigen Dateinamen. Im Idealfall sollte er ein Keyword enthalten. Denn sucht ein Nutzer bei Google z.B. nach dem Wort „Yoga“ und dein Dateiname enthält dieses wichtige Keyword, wird deine Bilddatei höher gerankt.

Bringe das Keyword auch in dem Title-Tag und dem ALT-Tag unter. Dies machst du nachdem du das Bild bereits in WordPress hochgeladen hast.

Aber Achtung: Wenn dein Dateiname nicht zu deinem Inhalt passt, erkennt Google dies und wertet es im schlimmsten Fall ab. Heißt deine Datei also Yoga und in deinem Inhalt geht es nicht um Yoga ist dies nicht gut und du solltest es anpassen.

Fazit

Eigentlich ist es gar nicht so schwer die richtige Bild- und Dateigröße für deine Website zu finden und einzustellen. Dadurch dass du damit diene Ladezeit optimieren kannst, solltest du auch nicht auf diesen wichtigen Schritt verzichten.
Diese Artikel könnten dich auch interessieren

6 Schritte, mit denen du deine Website für SEO optimierst

In Zeiten von Social-Media, für die Website und für Content Marketing ist eine gute Stockfotografie sogar unverzichtbar, um dein Projekt attraktiv und professionell wirken zu lassen. Doch wie wählst du die richtigen Bilder aus? In diesem Blogartikel erfährst du, was du beachten musst, um die passenden Stockfotografien zu finden.

Weiterlesen »

Wie du die richtigen Stockfotos aussuchst

In Zeiten von Social-Media, für die Website und für Content Marketing ist eine gute Stockfotografie sogar unverzichtbar, um dein Projekt attraktiv und professionell wirken zu lassen. Doch wie wählst du die richtigen Bilder aus? In diesem Blogartikel erfährst du, was du beachten musst, um die passenden Stockfotografien zu finden.

Weiterlesen »

Dauerhaft die richtigen Kunden anziehen

Erhalte über persönliche und gezielte Beratung deine unverwechselbare, einzigartige Website. Mit Webdesign, das Klarheit und Kreativität unvergleichlich miteinander verbindet und auf Augenhöhe eine Langzeitlösung verspricht.

Nach oben scrollen

Vereinbare ein kostenloses Kennenlern-Gespräch

Fülle einfach das Kontaktformular mit deiner Anfrage aus und du erhältst schnellstmöglich eine Antwort von mir.