 JPEG 24-Bit Farbtiefe heißt wir können bis zu 16,7 Millionen Farben darstellen, JPEGs unterstützen keine Transparenzen, JPEGs unterstützen keine Animationen und JPEGs verfügen über eine verlustbehaftete Kompression. Vereinfacht gesagt, jedes Mal wenn ihr das Bild öffnet, bearbeitet und speichert, verliert ihr etwas von der Qualität. Speichere ein JPEG fünfmal ab, jedes Mal auf Qualität 80, wie die Qualität schlechter und schlechter und schlechter und schlechter. Ein JPEG verwenden wir hauptsächlich ganz einfach für Fotos. Das nächste Format, das ich euch zeigen möchte, PNG, 8- bis 24-Bit Farbtiefe, das heißt wir können ebenfalls bis zu 16,7 Millionen Farben darstellen, das PNG unterstützt Transparenzen. Das hier ist nicht nur ein weißer Hintergrund, es ist wirklich transparent. Ich zeige euch später aber noch mal detailiert im Vergleich. Es unterstützt ebenfalls keine Animationen und verfügt über eine verlustfreie Kompression. Wenn ihr es also bearbeitet, mehrfach öffnet, speichert, bleibt die Bildqualität gleich. Das PNG verwenden wir größtenteils für Fotos, weil es Transparenzen unterstützt und wegen der Kompression auch gerne für Logos oder Illustrationen. Das dritte Format, ich habe gerade gespoilert, sorry, das ist das GIF oder in Englisch GIF, 256 Farben. Es unterstützt Volltransparenzen, das heißt ganz oder gar nicht. Und außerdem unterstützt es Animationen, ebenfalls verlustfrei komprimierbar. Aufgrund der 256 Farben sind die Anwendungszwecke echt klein geworden. In der Regel verwendet ihr es heutzutage nur noch für Animationen und nichts anderes. Stichwort GIF, da bauen ja viele ihre Images mit ein. Aber gucken wir uns das gleiche ganz mal im Praxistest an. Wir sehen jetzt hier ein Bild, 1000 mal 1500 Pixel und ich habe es einfach in drei Formaten abgespeichert. Das JPEG, wir sehen weißer Hintergrund, keine Transparenzen, 127 KB groß. Das PNG hingegen, 890 KB, Transparenzen top. Und das GIF, man sieht es schön am Rand, Volltransparenzen, ganz oder gar nicht. 256 Farben, relativ klein, für Fotos eigentlich nicht geeignet. Wenn wir das gleiche nochmal mit der Strichzeichnung nehmen, 500 mal 500 Pixel, das ist relativ entspannter. Da tut sich nicht viel von der Kilobytesahl, 26, 23, 24 KB. Also hier könntet ihr, wenn ihr wolltet, die Strichzeichnung auch als GIF abspeichern. Das ist immer so ein bisschen eine Entscheidung aus dem Bauch heraus, was ihr gerade bekommt und was ihr anwenden möchtet. Würde diese Strichzeichnung jetzt noch einen Verlauf haben, da würde das GIF direkt schon wieder rausfallen und man würde ein PNG nehmen. Ein viertes Format, einfach der Vollständigkeit halber. SVG, skalierbare Vektor-Grafiken. Banal gesagt, es kommt ohne Pixel aus. Vektoren hatten einige von euch vielleicht meiner Schule, das heißt, es sind Formeln. Hier gibt dem Bild eine Größe, es ist 200 Pixel groß und es berechnet dadurch automatisch, ach ja, so groß bin ich. Und ist dadurch Verlust frei hoch skalierbar, ob ich es jetzt 200 Pixel, 800 Pixel oder 20.000 Pixel groß mache, ihr werdet keinen Qualitätverlust haben. Gleichzeitig unterstützt es Transparenzen und Animationen werden über Javascript oder CSS möglich gemacht. Ist aber nicht so einfach und macht zur Zeit leider noch wenig Spaß. Da wird aber später noch mal was kommen, denke ich. Also SVG, wenn man welche hat, klar, für Loos und Icons verwenden. Im Praxistest, ich habe die Skalierung gerade mal angesprochen, dass ihr hier seht, seht beim Fünffach-Zoom. Die gerade geht schön durch, da ist keine Treppchenbildung, 50-fach Zoom wäre auch möglich und die Bildqualität ist, die Bildgröße ist unglaublich niedrig. So, für unser Beispiel-Layout von vorhin bedeutet das unser Logo, wir werden vorhanden gerne im SVG-Format oder im PNG-Format. Der Banner, der Banner als JPEG oder als PNG und der Teaser ebenfalls als JPEG oder PNG, da müsst ihr euch einfach entscheiden, ob ihr Bilder mit Transparenzen wollt oder nicht. Damit wir das in WordPress auch gescheit in die Mediathek importiert bekommen, müssen wir den Kern ein bisschen anpassen. Also wir haben jetzt eine kleine Forderungsläste, wir wollen auf unsere Maße zugeschnitten Bilder haben, automatisch. Ich möchte nicht jedes Bild anfassen und gucken, dass es meine Teaser-Bild-Größe hat. Ich will eine hohe Bildqualität, alles soll gut aussehen und ich möchte eine geringe Dateigröße für die kurzen Ladezeiten. Das alles kann WordPress auch ohne Plugins und wir fangen mal an damit, dass die Bilder dann bitte automatisch auf unsere Maße zugeschnitten werden. Und das ist auch keine Raketentechnik, das ist echt einfach, skalieren und zuschneiden. Bevor wir das machen, sollten wir wissen, es gibt in WordPress Standardgrößen, so genannte Default Image Sizes. Die erste Standardgröße ist das Original, euer Original-Bild bleibt immer da, also wenn ihr mal eine WordPress-Instanz verliert, guckt auf dem FDP im Bilderordner, da sind eure Daten. Die zweite Größe ist das Thumbnail, maximal 150 Pixel hoch, Medium 300 Medium Large 768 mal 0, 0 heißt es gibt keine Höhenbeschränkungen. Und Large maximal 1024 mal 1024 Pixel, das funktioniert in der Regel, aber häufig muss ich das anpassen. Wenn ihr ein Bild hochladet und es ist kleiner, sagen wir kleiner als Large, es ist jetzt nur 800 mal 800 Pixel, dann kommt WordPress nicht auf die Idee das Bild hoch zu skalieren, weil das Bild hätte sonst eine schlechte Qualität. Also 800 mal 800, kleiner als Large, dann ist an dieser Stelle Ende. Ihr bekommt ein Thumbnail, ein Medium-Bild und ein Medium-Large-Bild und WordPress verfügt euch diese Bildgrößen auch automatisch in die Seite oder in den Beitrag ein und euer Browser entscheidet dann welches Bild es im Frontend aus gibt. Das ist eine schöne Sache für die Mobiloptimierung. Für unser Beispiel Layout bedeutet das das Logo, wenn es als PNG hochgeladen wird, als Thumbnail SVG, da wir hier schon Ende, weil der WordPress Kern die Mediathek unterstützt kann SVG Format, müsstet ihr mit einem Plugin erweitern. Der Banner hat die Größe Large und der Teaser die Größe Medium. Diese Standardgrößen können wir jetzt im Backend anpassen. Das kann jeder Atmen machen, das ist sowohl das positive als auch negative daran. Jeder Atmen kann auch heißen jeder Kunde, wer mit denen arbeitet. Die Bildgrößen könnt ihr unter Einstellungen, Medien erweitern. Hier sind drei Bildgrößen verfügbar, wer gerade aufgepasst hat, fünf haben wir, wenn wir mal das Originalbild weg, eigentlich müssten hier vier sein. Das Thumbnail ist hier verfügbar, Mittel groß, so jetzt kommt es super Englisch, Mittel, Medium, Groß, Large, nein, Mittel groß bedeutet Medium. Und Groß. Wenn wir möchten, können wir dann hier sagen, okay, wir passen die Breite an, wir passen die Höhe an und beim Thumbnail haben wir auch noch die Möglichkeit zu sagen, das Vorschaubild exakt auf die Größe beschneiden. Das heißt, WordPress skaliert unser Bild runter, bis eines der Seitenmaße der Breite beziehungsweise Höhe entspricht und schneidet den Rest automatisch weg. In der Regel wird es dann so beschnitten, dass der Fokus des Bildes in der Mitte liegt. Das ist eine nette Sache, aber das möchte man manchmal anpassen. Deshalb, und auch weil der Medium Large fehlt, zeige ich euch jetzt mal kurz, wie das über PHP geht. Ist einfacher, als es hier gerade vielleicht aussieht. Ihr schnappt euch euer Seam oder vielleicht macht ihr ein eigenes Pluck in, wenn ihr möchtet. Und fügt eine Funktion hinzu, ich habe sie jetzt genannt, meine Custom Image Size. Und sagt darin so, Add Image Size füge eine Bildgröße hinzu. Ihr gebt der Bildgröße einen Namen. Gebt ihr einen Standardnamen, wie Medium Large, Medium Large, werden die Standardbildgrößen angepasst. Gebt ihr hier jetzt einen eigenen Namen, könnt ihr eine eigene Bildgröße erstellen. Retina, Twitter, Facebook, also könnt ihr alles an Bildgrößen generieren, was ihr gerade braucht. Der zweite und dritte Wert entspricht der Größe, in unserem Fall jetzt einfach mal 800 x 800 Pixel. Und der dritte Wert sagt, beschneiden, true oder false, ja oder nein. Und zum Schluss wird das Ganze über eine Aktion einfach an den WordPress Kern dran gehangen. Und ab jetzt weiß WordPress bei jedem Öffnen, bei jedem Upload. Ich muss auch die Medium Large Size genauso anpassen. Wenn man möchte, ich hatte es gerade schon erwähnt, kann man aber auch sagen, ich möchte den Ausschnitt gerne anpassen für mein Bild. Dann fügt man dann stadt true oder false, das ist das gleiche Beispiel wie vorhin, ein Array an. In dem Array gebe ich einen Wert für die x-Achse und für die y-Achse. Center, Mitte, Top, oben. Dann nehmt er von meinem Bild ein Ausschnitt aus dem oberen, mittleren Bereich. Die Werte sind ähnlich wie bei CSS, die Background Position, Top, Left, Right, Center und so weiter. Also mit einfachem Englisch könnt ihr euch da schon weiterhelfen. Wichtig ist nur, ihr solltet dann auch beachten, dass alle Bilder, die ihr hochladet, diese Position haben. Möchtet ihr eine intelligente Bildposition haben, müsst ihr schon auf ein Dritt-Ambieter zugreifen, der dann das Bild und das Motiv prüft und sagt, ah, da ist der Mittelpunkt. Gibt es jede Menge im Netz, die meisten kosten was, muss jeder für sich selbst überlegen, ob es das wert ist. So, gucken wir nochmal auf unsere kleine Forderungsliste, auf unsere Maße zugeschnittene Bilder und zwar automatisch. Läuft, haben wir erfüllt, haben wir gut gemacht. Das heißt, es steht jetzt nur noch die hohe Bildqualität aus und die geringe Dateigröße. Die haben wir jetzt zum Teil schon erreicht, weil wir gesagt haben, wir haben die Bilder genauso groß wie wir sie haben wollen. Das heißt, der ganze Overhead im Frontend, der ist dadurch schon mal weggefallen, aber da geht noch was. Und zwar möchten wir die Bildqualität ein bisschen anpassen. Dazu werfen wir jetzt mal einen Blick unter die Haube. Das ist technisch so das tiefste, was ich euch zumutere. Also ich habe es versucht, möglichst leicht zu halten, aber ohne geht nicht. Es gibt im WordPress Kern nämlich die Image-Editor-Klassen. Die bieten Schnittstellen zu PHP-Bibliotheken und ermöglichen es euch mit geringen technischen Kenntnissen stark an der Qualität zu schrauben. Es gibt drei Stück davon. Das eine ist die Hauptklasse und zwei Unterklassen. Die Unterklassen entsprechen jeweils einer PHP-Bibliothek, die erste Image-Magic und die zweite ist GD. GD wird bei 90 Prozent von euch auf dem Server auf jeden Fall installiert sein. Image-Magic eher nicht. Die Klassen unterscheiden sich und ich habe da jetzt mal eine ganz banale Möglichkeit zum Vergleich genommen. Image-Magic hat 752 Zeilen, GD 467. Zeilen von Code sagen nichts über die Qualität eines Programms aus. Ich kann auch in 752 Zeilen totalen Mist schreiben. Aber im WordPress Kern zeige ich das eigentlich nur, dass wir in Image-Magic mehr Möglichkeiten haben, unseren Bilder-Workflow auf unsere Wünsche anzupassen. Also auch Sonderwünsche wie ich füge die Exif-Daten, das sind die Daten, die ein Bild hat, wo es aufgenommen wurde, Geoposition, Kamera und Co. Ich füge sie an meinen Medium-Bildern, an meinen Thumbnail-Bild. Könnte ich damit alles machen oder ich nehme besondere Filter. In GD geht das nicht so gut. Das heißt, der Funktionsumfang der beiden Bibliotheken unterscheidet sich schon. Und da haben wir eigentlich eine ganz leichte Möglichkeit den Image-Workflow anzufassen, weil wenn wir es mal vergleichen, links GD, rechts Image-Magic, achtet auf die Augen, achtet auf den Glanzpunkt im Auge, achtet auf die Struktur des Feldes oberhalb der Augen. Bei GD ist es schon ein bisschen umscharf und ich hoffe, dass wir nächstes Mal ein 4K-Beamer bekommen. Ich habe beides mit der gleichen Qualität abgespeichert, Qualität 60, wie gesagt GD, hohe Verbreitung. Aber wenn ihr beide Bibliotheken parallel auf eurem Server hat, sagt WordPress schon von sich aus, ich bevorzuge Image-Magic. Stellt eurem Hoster die Frage, die können euch das in der Regel schnell beantworten. Wenn euer Hoster gut ist, sagt er, alles klar, habe ich euch freigeschaltet. Wenn euer Hoster nicht so entgegenkommend ist, müsst ihr vielleicht noch 15 Minuten selbst Arbeit investieren, aber das ist es einfach wert. Wild Qualität, um sie anzupassen, passen wir wieder unser Scene an oder unser Plug-in. Die Standardqualität in WordPress ist 82. Hat wer schon mal mit Photoshop gearbeitet? Wunderbar, mit Gimp, mit Affinity, mit Paint. Qualität 82 in Photoshop entspricht nicht Qualität 82 in Gimp, nicht Qualität 82 in Paint, nicht Qualität 82 in GD, nicht in Image-Magic und nicht im WordPress im Allgemeinen. Das heißt, wenn ihr mit der Qualität schraubt, müsst ihr am Anschluss direkt ein Bild hochladen und euch ein vorher nachher Vergleich machen. Wie sieht das Bild eigentlich aus? Die Qualität sagt leider nicht sehr viel aus, deshalb sollte die Entscheidung, welche Bildbibliothek ihr verwendet, vorher getroffen werden. Eins ist übrigens eine niedrige Qualität, 100 eine hohe Qualität, einfach damit es mal gesagt wird. Und 82, der Kompromiss wird irgendwann getroffen, das ist eine ganz gute Qualität. Das Google Speedtest Ergebnis ist in Ordnung, also nehmen wir es, wenn wir das anpassen wollen, dann können wir das ebenfalls über eine Funktion machen. Meine Custom Quality, die gibt einen Wert zurück, ich setze meine Qualität jetzt auf 90, da könnt ihr einfach irgendeine Zahl zwischen 1 und 100 eintragen und WordPress wendet das dann über die beiden Ad-Filter, die ich dort unten aufgelistet habe, automatisch auf eure Mediathek an. Es gibt hier einen Spezialfall. Der erste Filter sorgt dafür, dass die Standardqualität runtergesetzt wird und der zweite Filter sorgt dafür, dass die Standardqualität speziell für JPEGs runtergesetzt wird. Wenn ihr also zwischen dem PNG und einem JPEG in der Qualität unterscheiden möchtet, könnt ihr das hier rüber ganz leicht machen und ohne irgendwelche Abfragen, welchen Mime-Type das zum Beispiel hat. Optimierung. Jetzt kommen wir wieder zum seichten Teil. Verzerrung. Ich habe schon mal jemanden verzerrtes Bilder vor Seite gehabt, sie installiert oder sonst was. Wenn sowas kommt, dann passiert das in der Regel, weil die Breite und die Höhe im CSS festgesetzt wurde. Wenn ich ein Bild habe im Format 4 zu 3, aber im CSS sage, ja komm, 500 mal 500, gib ihm, also quadratisch. Dann sagt sie, das ist kein Ding, mach ich und staucht euch das Bild zusammen. Deshalb ist es wichtig, dass ihr, wenn ihr die Breite oder Höhe fest angebt, das Gegenstück davon auf Auto zu setzen, so skaliert ihr das Bild professionell für euch. Noch besser ist es, wenn ihr zusätzlich Max Breite beziehungsweise Max Höhe mit dazugibt. Das sorgt nämlich dafür, wenn ihr ein Bild in der Größe 500 einbautet, das Originalbild aber nur 400 Pixel breit ist, dass das Bild nicht hochskaliert wird. Also mag vielleicht eine gute Idee erscheinen, aber selbst wenn ihr von 500 auf 501 Pixel hochskaliert, sorgt der Browser dafür, dass es massiv unscharf wird. So ein Problem hättet ihr in Photoshop zum Beispiel nicht, wenn ihr das macht, aber im Browser sind keine Bildbearbeitungsprogramme und nur auf die schnelle Ausgabe von Medien optimiert. Ein zweites Problem, Unschärfe. Man sieht jetzt schon den Hintergrund nicht, habe ich gerade leider festgestellt, als ich in der Mitte stand, aber der Hintergrund besteht eigentlich nur noch aus Wolken, die Augen glänzen nicht mehr so, das Feld ist nicht mehr so schön. Was ihr hier machen könntet wäre im PHP die Bildqualität zu erhöhen, das haben wir gerade schon gesehen, oder wieder mit der Breite und Max Breite beziehungsweise Höhe zu arbeiten. Was ihr aber auch machen könnt, ist über CSS die Anpassung über Image Rendering in Erwägung zu ziehen. Ein Browser, wenn er ein Bild ausgibt, lässt immer einen eigenen Image Rendering Algorithmus drüber laufen. Also selbst wenn ihr sagt, nein mein Bild wird nicht bearbeitet, ich gebe es in Originalqualität aus. Der Browser macht trotzdem etwas damit. Ihr könnt jetzt höchstens überlegen, ich nehme das automatische Image Rendering, wer schon mal Photoshop vor sich hatte, bikubisch, bilinear. Ich nehme Crisp Edge, knusprige Kanten, die Kanten behalten ihre Schärfe. Oder das ist richtig cool, wenn ihr noch Icons habt, die im PNG Format oder sonst was sind, 12x12 Pixel, das Image Rendering of Pixel-Aided setzen. Das ist eine der wenigen Möglichkeiten, Bilder hoch zu skalieren, ohne dabei an Qualität zu verlieren, weil es eine harte Pixel-Wiederholung gibt. Also habt ihr einen kleinen Pfeil nach links oder rechts, könnt ihr den problemlos von 12x48 Pixel hoch skalieren und habt dabei eine wunderbare kleine Bildgröße, weil der Browser für euch die Rechenarbeit übernimmt. Ganz wichtig, wir sind beim Optimieren, wir sind nicht mehr beim Konfigurieren. Wenn ihr im Zuge der Optimierung noch sagt, ich verändere die Bildqualität, habt ihr die Bestandsdaten nicht verändert, das zählt nur für Bilder, die ihr neu hochladet. Deshalb meine Bitte an euch, Bilder regenerieren. Es geplackens dafür Regenerate Thumbnails zum Beispiel. Die nehmen den kompletten Inhalt eurer Mediathek und berechnen diese Bilder neu. Zum Tempo, wir hatten mal ein Autohaus als Kunden, der hatte 10.000 Bilder, 2 MB-Groß. Nach 40 Minuten war das durch, also 10.000 Bilder, jeweils 5 Thumbnail-Großen ist vollkommen in Ordnung. Wenn ihr jetzt 50 oder 100 Bilder in eurer Mediathek habt, die Zeit reicht nicht mal mehr, um sich ein Kaffee zu holen. Aber das nur am Rande. Das letzte, das seht ihr wahrscheinlich überhaupt nicht, Artefakte. Die Wolken, die wir haben, sind ein einziger Pixel-Salat geworden. Das Fell der Katze an den Seiten, ebenfalls, das sind einfach nur noch Klumpen. Artefakte sind Störungen durch Komprimierung. Ihr könnt Artefakte vermeiden, indem ihr im PHP die Bildqualität erhöht. Aber Artefakte entstehen meist vorher. Artefakte entstehen während der Bildbearbeitung. Weil jemand sagt, hey, ich schärfe jetzt das Bild mal massiv nach, danach skalier ich es runter. Ich nehme noch einen kleinen Rauschenfilter. Oder ich nehme einfach ein JPEG, also ein Bild mit verlustbehafteter Kompression. Öffne es 10 mal, speicher es 10 mal, gut ist. So habt ihr ganz schnelle Artefakte. Deshalb bei der Vorarbeitung, bei der Vorarbeit, solltet ihr versuchen, keine Bearbeitung im Webformat beziehungsweise Zielformat vorzunehmen. Eine Alternative wäre Photoshop, das PSD-Format oder auch ein TIF-Format. Was noch den charmanten Vorteil hätte, dass Ebenen erhalten bleiben. Ich bevorzuge meistens das Photoshop-Format, weil das TIF-Format in der Regel keine Einstellungsebenen behalten kann. Zum Schluss, Erfahrungsberichte, Geschichten aus dem Netz. Ich hatte schon ein bisschen erwähnt mit Browser und Image Rendering. Ich gebe in einem Browser mein Bild aus, es ist immer das gleiche Bild. Aber wenn ich fünf verschiedene Browser nehme, werde ich das Bild in fünf verschiedenen Qualitäten bekommen. Browser haben unterschiedliche Engines, was das Rendering angeht. Browser haben im CSS unterschiedliche Sizing-Modis. Ein kleines Beispiel, sagen wir mal, dieses Bild ist 300 Pixel groß. Ich setze in CSS eine Border drum, ein Pixel, links und rechts. Wie groß ist das Bild dann? 300 Pixel oder 302 Pixel groß? Durch meine CSS-Ampassung. In dem Moment, wo es 300 Pixel groß ist, wie auf meinem 300-Pixel-Großes-Bild, runter skaliert, um 2 Pixel, und die Border wird drumherum gesetzt, runter skalieren, gleich und schärfe. Sieht nicht gut aus. Es empfiehlt sich hier einfach in Google Analytics einmal nachzuschauen, welche Browser benutzen eure Kunden oder Besucher, wenn ihr nichts verkauft. Und prüft die Seite. Ist alles okay, sieht alles gut aus, ist alles wunderbar. Sehen Sachen nicht so schön aus, geht der Ursache auf den Grund und setzt euch ein Zeitlimit, wenn ihr länger als fünf Stunden braucht es zu optimieren. Und es ist noch okay, was die Seite euch ausgibt. Überlegt euch gut, ob ihr weitere fünf bis zehn Stunden darin investieren wollt, weil wir haben vorhin Stellschrauben gesehen, die deutlich mächtiger sind als eine kleinere Browser-Ampassung. Und ihr wisst doch nicht, ob mit dem nächsten Browser-Update das Ganze vielleicht schon behoben wird. Deshalb das gleiche Bild nur anders in verschiedenen Browern. So, und die zweite Geschichte aus dem Netz dürfte ein bisschen interessanter sein. Da geht es um Speed-Tests. Hat schon mal jemanden Speed-Test gemacht für seine Seite? Ja, das ist eine gute Quote. Es gibt Speed-Tests speziell für Bilder. Das ist zum Beispiel der Cloudinary Speed-Test. Und er gibt euch am Ende eine Punktzahl, hier eine Prozentzahl und sagt, hey, dein Bild hat 85 Prozent von 100 Prozent erreicht. Ihr könnt hier noch was einsparen, ihr könnt das Ganze noch besser machen. Und ich habe mal im Zuge eines Hack-Days meiner Firma gesagt, gut, ich guck mal, wie ich 100 Prozent in so einem Speed-Test bekommen. Ich habe jetzt acht Stunden Zeit, das sollte ja eigentlich machbar sein. Ich habe angefangen, ich habe ein Bild reingeworfen, 93 Kilobyte groß und der Speed-Test hat gesagt, da geht noch was. Ach, ich muss langsam sprechen, dann knackt es nicht so. 80 Kilobyte, das ist unser Ziel. Ja, dann habe ich noch ein bisschen an den Stellschrauben gespielt, die ich euch vorhin gezeigt habe. Und habe von den 80 Kilobyten, die ich erreichen wollte, 40 Kilobyte erreicht. Also halb so groß wie das, was mir das Speed-Test gesagt hat. Und da dachte ich mir, ja geil, 100 Prozent erreicht, hat eine halbe Stunde gedauert. Danke, tschüss. Nee, leider nicht. Als ich das Bild dann nochmal reingeladen habe zum Speed-Test, hat mir der Speed-Test gesagt, 40 KB. Ja, ist ganz geil, wir können es mit 37 KB. Dann habe ich es nochmal komprimiert und nochmal komprimiert und nochmal komprimiert. Und irgendwann sah das Fell der Katze aus wie so eine Schüssel Müsli. Man hat da so gar nichts mehr erkannt und der Test hat gesagt, 99 Prozent, aber da geht noch was. Klar, JPEG verlustbehaftete Komprimierung, ich kann jedes Mal sagen, 90 Prozent. Das Bild wird kleiner und kleiner und kleiner. Aber bei den Speed-Tests muss man einfach ein bisschen weniger an Google und Co. Sondern ein bisschen mehr an seine Kunden denken. Bilder sorgen dafür, dass ein Produkt verkauft wird. Bilder sind Emotionen. Und wenn diese Emotionen eine geringe Qualität haben. Na, spinnen wir jetzt mal ein bisschen gestalterische Analyse. Ich habe ein Bild in geringer Qualität, ich habe ein Produkt, also hat dieses Produkt auch eine geringe Qualität. Man verkauft dadurch einfach weniger. Deshalb, wenn ihr ein Speed-Test vor euch habt und ihr habt ein Ergebnis, das halbwegs akzeptabel ist, überlegt euch, ob ihr dieses Ergebnis nicht behaltet und sagt, alles für meinen Kunden. Der hat mehr davon. Die Optimierung wird aber nie aufhören. Nach der Optimierung ist vor der Optimierung in dem Sinne viel Input. Habt ihr Fragen? Du hast vorhin gesagt, dass 82 Prozent Bildqualität, Quatschprozent, 82 Prozent bei WordPress, nicht 82 Prozent bei Photoshop ist. Also wenn nicht bei Photoshop auf 80, Speichere werden die Bilder definitiv zu groß. Hast du da so ungefähr eine Faustformel, wie das in etwa umzurechnen ist? Kommt auf deine Bilder an. Wir hatten gerade diesen wunderbaren Vergleich zwischen der Katze und der Strichzeichnung. Die Strichzeichnung war 20 KB groß, da kam es auch nicht groß auf das Format an. Ihr müsst wirklich gucken, was für ein Inhalt ihr hauptsächlich in eurer Mediatik hochladet. Seid ihr Fotografen, tut euch den Gefallen, nehmt eine hohe Qualität, zeigt den Kunden, dass ihr gute Bilder ausliefern könnt. Seid ihr ein Illustrator, achtet darauf, dass die Farben nicht kaputt gehen. Dafür müsst ihr wirklich gucken, was ist das Medium, was ist die Umgebung, mit der ihr hauptsächlich arbeitet und passt euer Scene, eure Einstellung darauf an. Also wenn ich bei Photoshop auf 80 gehe, bei einem relativ großen Bild, sagen wir mal 1020 mal so, dann hat das bestimmt 7, 800 Kilowatt. Das ist deutlich zu hoch. Deswegen wundere ich mich jetzt über dieses WorldFestes 80 so okay. Klar, wenn ich eine klitzekleine Strichzeichnung habe, ist der Wurst da drin, weil über 3, 4 KB im Unterschied. Aber wie verhält ich mich bei größeren Bildern? Also 80 ist da einfach keine Option. Wenn du fünf Bilder im Slider hast, dann lahmt die Seite so, das macht auch keiner mit. Deswegen frage ich, wie man das ungefähr beurteilt. Also 80 bei WordPress ist 40 bei Photoshop, oder? Das ist eine kleine Abweichung. Okay. Gefühlt fünf bis zehn Prozent plus minus. Aber man muss auch bedenken, wenn ich etwas in Photoshop exportiere und sage schon Qualität 80, dann nehmt du WordPress in ein Original Bild, rechnet es in eine Untergröße zum Beispiel large und exportiert das ebenfalls noch mal mit Qualität 80. Also ich habe schon zweimal meine Qualität runtergesetzt. Vielleicht ist es da dann sinnvoller zu sagen, ich exportiere in Photoshop mit 100 Prozent Qualität und setze in WordPress die Standardqualität runter, damit ich nur eine einzige Kompression habe und das Bild dann entsprechend besser aussieht. Zur Slider Thematik, wenn wir jetzt einen Slider nehmen, ich wurde gerade schon darauf angesprochen von meinem Namenswetter hier auf den Revolution Slider. Der Revolution Slider bietet euch die Möglichkeit, zur sogenannten Lazy Loading zu aktivieren, Delayed Loading, nachgezogenes Laden. Es sorgt dafür, dass nur das erste Bild im Slider geladen wird und das zweite, dritte, vierte, fünfte Bild erst nach bestimmten Bedingungen oder Einstellungen nachgeladen wird. Man kann zum Beispiel sagen, der dritte Slide soll erst geladen werden, wenn der zweite Slide angezeigt wird. So spart man zumindest beim Starten der Seite schon einiges an Traffic, der kommt. Und dieses Lazy Loading kann man aber auch außerhalb des Sliders anwenden. Das muss man halt überlegen, ob man das seinen Kunden zumuten möchte, dass Bilder vielleicht zuerst in einer verschwommenden Qualität angezeigt werden und dann erst in voller Qualität. Einige stört das. Oder ob man sich es vielleicht so konfiguriert, dass erst mal nur das Bild, was der Kunde auch sieht, sobald er die Seite öffnet, erscheint. Und alle anderen, die unterhalb des Browserfensters sind, also Below the Fold, dass die nach und nach erst nachgeladen werden, sobald die Seite ausgeliefert wird. Das sind auch Optionen. Dafür gibt es ausreichend Plugins, die man sich aus der Plugin-Bibliothek da zusammensuchen kann. Habt ihr sonst noch Fragen? Ja, nur eine kleine Anmerkung. Ein Punkt, der mir noch so ein bisschen fehlte, war, es steht dadurch, dass die Möglichkeit mit Tools wie Tiny-PNG oder so, Dateien im Dateigewicht zu reduzieren, ohne an die Qualität zu gehen. Weil in dem Moment geht es ja jedes Mal eigentlich um das Thema Kompromissqualität, Dateigröße. Es gibt auch einzelne Plugins, die sehr interessant sind, die man nutzen kann, um direkt beim Upload, ob es jetzt Optimus ist, oder Smash it, direkt die Bilder an sich reduzieren zu lassen. Das beträchtlich, was man da nochmal rausholen kann, ohne dass die Qualität runterleidet. Also ich denke, dass das nur als Anmerkung auch noch wichtig ist, zu sagen, dass das viel ausmacht, die überhaupt das von der Bestandswebseite sich mal den Uploads auch noch zu nehmen und den mal durch so ein Tool zu ziehen. Das ist erschreckend, wie viel man da rausholen kann. Wenn man nicht auf solche Daten angewiesen ist, Stichwort Xif und Co. Genau. Xif und Co. ist ein guter Stichpunkt. Also ich musste hier gucken, wie ich das riesige Thema, da könnten wir wahrscheinlich acht Stunden am Stück drüber sprechen, auf 30 Minuten runterdampfe. Was außerdem noch geht, wäre zu sagen über die HTXes. Ich aktiviere erstmal die Gzip-Kompression. Das Bilder, wenn sie vom Server abgeschickt werden, quasi verpackt werden. Und erst, wenn sie im Browser ankommen, wieder endpackt werden. Also spare ich mir auch Bildgröße, beziehungsweise ich verbessere die Übertragungsgeschwindigkeit. Xif-Daten. Ich könnte die Daten, wo mein Bild aufgenommen wurde, mit welcher Kamera es aufgenommen wurde, auch zwingend immer aus meinen Bildinformationen rausschmeißen. Die ganzen Metadaten sind schön und gut, aber wenn ich sie nicht brauche, weil ich zum Beispiel nur ein einfaches Bild habe, was eine Überschrift unterstützt, wenn ich sie rausschmeiße, spare ich mir ein paar KB. Wenn wir uns die Strichzeichnung ansehen mit 24 Kilobyte. Warum nicht? Weg damit. Aber ja, der Hinweis ist gut, es gibt viele Dienstleister, die das, was hier gerade gezeigt wurde, auch per Plug-in anbieten. Es gibt Dienstleister, da schickt ihr eure Bilder hin, sobald ihr sie in der Mediathek hochladet. Die Bilder werden automatisch komprimiert und sie kommen wieder zurück. Da müsstet ihr mal mit eurem Datenschutzbeauftragten sprechen, ob das überhaupt okay ist, dass eure Bilder vielleicht auf ein Server in den USA geschickt werden, um sie zu komprimieren. Aber das ist, wie gesagt, Datenschutz pur. Was man auch noch machen könnte, wie man zum Beispiel mit den ganzen SVG-Daten umgeht, lade ich mir meine Icons wirklich in meine Mediathek hoch, so dass jedes Mal, wenn mein Icon geladen wird, alle verschiedenen Bildkosten, wenn sie da sind, hinterhergeladen werden. Oder sorge ich dafür, dass SVGs, SVGs bestehen nur aus XML-Code, ob die auch direkt schon in mein Seam in meine Seite eingebunden werden und überhaupt keinen Request an den Server erzeugen. Und der Server sagt überhaupt nicht, ich liefer dir die Daten aus, sondern der Server sagt, ich hab die Formel da, ich kann die Vektor-Grafik berechnen. Ja, mach ich für dich. Danke. Also es sind viele, viele Baustellen, an denen ihr arbeiten könnt. Wer ist für den Anfang so weit vom Thema? Wenn ihr Fragen habt, oder wenn ihr mal von Ergebnissen berichten möchtet, schreibt mir gerne, www.vpstyles.de, Twitter. Und ansonsten bedanke ich mich, dass ihr nach dem Mittagessen so zahlreich erschienen seid und auch aktiv Fragen gestellt habt. Ja, auch ich möchte mich bedanken, vor allen Dingen auch bei dir, dass du wirklich noch geblieben bist. Wie wir alle leider mitbekommen haben, ist eine bessere Hälfte gesundheitlich, doch etwas sehr angeschlagen. Ihr macht euch jetzt gleich auf den Heimweg. Vielen Dank, dass du trotzdem hier geblieben bist, um uns daran teilhaben zu lassen, wie wir unsere Bilder optimieren können. Ja, wir haben jetzt noch ein bisschen Zeit. Also wenn ihr euch die Beine vertreten möchtet, so ein bisschen nach dem Mittagessen. Um 15 Uhr geht es dann hier weiter. Da wird dann der Felix uns noch was erzählen über berechtigungsgetrebene Entwicklungen. Da bin ich auch schon mal sehr gespannt. Bis dann. Enjoy the World Camp.