WordPress für Designer: Themes und Layout-Werkzeuge

Bilder optimieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie hier, wie Sie Bilder in Photoshop für WordPress vorbereiten.

Transkript

Als nächstes wollen wir uns anschauen, wie man die Mediathek von Wordpress verwendet. Doch bevor wir hier jetzt hingehen und Dateien hinzufügen, möchten wir diese Dateien erstmal fürs Web speichern. Wir wollen ja keine Riesen großen Dateien hier in die Mediathek laden, sondern halt Dateien, die fürs Web geeignet sind. Wenn wir dazu mal einen Blick in unseren Bilderordner werfen, dann sehen wir schon direkt, die erste Datei ist sehr sehr groß und einem halben Megabyte. Die anderen sind auch nicht gerade klein, das heißt, ich würde die alle hier fürs Web optimieren wollen. Und dazu kann man ja beliebige Bildbearbeitungsprogramme nehmen, wie zum Beispiel Photoshop, Gimp oder Efiniti Photo. In meinem Fall starte ich Photoshop und ziehe jetzt einfach hier das Bild auf Photoshop, um es hier bearbeiten zu können. Hier gehen wir über das Menü Datei Exportieren und dann Für Web speichern. Und wir erhalten jetzt hier eine horizontal geteilte Ansicht. Oben sehen wir das Original, unten sehen wir das Ergebnis. Und jetzt gehe ich hin und schiebe einfach mal hier das Original an eine spezielle Stelle, wo man das Bild gut beurteilen kann. Hier sieht man jetzt ganz gut die Surfer im Hintergrund, hier sehen wir den Vordergrund-Surfer und wir sehen hier ganz gut die Qualität vorher und nachher, die wir ja vergleichen können. Ja und wir haben hier verschiedene Qualitätsstufen zur Auswahl. Bevor wir zu den Qualitätsstufen kommen, erstmal die Bildformate. Wir haben GIF, JPEG und PNG. Das GIF-Format eignet sich für Fotos überhaupt nicht, da es nur 256 Farben hat. Fotos haben aber 6,7 Millionen Farben, dementsprechend ist das hier vielleicht ein bisschen zu wenig. Deswegen, GIFs verwendet man eigentlich nur für Grafiken. Also in unserem Fall dann das JPEG. Bei Fotos kommt eigentlich immer das JPEG-Format zu Einsatz. Wir können jetzt hier über diesen Regler die Qualität für dieses Foto definieren. Je weiter man hier den Regler nach links zieht, desto stärker wird das Bild komprimiert und die Dateigröße wird entsprechend kleiner. Wir können jetzt also hingehen und die beiden Bilder vergleichen und den Regler einfach mal immer ein Stückchen weiter nach links ziehen, um hier dann gleichzeitig die Dateigröße im Auge zu behalten. Wir sind also jetzt 355 Kilobytes. Ja und vorher hatten wir ein halbes Megabyte, das heißt, wir haben schon etwas reduziert. Wir müssen jetzt allerdings mal genau gucken, ob sich hier schon irgendwelche Artefakte bilden. Weil das ist der Nachteil von JPEG, je weiter man den Regler nach unten zieht, dann kommt es irgendwann zu einer Artefaktbildung. Klar, irgendwie muss das Bild ja auch komprimiert werden. Wir ziehen also den Regler immer weiter nach links und vergleichen. Und ich sehe, dass die Qualität eigentlich ziemlich gut ist. Man sieht ganz wenig Artefakte hier. Von daher, mit einer Qualität von 44, bin eigentlich zufrieden und komme auf 200 Kilobytes, also weniger als die Hälfte. Da es sich hierbei um ein Foto mit einer sehr hohen Auflösung und ursprünglich sehr hoher Qualität handelt, kann man den Regler sehr weit herunterziehen. Vielleicht sogar noch ein Stück. Wenn man aber als Original schon ein Bild hat mit einer geringen Auflösung, dann kann man den Regler hier nicht so weit nach unten ziehen. Normalerweise ist es so, bei sehr hochaufgelösten Bildern, dann haben wir hier zwischen 30%, vielleicht 40%, 50%. Wenn man eine sehr geringe Auflösung hat, dann starten wir hier mit 60%, 80% ungefähr. Das sind so Erfahrungswerte, dass man zu einem guten Ergebnis kommt. Ja und bei 39% bin ich jetzt und ich finde, wenn an genau hinguckt, sieht man ganz kleine Artefakte, aber damit kann ich jetzt leben, dadurch dass ich jetzt nur noch, ja knapp, 190 Kilobytes Dateigröße habe. Ja und das Ganze kann ich jetzt auch speichern. Ich klicke also auf Speichern. Und überschreibe jetzt die Datei 01 in meinem Bilderordner. Und wenn wir jetzt mal schauen, ja dann gehört diese Bild schon zu den kleinsten in unserem Bilderordner. Ich würde also alle anderen auch nochmal anfassen und in Photoshop weiter optimieren.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!