Hier möche ich euch zeigen, wie ihr das WordPress Feature : Responsive Images, welches WordPress ab der Version 4.4 eingefügt hat, entweder mit oder auch ohne Plugin deaktivieren könnt. Dazu interessante Link Tipps.

Zunächst einmal der Beitrag in make.wordpress.org ⇒ „responsive Images in WordPress 4.4“: how it works. :-) In diesem Link Tipp wird genau erklärt, wie es funktioniert. Gleichzeitig bietet dieser Beitrag sehr interessante Kommentare, welche weitere Einsicht geben.

Hier ein paar FAQ ..

Werden Bilder in responsivem Design nicht ohnehin angepasst ?

Eine gute Frage. Letztlich ist diese auf jeden Fall mit „ja” zu beantworten. Bilder, welche sich in einem Webauftritt befinden, welcher responsive erstellt wurde, werden auch responsive angezeigt. Das heisst, diese Bilder passen sich auf jeden Fall automatisch an die verschiedenen Ausgabegeräte an. Diese Anpassung wird über CSS gesteuert.

Was ist dann der Unterschied zwischen dem neuen WordPress Feature „Responsive Images“ und „Bilder in responsivem Design“ ?

Auch eine gute Frage. Der Unterschied liegt eigentlich darin, dass das WordPress Feature „Responsive Images” pro Bild mehrere unterschiedliche Größen erzeugt. Je nach dem Ausgabegerät, also Smartphone, Tablet oder PC, stellt nun WordPress dem Browser unterschiedliche Größen zur Verfügung. Der Browser nimmt sich die Größe, welche für ihn – von der Größe her, und damit ist dann auch die Ladegeschwindigkeit gemeint – am besten passt.

Vorteil von „Responsive Images”: Die Seite ladet unter Umständen schneller, weil der Browser die kleinste Bildgröße, welche das WordPress  Feature „Responsive Images “ zur Verfügung gestellt hat, auswählt.

Nachteil von „Responsive Images”: Der Browser schaut allerdings nicht darauf, ob diese Bildgröße dann auch scharf und optimal dargestellt wird. :-(

Nochmal der genaue Unterschied: Bei Bildern in responsivem Design wird ein einziges Bild erzeugt, welches über CSS dann an die unterschiedlichen Ausgabegeräte angepasst wird. Das Problem dabei ist, dass auf kleinen Ausgabegeräten z.B. einem Handy bzw. Smartphone das  Bild von der Byte Anzahl genauso gross ist, wie auf einem großen Gerät. Das wiederum erhöht die Ladedauer auf kleinem Gerät.

Beim WordPress Feature “ Responsive Images “ wird ein Bild in WordPress hochgeladen und WordPress erzeugt von diesem Bild mehrere Bilder in unterschiedlicher Größe. Der Browser des Endgerätes kann sich nun das für ihn am besten passende aussuchen. Mit am besten passend ist gemeint, er sucht das, welches die kleinste Byte Zahl hat und welches er am schnellsten ausliefern kann.

Ursache für unscharfe Bilder ..

Bilder sind ein sehr komplexes Thema. Es gibt viele Ursachen für unscharfe Bilder. Einfach auf unterschiedlichen Endgeräten testen.

So deaktivierst du Responsive Images mit Plugin

Dazu installierst du ganz einfach das Plugin: Disable Responsive Images und aktivierst es. Das war es auch schon. Falls das WordPress Feature „Responsive Images”  die Ursache für unscharfe Bilder war, – bzw. die Inkompatibilität dieses Features mit einem Theme oder Plugin –  so ist das Problem nach der Installation sofort behoben. Falls nicht, war das auf jeden Fall nicht der Auslöser.
Hier noch als Link Tipp: die Diskussion um das Plugin und das Theme auf wordpress.org

Hier ein Ausschnitt aus der Diskussion, wo der Plugin Autor extra betont, wie wichtig das neue WordPress Feature „Responsive Images“ ist:

• Don’t we want our images to be responsive for mobile?

• Joseph Fusco
  Member
  Posted 3 months ago #
  

  @turmell1 We absolutely do but some plugins/themes are having conflicts with the new way WordPress handles responsive images using srcset. It is strongly encouraged to use srcset as it allows browsers to load different size files rather than just 1 image resized with css across devices. Your images will still look fine, they just wont really be optimized as nicely as how WordPress 4.4 handles it. Keep in mind that plugin only prevents core from adding the scrset to your post & page images. It does not remove css that makes your images responsive.  >> wordpress.org

So deaktivierst du Responsive Images ohne Plugin

Falls du lieber ein Plugin sparen möchtest, so genügt auf jeden Fall folgendes Code Snippet:

Und so geht’s:
Öffne die functions.php deines WordPress Themes und füge untenstehenden Code ein. Fertig.

<?php
// Remove the reponsive stuff from the content
remove_filter( 'the_content', 'wp_make_content_images_responsive' ); 
?>

Ein weiterer  Link Tipp zu “ Tests und Gedanken zu Responsive Image in WordPress .. findet ihr bei shellcreeper und fastwp, sowie torquemag.

Letzter Tipp:

Joe McGill gibt noch den Tipp, sich etwas Zeit zu nehmen und dem neuen WordPress Feature “ Responsive Images“ eine Chance zu geben:

There may be valid scenarios where you would not want this functionality

….. I would suggest spending a bit of time getting familiar with the benefits of responsive images and how they work before making that decision, because generally, the benefits to your users (and your bandwidth) should be worth it….  make.wordpress.org

Link Tipp von Joe McGill  – Blogserie über Responsive Images

FAZIT:

Wichtig ist einfach, am Laufenden zu bleiben. Das Plugin hat den Vorteil, dass es eben schnell wieder deaktiviert werden kann. Auf der anderen Seite benötigt jedes zusätzlichen Plugin wieder Ladezeit.

Ebenso ist der Gedanke der „Responsive Images” bzw. das WordPress Feature „Responsive Images“, welches ja vorher schon als Plugin vorhanden war und nun in WordPress direkt integriert wurde, ein zukunftweisender.

Allerdings setzt er voraus, dass das vorhandene WordPress Theme mit dem WordPress Core in diesem Punkt harmoniert und die Browser „mitspielen“.