Bilder spielen eine entscheidende Rolle bei der Gestaltung einer Website. Wir schätzen Bilder sehr, und im Moment gilt oft die Devise: je grösser, desto besser.
Allerdings werden Bilder häufig in viel zu grossen Dateigrössen hochgeladen, was zu einer langsamen Ladezeit der Website führt. Das kann Besucher verärgern, die im Internet nicht viel Geduld haben, und auch von Google negativ bewertet werden.
Wie kannst du also Bilder hochladen, die die Ladezeit nicht beeinträchtigen, aber dennoch gut aussehen?
Das ist durchaus möglich. Hier erfährst du, wie es geht!
Die Grundlagen für die richtige Grössenanpassung von Bildern für Websites
Bevor ich dir zeige, mit welchen Tools du deine Bilder ganz einfach auf die richtige Grösse verkleinern kannst, ist es wichtig, die Grundlagen zu verstehen.
Bei der Bearbeitung deiner Bilder spielen verschiedene Parameter eine Rolle:
Bildformat: Hierbei handelt es sich um das Dateiformat, in dem das Bild gespeichert wird, wie z.B. JPEG, PNG, GIF oder SVG.
Bildgrösse: Dies bezeichnet die Breite und Höhe des Bildes in Pixeln.
Dateigrösse: Das ist die Speichergrösse des Bildes in Kilobyte (KB) oder Megabyte (MB).
Im Folgenden gehe ich detailliert auf jeden dieser Punkte ein.
Welches Bildformat ist am besten für Website?
Die Auswahl des richtigen Bildformats hängt vom Verwendungszweck ab:
JPEG (JPG): Dieses Format eignet sich hervorragend für Fotos und Situationen, in denen Farbgenauigkeit wichtig ist. Es lässt sich gut komprimieren, wodurch eine gute Bildqualität bei kleinerer Dateigrösse erreicht wird. Auf unserer Website verwenden wir dieses Format für alle Bilder ausser solchen mit transparenten Hintergründen.
PNG: PNG eignet sich besonders gut für Logos und Grafiken mit transparenten Hintergründen. Es kann ebenfalls komprimiert werden, behält dabei aber eine höhere Farbgenauigkeit als JPEG. PNG ist ideal für Bilder mit freigestellten, transparenten Hintergründen, da nur dieses Format solche Hintergründe unterstützt. Beachte jedoch, dass PNG-Dateien grössere Dateigrössen haben können.
SVG: SVG-Dateien sind eine ausgezeichnete Wahl für Logos und Grafiken auf deiner Wix-Website. Sie bieten eine hohe Qualität und Skalierbarkeit, ohne an Schärfe zu verlieren. Du kannst SVG-Dateien problemlos in den Wix-Editor hochladen und direkt in deine Website einbinden.
GIF: GIF eignet sich gut für Animationen wie animierte Grafiken.
Durch die Auswahl des richtigen Formats für den jeweiligen Verwendungszweck kannst du die Bildqualität optimieren und die Ladezeit deiner Website verbessern.
Wie sollten Bilder für deine Website dimensioniert sein?
Die optimale Bildgrösse für deine Website hängt davon ab, wie und wo die Bilder verwendet werden. Es ist empfehlenswert, Bilder nur in der erforderlichen Grösse hochzuladen.
Hier ist eine Anleitung, um die richtigen Abmessungen zu ermitteln:
Für Bilder, die die gesamte Bildschirmbreite ausfüllen sollen (Vollbreite), ist eine Breite von 1920 Pixeln ideal. Wenn solche Bilder zu klein sind, können sie unscharf wirken. Zu grosse Bilder benötigen unnötig viel Speicherplatz und verlängern die Ladezeiten der Website.
Je nach Verwendungszweck sollte die Breite des Bildes deutlich reduziert werden. Unten findest du eine Skizze, die dir eine Orientierung bietet, welche Breite in Pixeln für unterschiedliche Einsatzbereiche empfohlen wird:
Die ideale Dateigrösse für deine Bilder: Wie gross sollte eine Bilddatei sein?
Als Richtlinie für Bilder auf deiner Website gilt: Grosse Bilder, die die gesamte Breite ausfüllen, sollten idealerweise zwischen 130 und 250 KB gross sein. Kleinere Bilder sollten ungefähr 50 KB nicht überschreiten.
Icons müssen besonders schnell geladen werden und sollten daher maximal 10 KB gross sein.
Es ist nicht immer möglich, aber dies sind gute Richtwerte, soweit die Qualität des Bildes nicht darunter leidet. Strebe an, diese Werte so genau wie möglich zu erreichen, um die Ladezeiten deiner Website zu optimieren.
Die richtige Auflösung für optimale Bildqualität
Bilder sollten klar und nicht verzerrt sein. Eine Komprimierung ist bis zu einem gewissen Grad sinnvoll, jedoch sollte die Auflösung des Bildes nicht darunter leiden.
Die beste Methode zur Überprüfung der Bildqualität ist es, das Bild in der gewünschten Grösse auf dem Bildschirm anzusehen, wie es auf deiner Website erscheinen soll.
Wie Bilder für das Web speichern?
Programme wie Photoshop bieten die Möglichkeit, Bilder direkt für das Web zu komprimieren und zu speichern. Wenn du Photoshop verwendest, gehe zu "Datei" > "Für Web speichern". Wähle dann das gewünschte Dateiformat (JPG, PNG-8 oder PNG-24) aus dem Menü.
Auch GIMP bietet die Möglichkeit, Bilder optimiert für das Web zu speichern.
Praktische Anwendung:
Mit diesen Werkzeugen kannst du Bilder für das Web optimieren und korrekt vorbereiten.
Ursprüngliche Kamerafotos haben oft tausende Pixel und müssen vor dem Hochladen auf die Website immer optimiert werden. Hierbei gehe ich in der Regel in zwei Schritten vor:
Bildskalierung für die Website: Ich passe die Grösse des Bildes an die tatsächliche Breite an, die auf der Website benötigt wird. Die empfohlene Breite für Bilder hast du bereits erfahren.
Bildkomprimierung für die Website: Im nächsten Schritt reduziere ich die Dateigrösse des Bildes, indem ich es komprimiere. Dadurch wird die Dateigrösse auf wenige Kilobyte reduziert, was wichtig ist, damit das Bild schnell geladen wird.
Tools zur Bildoptimierung:
Photoshop: Adobe Photoshop ist eine leistungsstarke Software zur Bildbearbeitung und Optimierung für das Web. Mehr dazu findest du unter: Photoshop
GIMP: GIMP ist eine kostenlose Alternative zu Photoshop und bietet ebenfalls umfangreiche Funktionen zur Bildbearbeitung. Erfahre mehr unter: GIMP
Iloveimg: Iloveimg ist eine Online-Plattform, die verschiedene Tools zur Bildbearbeitung und -optimierung bietet. Besuche: Iloveimg