adaptive Bilder – Plugin Hammy im Test

Review des Plugins Hammy - je Device das richtige Bild
Review des Plugins Hammy – je Device das richtige Bild

Unter dem Begriff responsive Bilder versteht man Bilder, die sich an das Layout anpassen. Ein adaptives Bild passt sich dem Device, dem verwendeten Gerät an. Wichtig ist dies für alle mobilen Geräte, wo es auch um die Datenmenge geht die das Gerät herunterladen muss bevor man überhaupt etwas sieht.

Schick ich nun ein 1200 x 800px Bild an ein Smartphone, bricht bei einer responsiven Website nicht das Layout, aber der User lädt zig kb herunter, um ein schlussendlich ein 300 x 200px großes Bild zu sehen. Das verschwendet Ressourcen.

Die Technik für adaptive Bilder ist da, wie immer hinken die Browser hinterher. Das Plugin Hammy von Noel Tock verschafft hier Abhilfe. Ich habe es getestet und schreibe hier meine Erkenntnisse und Erfahrungen damit auf. Du kannst dann sicher besser entscheiden, ob du es nutzen magst oder nicht.

Kurzinfo
Plugin Hammy ist von Noel Tock aus der Schweiz.
Es nutzt folgende Projekte: WP-Thumb und jquery picture.

Setze die richtigen Breakpoints für dein Theme

Breakpoints setzen, damit das Plugin weiß welche Bildgrößen gebraucht werden
Breakpoints setzen, damit das Plugin weiß welche Bildgrößen gebraucht werden

Nach dem Aktivieren des Plugins findest du die Einstellungen unter Dashboard ==> Einstellungen ==> Hammy.

Zuerst musst du die richtige Klasse oder ID herausfinden wo Hammy aktiv sein soll.
Meist ist dies entry-content. Body wäre natürlich sehr einfach, aber sinnlos. Die ähnlichen Artikel hier unterhalb jedes Artikels haben eine feste Breite von 250px. Dafür brauch ich das Plugin sicherlich nicht.

Danach bleibt dir ein bisschen Rechnerei nicht erspart. Wie das geht steht in der FAQ gut erklärt.

Trial&error geht auch: Spiele dich solang mit dem kleinsten Breakpoint bis Google Page Speed nicht mehr die falsche Bildgröße in der mobilen Ansicht bemeckert. Aber bitte mache das nicht, wenn grad zig-Leute auf deiner Site sind, sie werden es dir danken :-).

Wähle weise die Thumbnails wo das Plugin aktiv sein soll

welche Bildgröß, soll das Plugin ignorieren
welche Bildgröß, soll das Plugin ignorieren

Exclude: wp-smiley, gallery-thumb, und alle deine benutzerdefinierten Thumbnailgrößen, die sowieso klein genug sind.



Kann es auch features images?

Hammy stürzt sich auf alle Bilder innerhalb von the_content. D.h. magst du es außerhalb von the_content nutzen, musst du dir einen Fork schreiben.

Was ist mit Custom Post Types?

Derzeit keine Chance.

Hammy takes your regular content images (only within posts and pages, not custom post types) and regenerates a number of smaller sized images.

Noel Tock

wo sind die Bilder gespeichert

Hammy speichert die Bilder in „deinbilderordner/cache/
Meist ist dies wp-content/uploads/cache/bildnameordner/(ziffern).jpg

HTTP Requests contra mobile Bilder

Das Plugin braucht mindestens zwei Scripte und eine CSS Datei. Diese ist sehr klein und wer ein Child-Theme oder sein eigenes Theme nutzt kann dies leicht in die style.css des Themes geben.

Dazu ist es nötig vorher das Plugin-CSS rauszunehmen.

function mtsmag_deregister_scripts() {
   wp_dequeue_style( 'hammy-stylesheet' );
}
add_action( 'wp_print_scripts', 'mtsmag_deregister_scripts', 100 );

Nun gehört in die style.css des verwendeten Themes folgendes:

figure.hammy-responsive{
display:block;
margin:0;
-webkit-margin-before:0;
-webkit-margin-after:0;
-webkit-margin-start:0;
-webkit-margin-end:0
}

Am besten alles in einer einzigen Zeile geschrieben.

die hammy.js einsparen

Das empfehl ich nur, wenn du dich wirklich auskennst und auch verstehst und weißt was du tust. Ich übernehme dafür auch keinen Support.

Was ich allerdings empfehle ist Noel ganz viel Rückmeldung zu geben, dass die Scripte verkleinert gehören. Eventuell, dass er sie zu einer einzigen Datei zusammenfügt. Alles anders ist selten update-sicher.

Einschränkungen von Hammy

  • Legst du wert auf korrekte Dateinamen, kannst du das Plugin nicht nutzen.
  • Die Qualität der Komprimierung ist zu überprüfen.
  • Es arbeitet nicht mit Flexslider. Mehr Inkompatibilitäten musst du selbst herausfinden. Es wäre nett, wenn du sie dann mit anderen teilst :-)

Alternativtext oder alt-tag

Derzeit find ich den nur unter dem ausgelieferten noscript mit kaputten Entities bei ö ä ü ß. Ich bin noch unsicher wie ich das bewerten sollte…

Da Hammy hier derzeit aktiv ist, (kann sich morgen bereits wieder ändern ) schreibe ich die Alternativtexte mit Entities, das sieht dann so aus:

alt="Breakpoints setzen, damit das Plugin weiß 
welche Bildgrößen

Außerdem hab ich einen Fork aktiv, ich änderte die hammy.php damit ich bei den Bildern alt und title habe. Wer es kann weiß wie das geht und kennt die Risken.

Im Supportforum informierte ich den Plugin Autor und wer mag, kann auf Github diesbezüglich aktiv werden oder ebenfalls im Supportforum. Kostenfreie Plugins werden besser, wenn es Feedback gibt.

Performance contra adaptive Bilder

Wie erwähnt braucht das Plugin derzeit mindestens zwei JavaScripts Dateien, die noch nicht komprimiert sind.
Wenn du dich nicht traust die CSS Datei zu eliminieren kommt die auch noch dazu, auch wenn sie irr klein ist. Hammy lädt diese Datei zwar im Footer, aber es ist dennoch ein HTTP-Request.

D.h. es kommt wie immer drauf an: Hast du eine bestehende Site mit wirklich vielen sehr großen Bildern pro Beitrag, in der Kategorieübersicht oder auf der Startseite, dann kann das Plugin die Auslieferungsgeschwindigkeit der Site verbessern.

Benutzerfreundlich ist es sicherlich

100% liefert es die richtige Größe je Device, wenn du die Breakpoints richtig gesetzt hast ==> Google Page Speed wertet dies sicher sehr positiv. Es kann also adaptive Bilder. :-)

mein Fazit

Das Plugin Hammy ist für eine bestehende Seite mit sehr vielen großen Bildern sicher eine Möglichkeit benutzerfreundlicher auszuliefern.
Kostenfreie Plugins sind für mich wie „ein Kleid von der Stange“. Es gefällt, kann aber nie 100% passen, dann heißt es abwägen.

Die kaputten Entities weisen auf eine saloppe Programmierung hin

Artikelserie:je Device das richtige Bild

Damit man die richtige Bildgröße je Device ausliefern (adaptive Bilder) kann gibt es mehrere Möglichkeiten. Ich teste immer wieder mal eine, aber solche Tests sind sehr zeitaufwändig – 3-4Std nur für den Test sind da weg wie im Flug. D.h. es wird eine Testserie, aber ich verspreche nicht wann der nächste Artikel kommt, weil das kann ich nicht.

  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