BildbearbeitungWebdesign

Bilder fürs Web kinderleicht mit Photoshop optimieren

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

photoshop-fuer-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.

fotos-web-optimieren-photoshop

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.

fotos-web-optimieren-photoshop

Wenn dir dieser Beitrag weitergeholfen hat, dann schreibe es gerne unten in die Kommentare und folge uns auch auf YouTube und Instagram für mehr hilfreichen Content. Dankeschön! 🙂

Digitales High Five, dein Fortypixel Team.

Du benötigst eine neue WordPress Website oder die aktuelle Seite sollte überarbeitet werden? Wir sind dein kompetenter Ansprechpartner für Webdesign aus Kiel und freuen uns auf deine Projektanfrage 🙂 .

wordpress-svg-mac-bildbearbeitung
WordPress SVG Upload – SVG für Mediathek erlauben

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren

Menü