Bilder automatisch perfekt komprimieren, ohne externen Service. Google-konformes Lazyloading und dem GoogleBot ganz legal größere Bilder unterschieben.

2. Bilder, Bilder, Bilder
2
Das ist doch ganz einfach....

3. 3
<img
src=”mona-lisa.jpg”
alt=”Mona Lisa”>

4. Bilder, Bilder, Bilder
4
Das ist doch gar nicht so einfach....

5. Michael Schilling
5
● Head of SEO @ Spiegel21
Badspiegel und Spiegelschränke nach Maß
● Web Performance Optimization
● BVB-Fan
● WordPress-Versteher
● ❤ meine Frau, Hündin Luna und Fußball
https://www.spiegel21.de/

6. Bilder, Bilder, Bilder
6
1. Bildkomprimierung (intern)
2. Google-konformes Lazyloading
3. Bilder-Rankings retten
4. GoogleBot größere Bilder unterschieben
Eine Bitte:
Fragen bitte erst im Anschluss an den Vortrag

7. Bilder komprimieren...
7
… und weshalb es vor dem Upload
(meist) keine gute Idee ist.

8. Was ein CMS nach
dem Upload macht...
8

9. Was ein CMS nach
dem Upload macht...
9
Upload:
a.jpg (1620 x 1080 px)
Auf dem Server:
a.jpg 83 KB (Original)
…
a-1620x1080.jpg (1620 x 1080 px)

10. Wie kann das passieren?
10
taxiteller.jpg (83 KB)
1620 x 1080 px
(42 % JPG)
CMS
z.B. WordPress, Typo3,
Shopware, etc.
Bild wird nach Upload dekomprimiert, CMS erstellt „seine“ Dateien (diverse
Abmessungen) und komprimiert mit fest vorgegebenem Wert.
taxiteller-1620x1080.jpg (262 KB)
1620 x 1080 px
(85 % JPG)

11. Bilder komprimieren...
11
• Niemals vor dem Upload
• Und anschließend auch nur
die vom CMS erzeugten Dateien.

12. 12
Alle Bilder von Hand zu optimieren,
das macht sehr, sehr viel Arbeit
und ist ganz schön monoton.

13. 13
Regler schubsten und in 1:1 Ansicht
die Ergebnisse begutachten ist so bäh.

14. 14
Das könnte der Grund dafür sein, dass…
80 % aller Bilder
nicht auf Dateigröße optimiert
50 % kleiner sein könnten,
ohne optische Qualitätsverlust

15. 15
Auf dem Weg zur perfekten Komprimierung

16. 16
In sieben Stufen
kinderleicht
perfekt
komprimiert

17. 17
Structural Similarity Index
(SSIM)
Der SSIM-Index ist ein Wert, der die Abweichungen zwischen Original
und komprimierter Version enthält.
Die Revolution in der Bildbearbeitung
Die SSIM-Veröffentlichung von 2004 wurde über 10.000 Mal zitiert,
womit sie in der Bildverarbeitung und Videotechnik eine der
meistzitierten Arbeiten aller Zeiten ist.
https://de.wikipedia.org/wiki/Strukturelle_%C3%84hnlichkeit

18. 18
It’s a kind of magic...
Vorgabe: min. 30 – max. 80 %
1. Stufe: 80 - 30 = 50
50 / 2 = 25 + 30 = 55 % (nächste Stufe)

19. 19
Bereich wird immer kleiner...
Bereich: 55 – 80 %
2. Stufe: 80 - 55 = 25
25 / 2 = 12. 80 – 12 = 68 %

20. 20
Bereich wird immer kleiner...
Bereich: 55 - 68 %
3. Stufe: 68 – 55 = 13
13 / 2 = 7 + 55 = 63 %

21. 21
Theorie und Praxis
Berechnungen und Vergleiche macht Software automatisch – und
rasend schnell. In max. sieben Durchläufen perfekt komprimiert.
https://www.youtube.com/watch?v=GVbRuYu661I

22. 22
Jpeg Recompress
Identische Kompression,
unterschiedliche Modi
9,95 MB: Original
1,45 MB: MPE
1,24 MB: SSIM
0,78 MB: SmallFry

23. 23
Jpeg Recompress
https://github.com/imagemin/jpeg-recompress-bin (Binary für Linux, Windows, Mac)
https://www.npmjs.com/package/imagemin-jpeg-recompress (Node JS)
jpeg-recompress
--accurate
--method smallfry
--strip
--quality low
--min 30
--max 80
quelle.jpg
ziel.jpg
Genauigkeit über Geschwindigkeit
Algorithmus (mpe, ssim, ms-ssim and smallfry)
EXIF/IPTC-Metadaten entfernen
Preset (low, medium, high and veryhigh)
Minimale Kompression in %
Maximale Kompression in %
quelle.jpg
ziel.jpg

24. 24
Welches Bild ist schneller sichtbar?
https://www.youtube.com/watch?v=rFSPqrUjcjQ

25. 25
Konventionelles vs. progressives JPG
Ladezeiten nahezu identisch,
aber „gefühlte Ladezeit“
rasend schnell bei progressive JPG
Gefühlte Ladezeit wichtig für User Experience!

26. 26
webP: Das Grafikformat von Google

27. 27
Vergleich: Optimiertes JPG vs. webP
42 KB (1057 x 764 Pixel) 21 KB (1057 x 764 Pixel)

28. 28
webP wird sich durchsetzen
Chrome, Edge und inzwischen auch Firefox = alle „relevanten“ Browser.
Nur Apple setzt mit HEIF auf ein eigenes Format und wird wohl scheitern.

29. 29
webP ausliefern, ohne Quelltext zu ändern
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+).(jpe?g|png)$ $1.webp
[T=image/webp]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept
env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg and
png
SetEnvIf Request_URI ".(jpe?g|png)$"
REQUEST_image
</IfModule>
Auszug: .htaccess (Apache)

30. 30
webP: Der „saubere“ Weg
<picture>
<source srcset="image.webp" type="image/webp" >
<img src="image.jpg" alt="">
</picture>

31. 31
Google und Lazyloading

32. 32
Nein, GoogleBot scrollt nicht
● Vermeide Scroll-Events
● Verwende Intersection Observer API
Wenige Zeilen JavaScript, von Frameworks
unabhängig, daher rasend schnell.

33. 33
Erkennt GoogleBot einfach nur eine URL innerhalb des IMG-Tags
und findet so zum Bild?

34. 34

35. 35
Welche Methoden funktionieren wenn Du ein
inkompatibles Lazyloading verwendest?
Folgende Google-Empfehlungen wurden überprüft:
● Bilder zusätzlich in <noscript>
● ImageObject Auszeichnung (JSON-LD)
● ImageObject Auszeichnung (Microdata)
● Und als vierter Test, just for fun, der Verzicht auf LazyLoading :-)

36. 36

37. 37

38. 38
<noscript>
JSON-LD
Microdata

39. 39
Bilder-Rankings retten

40. 40
Bilder-Rankings retten
Auf Redirects (301, 302) verzichten
Bild an seiner “alten” URL belassen
In HTML das neue Bild einbinden
Google Image Bot “sieht” altes Bild -> Ranking bleibt erhalten
Google Bot sieht neues Bild -> Schickt Image Bot los
Google Image Bot sieht neues Bild -> Ranking übernommen

41. 06.06.2019
41
Bilder-Rankings retten
Altes Bild muss im Original-Zustand unter alten URL erreichbar bleiben.
Entfernen/Hinzufügen von EXIF/IPTC-Daten -> neues Bild
Bildgröße ändern -> neues Bild
Dateigröße optimieren -> neues Bild
Don‘t panic: Bleibt die Bild-URL unverändert, kommen die Rankings (nach kurzer
Unterbrechung) oft/meist zurück. Abwägen, ob Rankings den Mehraufwand
rechtfertigen (eher bei Online Shops als bei Blogs).

42. 42
Achtung: Das sind für Google dann neue Bilder!
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+).(jpe?g|png)$ $1.webp
[T=image/webp]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept
env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg and
png
SetEnvIf Request_URI ".(jpe?g|png)$"
REQUEST_image
</IfModule>
Auszug: .htaccess (Apache)

43. 43
Größeres Bild für GoogleBot

44. 44
Größeres Bild für GoogleBot
<img
src=”taxiteller.jpg”
srcset=”taxiteller-300.jpg 300w,
taxiteller-600.jpg 600w,
taxiteller-900.jpg 900w,
taxiteller.jpg 2400w”
alt=”Bilder SEO Insights”
>
<- das sieht Google
<- wir würden es auch dem User zeigen

45. 45
Funktioniert das wirklich?

46. 46
Ja, es funktioniert! :-)

47. 47
...immer und überall?
Ohne Internet Explorer wäre die Welt ein bisschen besser. ;-)

48. 48
In Kontakt bleiben
Du findest mich auf Facebook
https://www.facebook.com/michael.schilling09
Oder einfach per Smartphone scannen…