Warum man Bilder fürs Web optimieren sollte
Jeder möchte, dass seine Website sehr schnell lädt, damit die Wartezeit für den Besucher so kurz wie möglich gehalten wird. Um eine kurze Ladezeit zu haben, ist es unter anderem sehr wichtig Bilder auf seine Website einzubinden, die nicht größer sind als nötig. So spart man sich viele Kilobyte bei der Dateigröße ein und macht damit nicht nur die Website-Besucher, sondern auch Google glücklich.
Die Performance ist nämlich eine der über 200 Ranking Faktoren, die für die Platzierung von Webseiten bei den Google Suchergebnissen herangezogen wird. Insbesondere sind Smartphone-Nutzer mit einer langsamen Internetverbindung oder begrenztem Datenvolumen sehr dankbar, wenn eure Website keine Fotos lädt, die schlimmstenfalls mehrere Megabyte groß sind.
Ich nutze hier die Photoshop Version CC 2015, jedoch lassen sich die gezeigten Einstellungen auch auf viele andere Bildbearbeitungsprogramme übertragen.
Exportfunktion: Für Web speichern
Zum Exportieren des Bildes gehst du in Photoshop zu:
Datei > Exportieren > Für Web speichern
Die richtigen Einstellungen vornehmen
Die Exportfunktion fürs Web bietet uns nun einige Einstellungen. Die wichtigsten sind nachfolgend aufgelistet:
- Dateiformat: Für das Foto in unserem Beispiel ist JPEG das richtige Dateiformat. Bei Bildern, die transparente Bereiche enthalten sollen, muss PNG ausgewählt werden. Die Dateigröße von PNG Bildern ist in der Regel größer als die von JPEG Bildern.
- Qualität: Meistens reicht es völlig aus die Qualität auf 60 für das JPEG Format zu setzen. Hier hat man eine kleinere Dateigröße bei einer immer noch sehr guten Bildqualität. Man erkennt den Unterschied zur Qualität auf 100 mit dem bloßen Auge gar nicht.
- Progressiv: Wenn man einen Haken bei Progressiv setzt, wird das Bild in mehreren Durchgängen heruntergeladen. Das bedeutet, dass man bei einer schlechten Internetverbindung erst ein unscharfes Bild sieht, bevor das Bild komplett in der besten Qualität und Auflösung angezeigt wird.
- In sRGB konvertieren: Hier setzen wir ebenfalls einen Haken, weil das der Farbraum ist, der für die Darstellung von Bildern im Netz optimal ist.
- Metadaten: Hier kann man die Einstellung „Ohne“ auswählen, da man unnötige Bildinformationen (z.B. Infos über die verwendete Kamera) für Bilder auf Webseiten in der Regel nicht benötigt.
- Bildgröße: Die Breite und Höhe eines Bildes sollte nur so groß wie nötig gewählt werden. Es bringt uns nichts ein Bild in 4000 x 2000 Pixel hochzuladen, wenn es nur in einer Größe von 600 x 300 Pixel auf der Webseite angezeigt wird. Wie man die richtige Bildgröße bzw. Auflösung herausfindet zeige ich im Video oben.
Durch diese Maßnahmen verkleinert man die Dateigröße eines Bildes um ein Vielfaches! In diesem Beispiel von 14,7 MB auf 57 KB.
Bilddatei richtig benennen
Beim Abspeichern des Bildes muss man einen Dateinamen vergeben. Dieser sollte keine Sonderzeichen, Umlaute und Großbuchstaben enthalten. Außerdem sollten die Wörter durch einen Bindestrich getrennt werden und nicht durch ein Leerzeichen. Ein Beispiel für die korrekte Benennung eines Bildes wäre:
gruener-garten.jpg
Mit TinyPNG Bilder noch besser komprimieren
Nachdem wir das optimierte Foto aus Photoshop exportiert haben, können wir es teilweise noch weiter verkleinern, indem wir das kostenlose Tool TinyPNG nutzen. Einfach die JPEG oder PNG Datei auf die Webseite von TinyPNG ziehen und die Komprimierung startet automatisch.
Dieses coole Tool gibt es übrigens auch als WordPress Plugin. Das TinyPNG Plugin komprimiert jedes Bild automatisch, dass du auf deine WordPress Website hochlädst.
4 Kommentare. Hinterlasse eine Antwort
Folgende Beobachtung: Hatte auf einer Unterseite beim ertsen Google Speedtest 88 Punkte/% gehabt. Nachdem ich Größe von allen Bildern um knapp 50% reduziert habe (das war maximal mögliche Komprimierung mit einer vertretbaren Qualität) zeigt Google Speedtest nach wie vor 88 Punkte/%. ((
Fazit: Die Größe von Grafiken soll mindestens die empfohlene durch Google Speedtest haben, nur dann zählt das. Ansonsten Teilpunkte g. e. nicht ((
Statt mehrerer (kleiner) Bilder zu laden, gibt es die Moglichkeit, diese in einem gro?en Bild abzuspeichern. Und dann per CSS immer nur einen, den passenden, Ausschnitt dieses Bildes einzublenden. Das spart insofern Ladezeit, weil nur ein einziges (sicherlich gro?eres) Bild geladen werden muss und nicht mehrere (kleinere). Dadurch werden aber die Abfragen an den Server reduziert. Icons (z.B. der sozialen Netzwerke) oder Landerflaggen sind beliebte Beispiele und Einsatzgebiete fur die CSS-Sprites.
Wenn Sie Ihr Bild zugeschnitten haben, konnen Sie Ihr Foto einzeln herunterladen und auch auf sozialen Plattformen wie Facebook oder Twitter mit nur einem Klick teilen.
Können Sie mir bitte erklären was es mit den Rubriken Original, Optimiert, 2fach und 4 fach auf sich hat. Ich begreife nicht wie das Konzept des FÜR WEB SPEICHERN (Legacy) geht. Eine Anleitung. Ich sehe beim probieren, das sich die Werte der Qualität stets bei jedem weiteren Bild verkleinern aber nicht WIESO TUT ES DASS. Ausserdem irritiert mich, dass z.b. bei 4 fach Rubrik ich leicht bläulich am Rahmen eines «wählen» kann, aber ich sehe von Auge keine Unterschiede. Ich steh also voll im Wald und begreife nicht wie das Ding funktioniert insgesamt. Jedes Mal erzeugt es andere KB Grössen aber wieso – obwohl ich Einstellungen speichere verkleinert es meine Bilder noch mehr. Wozu sind denn die gespeicherten Voreinstellungen, wenn sich das erneute Aufrufen der FÜR WEB SPEICHERN-Exportiermöglichkeit trotzdem macht was es will – ich meine, auch wenn ich meine gespeicherten Qualitäten trotzdem nicht so verhalten… mich dünkt das ist wie ein Zufallsgenerator. UND: Schärfe ich ein exportiertes Bild durch öffnen wieder in Photoshop ab, und wende z.B. Unscharfmaskieren-Schärfefilter an, hat das (tschuldigung) verdammte JPG z.b. von exportierten 812 KB vor dem erneuten Öfffnen in Photoshop für nochmals perfekter nachschärfen von kleinsten Details und banalem sichern Befehlstaste + s (normales speichern) plötzlich 3.25 MB…! Fuck, wie geht denn diese Sache überhaupt. Gerne möchte ich lernen wie das geht, ich komme nach Stunden und Erschöpfung nicht mehr klar, wo oben und unten ist, ich bin am Rande einer Verzweiflung, das Ding ist mir nicht klar was ich da tun soll und was es schlussendlich tut….Danke für Hilfe.