Responsify WP – Plugin für adaptive Bilder im Test

Plugin Responsify WP - adaptive Bilder einfachst anbieten
Plugin Responsify WP – adaptive Bilder einfachst anbieten

Ich nahm mir die letzten Wochen wieder Zeit einige Plugins zu testen die adaptive Bilder versprechen. Der Fachbegriff adaptive Bilder bedeutet, dass sich die Bildgröße je benutzter Bildschirmgröße ändert. Dabei stieß ich auf das Plugin Responsify WP von Stefan. Die Bedienung wurde mit jeder Version dieses Plugins einfacher und die Funktion besser. Hier mein Erfahrungsbericht.

Zur Zeit habe ich Responsify WP auf meiner basteln.co.at aktiv und ich bin damit sehr zufrieden.

Responsify WP die Eckdaten und Einstellungen

Plugin: Responsify WP Version 1.8.0 von Stefan Ledin.

Nach der Aktivierung des Plugins findest du unter Dashboard ==> Einstellungen ==> RWP folgende Möglichkeiten.

Bildgrößen werden angezeigt, nutze nicht immer alle
Bildgrößen werden angezeigt, nutze nicht immer alle
  • Soll das Plugin nur innerhalb the_content aktiv werden oder auch überall dort wo du the_post_thumbnail nutzt.
  • Wie soll das Plugin ausliefern – Markup pattern? Kennst du dich hier nicht aus, dann hake einfach „img“ an.
  • Welche verhandenen Bildgrößen soll das Plugin nutzen?
    Dein Theme bietet vermutlich viele Bildgrößen, es ist aber nicht immer nötig alle zu verwenden, das bläht nur den Quellcode auf.
  • Selbst Retina kannst du aktivieren, ich habe das nicht getan.
  • Du kannst entscheiden, ob das Plugin alle .png, jpg oder gif ausschließen soll.
  • Picturefill ja – nein. Ich empfehle ja, weil viele Browser adaptive Bilder sonst nicht verstehen.

wieviel Bites&Bytes ersparst du deinen NutzerInnen

adaptive Bilder helfen sparen
adaptive Bilder helfen sparen

Das kannst du auf der Demo Site selbst testen: Demo von Responsify WP

Responsify WP im Theme nutzen – zb Headerbild

Mache dies bitte nur in einem ChildTheme, außer du hast dein Theme selbst programmiert.

Als Beispiel für viele Einsatzmöglichkeiten das Headerbild:

<header>
<?php the_post_thumbnail( 'full' ); ?>
</header>

Magst du den simplen img-Tag nutzen:

 
 $thumbnail_id = get_post_thumbnail_id( $post->ID );

 // Generate an <img> tag with srcset/sizes attributes.
 echo rwp_img( $thumbnail_id );

Magst du picture nutzen:

$thumbnail_id = get_post_thumbnail_id( $post->ID );
 // Generate a <picture> element
echo rwp_picture( $thumbnail_id );

Dieses Prinzip kannst du immer dann anwenden, wenn du im Template the_post_thumbnail aufrufst.
Ist jedoch nur dann sinnvoll, wenn deine Bilder dort die Grenzen eines kleinen Ausgabegerätes sprengen.

Responsify WP – bietet viele Filter für Coder

Auf Github findest du eine ausführliche Dokumentation des Plugins und auch seine Filter mit einigen einfachen Beispielen.

Ein Beispiel wie du die ausgelieferten srcset -Größen je CSS Klasse des Bildes ändern kannst:

add_filter( 'rwp_edit_attributes', 'edit_attributes' );
function edit_attributes( $attributes ) {
   if ( strpos($attributes['class'], 'size-medium') ) {
   $attributes['sizes'] = '(max-width: 1199px) 250px, 350px';
    }
  return $attributes;
}

mein Fazit von Responsify WP

Es ist einfach zu nutzen. Es arbeitet mit Cachify /Sergej Müller und WP deferred javaScript/Willy Bahuaud, Grégory Viguier und Daniel Roch sehr gut zusammen.

Es wird aktiv betreut, Stefan bietet auch wirklich Support im Forum und ich werde es auch hier sicher bald aktivieren, weil das derzeitig aktive Plugin nicht mehr weiter betreut wird und doch so seine Macken hat.

Kennst du Responsive WP? Was sind deine Erfahrungen damit?

Artikelserie: je Device das richtige Bild

Dieser Beitrag ist Teil einer Artikelserie zum Thema. Diese wächst langsam, weil jeder Test doch seine Stunden benötigt. Aber sie wächst die Serie ;-).

  1. adaptive Bilder – Plugin Hammy im Test
  2. Responsify WP – Plugin für adaptive Bilder im Test
doch wars hilfreich, freu ich mich über ein +1
9

9 Beiträge zu “Responsify WP – Plugin für adaptive Bilder im Test

  1. Kommentar Autor
    Andy
    Kommentar

    Ich denke, es ist ein hilfreiches Plugin, das ich auf alle Fälle einmal ausprobieren werde. Grade, was die Ladezeiten der Bilder anbetrifft, sollte man sehen, dass diese möglichst kurz sind. Nicht jeder verfügt über einen schnellen Internetanschluss und grade bei mobilen Geräten dürfte eine Verkürzung der Ladezeiten einiges bringen.

  2. Kommentar Autor
    Monika
    Kommentar

    hi Andy
    deine Site lädt zum heutigen Tage 24 CSS Dateien und 32 JS Dateien, daher habe ich das Gefühl, dass die Reduktion der Bildgrößen bei deiner Site derzeit zwar nett, aber akut sinnlos ist. :-)

    Links sind hier nofollow :-)

  3. Kommentar Autor
    Wally
    Kommentar

    Danke für die Info. Meine Frage: bei mir steht bei den Settings des Plugins:
    „Notice that this snippet is required for the picture element to work in all browsers:

    document.createElement( „picture“ );

    Wohin genau wird das eingebaut?
    Wo rein soll ich das schreiben genau?

    Und auch ohne dieses Script Einbau, habe ich schon Ergebnisse gesehen, da waren bei mir dann auf o.g. Site, manche Bilder eierförmig und manche oval :( . Habe das Plugin erstmal hier deaktiviert. Nach dem deaktivieren war alles wieder schön normal, wie es sein soll. Aber ich kann es sicher auf einer meiner anderen Sites nutzen.

  4. Kommentar Autor
    Monika
    Kommentar

    hi Wally

    das mit dem picture Element brauchst du nur, wenn du das nötige Script ausschaltest => dazu rate ich niemals. Setze die Einstellung auf „img“ und dann brauchst du dir darüber keine Sorgen machen.

    Wenn die Bilder unförmig aussehen passen die vorhandenen Bildgrößen nicht, dafür kann dieses Plugin nichts, es bedeutet nur, dass in deinem Theme die Bilder via CSS auf „passend“ gemacht werden, aber an und für sich die falsche Größe haben.

  5. Kommentar Autor
    Wally
    Kommentar

    Ja vielen Dank.
    Ja das Plugin kann dafür nichts, richtig, dennoch verformt es ja trotzdem meine Bilder, die rund sein sollen :) Für andere Seiten ist es bestimmt passend, ich probiere das Plugin einmal auch woanders. Danke für die Tipps nochmal.

  6. Kommentar Autor
    Matthias
    Kommentar

    Hallo Monika,

    eine schöne Vorstellung dieses hilfreichen Plugins.
    Wenn ich auf deine Bastel Seite schaue, kommen mir die Breakpoints für das scrset aber komisch vor. Da wird auch bei Smartphones das größte Bild geladen.
    Ich nutze das Plugin übrigens auch auf meinem GPS Radler Blog.

    Gruß
    Matthias

  7. Kommentar Autor
    Wally
    Kommentar

    Hi, noch mal kurz:
    „… es bedeutet nur, dass in deinem Theme die Bilder via CSS auf “passend” gemacht werden, aber an und für sich die falsche Größe haben….“

    Nicht im Theme! Da sind mit Plugin alle passend und Ok geblieben mit dem Plugin. In den einzelnen Galleriebildern, was von Jetset ist (Circle Jetset) da waren sie eierförmig und oval und teils deformiert. Nicht im Theme. Nur zur Info.
    Aber ok, jedenfalls ist es nicht das richtige Plugin für DIESE Site.
    Für andere vielleicht, das muss ich dann aber noch ausprobieren gelegentlich.

    Beste Grüsse und danke für deine Mühen immer!
    lg, Wally

  8. Kommentar Autor
    We
    Kommentar

    Mit Responsify habe ich schon letzten September experimentiert und gute Erfahrungen machen können (die Details habe ich seinerzeit auch in einem Artikel dokumentiert).
    Wenn ich jetzt hier die Codebeispiele mit rwp_img etc. sehe, könnte ich wohl meine damalige Lösung überarbeiten und verschlanken – da hat Stefan ja anscheinend noch ein paar nützliche Features eingebaut…

  9. Ping WordPress-Newsletter Nr. 179 und 180 » perun.net