Warum Entscheidungen im Website-Projekt leichter werden, wenn jemand mitdenkt
Ein klar gehaltener Rahmen bringt Orientierung – und macht Entscheidungen im Webdesign-Projekt einfacher.
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.
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.
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:
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.
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
Was gute Zusammenarbeit im Website-Projekt ausmacht
Eine starke Zusammenarbeit im Website-Projekt entsteht dort, wo Technik, Tools und Zuständigkeiten nicht im Mittelpunkt stehen.
Wie Klarheit in komplexen Website-Projekten entsteht
Warum Websites mit vielen Antworten oft trotzdem unklar bleiben – und wie gute Fragen helfen, Richtung und Verständnis zu schaffen.
Wenn die Arbeit an der Website schwerer wird, als sie sein sollte
Warum sich manchmal Arbeit an der Website schwer anfühlt – und weshalb fehlende Orientierung oft mehr blockiert als fehlende Inhalte.
Drei typische Momente, in denen Unternehmen spüren, dass ihre Website nicht mehr passt
Woran Unternehmen merken, dass ihre Website nicht unterstützt – drei typische Praxisbeobachtungen aus Website-Projekten.
Warum gute Websites nicht alles erklären müssen
Warum Haltung, Fokus und Struktur mehr Wirkung entfalten als lange Texte und ellenlange Erklärungen.
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.
