Bilder für das Web richtig optimieren und speichern
Für eine gute bzw. schnelle Ladezeit Ihrer Website oder Ihres 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 wird erklärt, warum das Zusammenspiel von Bildgröße, Bildformat und Dateigröße so wichtig ist und was dabei beachtet werden muss.
Die richtige Bildgröß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.
Sollten Sie Bilder mit transparentem Hintergrund (zum Beispiel Logos) in Ihre 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ünschnten 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.
Was bei uns sonst immer so los ist.