Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bilder, Bilder, Bilder / 37. SEO-Stammtisch Ruhrgebiet

285 views

Published on

Weshalb ist es (oftmals) keine gute Idee ist, Bilder bereits vor dem Upload stark zu komprimieren? Wann und wie kann man Bilder optimal komprimieren, automatisch und ganz ohne externen Service? Wie rettet man seine Bilder-Rankings, z.B. bei einem Relaunch? Wie funktioniert Google-konformes Lazyloading? Und wie schiebt man Google ganz legal größere Bilder unter und steigert so seine Bilder-Ranking?

Michael Schilling ist Head of SEO bei Spiegel21 und begeisterter Hobbyfotograf, der so manchen Promi für Getty Images abgelichtet hat. Neben Martin Mißfeldt gehört er zu den wenigen (deutschen) SEOs, die sich intensiv mit Bilder-SEO beschäftigen.

Vortrag vom 30. Januar 2019 auf dem SEO-Stammtisch Ruhrgebiet in Bochum.

https://www.facebook.com/groups/seo.stammtisch.ruhrgebiet/

Published in: Internet
  • Be the first to comment

Bilder, Bilder, Bilder / 37. SEO-Stammtisch Ruhrgebiet

  1. 1. 30.01.2019 Michael Schilling
  2. 2. Bilder, Bilder, Bilder 30.01.2019 2 Das ist doch ganz einfach.... Michael Schilling
  3. 3. 30.01.2019 3 <img src=”mona-lisa.jpg” alt=”Mona Lisa”> Michael Schilling
  4. 4. Bilder, Bilder, Bilder 30.01.2019 4 Das ist doch gar nicht so einfach.... Michael Schilling
  5. 5. Michael Schilling 30.01.2019 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 Michael Schilling
  6. 6. Bilder, Bilder, Bilder 30.01.2019 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 Michael Schilling
  7. 7. Bilder komprimieren... 30.01.2019 7 … und weshalb es vor dem Upload (meist) keine gute Idee ist. Michael Schilling
  8. 8. Was ein CMS nach dem Upload macht... 30.01.2019 8Michael Schilling
  9. 9. Was ein CMS nach dem Upload macht... 30.01.2019 9 Upload: a.jpg (1620 x 1080 px) Auf dem Server: a.jpg 83 KB (Original) … a-1620x1080.jpg (1620 x 1080 px) Michael Schilling
  10. 10. Wie kann das passieren? 30.01.2019 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) Michael Schilling
  11. 11. Bilder komprimieren... 30.01.2019 11 • Niemals vor dem Upload • Und anschließend auch nur die vom CMS erzeugten Dateien. Michael Schilling
  12. 12. 30.01.2019 12 Alle Bilder von Hand zu optimieren, das macht sehr, sehr viel Arbeit und ist ganz schön monoton.
  13. 13. 30.01.2019 13 Regler schubsten und in 1:1 Ansicht die Ergebnisse begutachten ist so bäh.
  14. 14. 30.01.2019 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 Michael Schilling
  15. 15. 1530.01.2019 Auf dem Weg zur perfekten Komprimierung
  16. 16. 30.01.2019 16 In sieben Stufen kinderleicht perfekt komprimiert
  17. 17. 30.01.2019 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 Michael Schilling
  18. 18. 30.01.2019 18 It’s a kind of magic... Vorgabe: min. 30 – max. 80 % 1. Stufe: Durchschnitt aus 30 und 80 = 50 50 / 2 = 25 + 30 = 55 % (nächste Stufe) Michael Schilling
  19. 19. 30.01.2019 19 Bereich wird immer kleiner... Bereich: 55 – 80 % 2. Stufe: Durchschnitt aus 55 und 80 = 25 25 / 2 = 12. 80 – 12 = 68 % Michael Schilling
  20. 20. 30.01.2019 20 Bereich wird immer kleiner... Bereich: 55 - 68 % 3. Stufe: Durchschnitt aus 55 und 68 = 13 / 2 = 7 + 55 = 63 % Michael Schilling
  21. 21. 30.01.2019 21 Theorie und Praxis Berechnungen und Vergleiche macht Software automatisch – und rasend schnell. In max. sieben Durchläufen perfekt komprimiert. Video auf Youtube ansehen Michael Schilling
  22. 22. 30.01.2019 22 Jpeg Recompress Identische Kompression, unterschiedliche Modi 9,95 MB: Original 1,45 MB: MPE 1,24 MB: SSIM 0,78 MB: SmallFry Michael Schilling
  23. 23. 30.01.2019 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 Michael Schilling
  24. 24. 30.01.2019 24 Welches Bild ist schneller sichtbar? Video auf Youtube ansehen Michael Schilling
  25. 25. 30.01.2019 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! Michael Schilling
  26. 26. 30.01.2019 26 webP: Das Grafikformat von Google Michael Schilling
  27. 27. 30.01.2019 27 Vergleich: Optimiertes JPG vs. webP 42 KB (1057 x 764 Pixel) 21 KB (1057 x 764 Pixel) Michael Schilling
  28. 28. 30.01.2019 28 webP wird sich durchsetzen Chrome, Edge und demnächst Firefox = alle „relevanten“ Browser. Nur Apple setzt mit HEIF auf ein eigenes Format und wird wohl scheitern. Michael Schilling
  29. 29. 30.01.2019 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) Michael Schilling
  30. 30. 30.01.2019 30 webP: Der „saubere“ Weg <picture> <source srcset="image.webp" type="image/webp" > <img src="image.jpg" alt=""> </picture> Michael Schilling
  31. 31. 30.01.2019 31 Google und Lazyloading Michael Schilling
  32. 32. 30.01.2019 32 Nein, GoogleBot scrollt nicht ● Vermeide Scroll-Events ● Verwende Intersection Observer API Script-Empfehlung: LazySizes ● Prüfe mittels NodeJS Script von Google https://github.com/aFarkas/lazysizes Michael Schilling
  33. 33. 30.01.2019 33 https://github.com/GoogleChromeLabs/puppeteer-examples/blob/master/lazyimages_without_scroll_events.js node lazyimages_without_scroll_events.js --url=<URL> --save -o results.html Michael Schilling
  34. 34. 30.01.2019 34 https://github.com/GoogleChromeLabs/puppeteer-examples/blob/master/lazyimages_without_scroll_events.js node lazyimages_without_scroll_events.js --url=<URL> --save -o results.html Michael Schilling
  35. 35. 30.01.2019 35 Welche Methoden funktionieren wenn der GoogleBot keine URL im SRC auslesen kann? 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 :-) Michael Schilling
  36. 36. 30.01.2019 36
  37. 37. 30.01.2019 37
  38. 38. 30.01.2019 38 <noscript> JSON-LD Microdata
  39. 39. 30.01.2019 39 Bilder-Rankings retten Michael Schilling
  40. 40. 30.01.2019 40 Bilder-Rankings retten Redirects (301, 302) funktionieren bei Bildern nicht* 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 * für den Google ImageBot Michael Schilling
  41. 41. 30.01.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). Michael Schilling
  42. 42. 30.01.2019 42 Größeres Bild für GoogleBot Michael Schilling
  43. 43. 30.01.2019 43 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 Michael Schilling
  44. 44. 30.01.2019 44 Funktioniert das wirklich? Michael Schilling
  45. 45. 30.01.2019 45 Ja, es funktioniert! :-)
  46. 46. 30.01.2019 46 ...immer und überall? Ohne Internet Explorer wäre die Welt ein bisschen besser. ;-) Michael Schilling
  47. 47. 30.01.2019 47 Fragen? https://www.facebook.com/michael.schilling09 https://twitter.com/micha_schilling Michael Schilling
  48. 48. 30.01.2019 48 Danke! Michael Schilling

×