Responsive Images in WordPress

  • madblacko3000

    (@madblacko3000)


    vor 2 Jahren, 2 Monaten

    Hallo zusammen,

    ich möchte einmal mit einer Frage bezüglich responsiven Images zu euch kommen.
    Ich bastel gerade an meinem SEO-optimierten WP-Setup und habe nicht ganz verstanden, was hier Best Practice sein soll.

    Laut diesem Artikel ist die perfekte Image-Aufbereitung das jeweilige Bild pro Viewport dediziert bereitzustellen.
    Also das Bild jeweils auf die richtige Größe für Desktop, Tablet und Mobile zugeschnitten.

    Irgendwie komme ich hier nicht wirklich weiter. Ich lese überall, dass responsive Images seit WP 4.4 mit im Core integriert sind und Lighthouse von Google streicht bei meinen Tests auch nichts an. (habe es mit Optimole / Imagify gestestet), aber eigentlich müsste der Code ja eigentlich so aussehen:

    <picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

    Auf meiner Testseite, bei der Google auch ein grün gibt sieht der Code so aus:
    <img width="1024" height="683" src="https://mlhsrnz7xtn4.i.optimole.com/sz8DPfw.XA8d~16941/w:1024/h:683/q:mauto/f:avif/DOMAINPATH/Bild.jpeg" class="attachment-large size-large entered lazyloaded" alt="" data-lazy-src="https://mlhsrnz7xtn4.i.optimole.com/sz8DPfw.XA8d~16941/w:1024/h:683/q:mauto/f:avif/https://Bild.jpeg" data-ll-status="loaded">

    Verstehe ich hier etwas Grundlegendes für die Bewertung der Responsive Image Metrik nicht?

    Bin dankbar für jeden Input!

    LG. MBlacko3k

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 2 Jahren, 2 Monaten

    Wie sollen wir das jetzt reproduzieren, um dir eine Antwort zu geben?

    Wenn du in der Mediathek ein Bild hochlädst, wird das Bild je nach Bildgröße auf eine maximale Größe von 2560 Pixeln und weitere Größen entsprechend Einstellungen > Medien und Vorgaben des Themes skaliert. Diese Bildgrößen werden dann in einem <figure>– und <img>-Tag mit Bildquelle und Größenabgaben ausgegeben, z.B.

    <figure class="wp-block-image size-medium">
<img 
  src="https://example.com/wp-content/uploads/2022/03/bild-300x200.jpg" 
  alt="Bildbeschreibung" 
  class="wp-image-135" 
  srcset=
    "https://example.com/wp-content/uploads/2022/03/bild-300x200.jpg 300w, 
     https://example.com/wp-content/uploads/2022/03/bild-1024x682.jpg 1024w, 
     https://wp.test/wp-content/uploads/2022/03/bild-768x511.jpg 768w, 
     https://wp.test/wp-content/uploads/2022/03/bild.jpg 1536w, 
     https://wp.test/wp-content/uploads/2022/03/bild-2048x1363.jpg 2048w" 
  sizes="(max-width: 300px) 100vw, 300px" 
  width="300" 
  height="200">
</figure>

    Damit wird vor allem Bandbreite gespart, wenn die Webseite mit Endgeräten mit geringerer Bildschirmauflösung angeschaut wird. Geringere Bandbreite und damit verbundene bessere Performance wirken sich auch positiv auf die Suchmaschinenbewertung der Website aus.

    Wenn bei dir nur ein <img>-Tag ausgegeben wird, müsste man klären, an welcher Stelle die Ausgabe erfolgt, wodurch die Ausgabe veranlasst wird (Theme, Plugin) und ob es einen bestimmten Grund gibt, wieso das so ist. Nur anhand eines HTML-Tags lässt sich das aber nicht beantworten.

Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Responsive Images in WordPress“ ist für neue Antworten geschlossen.