know
exactly
how.

Wie speichere ich Bilder richtig für meine Website?

Bilder für das Web richtig optimieren und speichern

Für eine gute bzw. schnelle Ladezeit deiner Website oder deines Webshops sind hauptsächlich die Dateigrößen der Bilder ausschlaggebend. Daher ist es naheliegend, die Bilder vor dem Upload für das Web vorzubereiten bzw. zu optimieren.

In diesem Beitrag erklären wir dir, warum das Zusammenspiel von Bildgröße, Bildformat und Dateigröße so wichtig ist und was du dabei beachten musst.

Die richtige Bild­größe für optimales Website Design

Beim Einbau von Bildern wird oft der Fehler gemacht, dass sie in der Originalgröße hochgeladen, aber auf der Website nur in einer Größe von zum Beispiel 600 x 800 Pixel dargestellt werden. Das Originalbild wird zwar verkleinert angezeigt, das betrifft aber ausschließlich die Darstellung am Bildschirm und nicht die Dateigröße!

Wie groß das Bild sein muss, hängt davon ab, wie groß es auf der Website dargestellt werden soll. Ein Bild, das in einer schmalen Spalte angezeigt wird, muss natürlich nicht so groß sein wie ein Sliderbild, welches über die gesamte Seitenbreite geht. Als Faustregel gilt jedoch, die Bilder nicht größer als mit einer Pixelbreite von 1920px abzuspeichern.

Das korrekte Bildformat für kürzere Ladezeiten Ihrer Website

Für Bilder, die im Web präsentiert werden, müssen wir uns vor allem mit den Formaten JPG und PNG beschäftigen. Standardmäßig verwendet man das Format .jpg, da dieses am stärksten komprimiert werden kann. Das bedeutet, dass die Dateigröße verkleinert wird, was eine kürzere Ladezeit zur Folge hat.

Solltest du Bilder mit transparentem Hintergrund (zum Beispiel Logos) in deine Dateiverwaltung hochladen, empfiehlt es sich das PNG-Format zu wählen, da mit diesem Transparenzen gespeichert werden. Beim Format SVG handelt es sich um eine Vektorgrafik, die verlustfrei skalierbar ist. Hinsichtlich seiner Dateigröße ist dieses Format äußerst attraktiv, jedoch wird es nur von modernen Browsern unterstützt.

Optimierte Dateigrößen für ein besseres Ranking Ergebnis in Google

Für Web-Bilder ist auch die Dateigröße ein wichtiger Faktor. Hier gilt als Regel: Bilder sollten nie größer als 1 MB sein. Die richtige Dateigröße ist auch für Google ein ausschlaggebender Punkt: Zu große Bilddateien werden als schlecht bewertet und werden im Ranking weiter hinten platziert.

Schritt für Schritt in Photoshop:
1. Bild auf den gewünschten Ausschnitt bzw. auf die gewünschte Proportion zuschneiden.
2. Datei für das Web exportieren.
3. Die Qualität des Bildes so weit verringern, dass mit freiem Auge kein starker Qualitätsverlust bemerkbar ist und das Bild auf die gewünschten Pixelmaße bringen.
4. Bild benennen und Zielort der Datei auswählen. Wichtig: Beim Dateinamen darauf achten, dass keine Umlaute, Akzentbuchstaben, fremdländische Zeichen oder Ligaturen enthalten sind, da diese auf fast allen Webservern zu Problemen führen.

immer auf
augen­höhe.

Was bei uns sonst immer so los ist.

11. Juli 2024

WESEO bringt dein Hotel durch eine gute User-Experience an vorderste Front, was zu mehr zufriedenen Gästen und einer einfacheren Handhabung deiner Website führt.

let’s
talk.

WESEO ist eine Digitalagentur in Graz, Pöllau, Wien, Salzburg und Meran, die mit holistischen Ansätzen für zufriedene Kund*innen arbeitet, von der Strategieentwicklung über die professionelle Umsetzung deiner Website, deines Onlinemarketings und deines CRMs bis hin zur laufenden Betreuung.