Srcset & Sizes anstelle Background-Inlinestyle

[xwolfde]

Die Bilder des Sliders werden derzeit als Inline-Style übertragen.

Beispiel:

<div class="slick-slide" style="background: url(&quot;https://www.fau.de/files/2019/09/Playmobil_Fuchs4348-1.jpg&quot;) center center rgb(241, 241, 241); width: 100%; display: inline-block;" aria-hidden="true"><div class="container"><div class="row"><div class="container ilifautpl-slider-content"><a href="https://www.fau.de/2019/09/header/universitaetsgruender-als-playmobil-sonderfigur/" tabindex="0"><h3>Unigründer als PLAYMOBIL-Sonderfigur</h3></a></div></div></div><div class="ilifautpl-slide-credits"> FAU/Kurt Fuchs</div></div>

Dies sorgt leider dafür, dass das Bild in originaler Auflösung (https://www.fau.de/files/2019/09/Playmobil_Fuchs4348-1.jpg) geladen werden muss, egal wie groß der Viewport des Endgeräts ist.

Dies führt gerade bei Handys, die in den Nach-Werktagszeiten und an den Wochenenden die Mehrzahl aller Zugriffe machen, zu einem schlechten Ladeverhalten (die Hintergrundgrafik wird erst später geladen und angezeigt. Da es auch noch inline-style ist sogar nach dem Rendern der Inhalte). Daher wird wahrscheinlich mit einer Penelty Seitens Google zu rechnen sein, da das Ladeverhalten von Handys für diese höhere Priorität einnimmt.

Lösung: Bitte an den vorhandenen Code des Themes orientieren und die Bilder direkt mit einbinden.

Im Backend sind für jedes hochgeladene Bild auch alternative Auflösungen vorhanden, die man u.a. mit wp_get_attachment_image_srcset() erhalten könnte. Das Theme selbst nutzt für den eigenen Slider solche Funktionen:

```
    $sliderimage = wp_get_attachment_image_src($imageid, 'hero'); 
        $imgdata = fau_get_image_attributs($imageid);
        $copyright = trim(strip_tags( $imgdata['credits'] ));
        $slidersrcset =  wp_get_attachment_image_srcset($imageid,'hero');
        $slidersrcsizes = wp_get_attachment_image_sizes($imageid,'hero' );

wobei hier das Bildformat hero mit der neuen eigenen size zu ersetzen sei.

[SebastianHonert]

Ich stimme zu, das ist ein dringendes Problem und sollte schnell gefixt werden.

Wenn wir wp_get_attachment_image_srcset() verwenden, was ich für sinnvoll halte, müssten wir für das Plugin mit add_image_size() weitere Bildgrößen hinzufügen, um ein passendes Source-Set zu erhalten. Wir wollten ja vermeiden, dass wir die herkömmlichen Bildgrößen des Themes für die Slides verwenden (die kleinen 16:9-Slides für mobil waren ja ein Kritikpunkt). Ist das so richtig?

Und wäre es dann aus deiner Sicht unproblematisch, für das Plugin weitere Bildgrößen zu definieren? Dann müssten wir einmal überlegen, welche Bildgrößen wir konkret benötigen, um die verschiedenen Displayklassen zu bespielen, und welche wir schon verwenden können ("hero", "herobanner" etc.). Hast du da Vorschläge oder einen Anhaltspunkt, ob es Standard-Bildgrößen gibt, die sozusagen "Cross Display" gut funktionieren? Danke!

[xwolfde]

IMHO spricht nichts dagegen, wenn das Plugin eine eigene zusätzliche SIzes (oder mehrere definiert, die man dann nutzen kann.)

Ich denke aber für die kleinen Auflösungen sind die vorhandenen 2:1 und 3:2 Sizes aus dem Theme schon ausreichend. Diese Sizes werden ja automatisch erstellt wenn man ein Bild hochläd und sind daher jetzt schon bei jedem Bild vorhanden.

Das Theme bietet derzeit folgende Sizes:

/* Image Sizes for Slider, Name: hero - 1260:350, true */
add_image_size( 'hero', $defaultoptions['slider-image-width'], $defaultoptions['slider-image-height'], $defaultoptions['slider-image-crop']);   

/* Banner fuer Startseiten, Name: herobanner -  1260:182, true */
add_image_size( 'herobanner', $defaultoptions['default_startseite-bannerbild-image_width'], $defaultoptions['default_startseite-bannerbild-image_height'], $defaultoptions['default_startseite-bannerbild-image_crop']);    

/* RWD-Bildauflösung: 480x240. , 2:1 Proportion. No Crop */
add_image_size( 'rwd-480-2-1', $defaultoptions[ 'default_rwdimage_2-1_width'], $defaultoptions['default_rwdimage_2-1_height'], $defaultoptions['default_rwdimage_2-1_crop']);

/* RWD-Bildauflösung: 480x320. , 3:2 Proportion. No Crop */
add_image_size( $defaultoptions['default_rwdimage_typname'], $defaultoptions['default_rwdimage_width'], $defaultoptions['default_rwdimage_height'], $defaultoptions['default_rwdimage_crop']);

(Es gibt zusätzlich noch eine Size für Galerie-Bilder im Hochformat, aber das sollte nicht für andere Zwecke genutzt werden, damit wir nicht Probleme bekommen, wenn wir dieses Galerien mal ändern.)

[SebastianHonert]

OK, die Größen habe ich gesehen, finde sie für den Zweck der Slideshow aber nur bedingt brauchbar. Ich mache mir mal ein paar Gedanken und schreibe dir dann hier eine Liste mit Vorschlägen rein.

[SebastianHonert]

Könntest du eventuell die Stats zu den Display-Größen der Zugriffe auf FAU teilen? Dann hätten wir einen guten Anhaltspunkt. Zeigen die Stats auch an, ob Portrait oder Landscape verwendet wird?

[xwolfde]

Bildschirmauflösungen September auf www.fau.de: (Durchschnitt, nicht unterschieden ob Werktags, Arbeitszeit oder Wochenende):

Typischer Tagesverlauf an einem Werktag (gestern):

Typischer Tagesverlauf an einem Samstag (vorvorgestern):

[SebastianHonert]

Ich habe gerade noch einen vorübergehenden Fix gepusht. Das Slider-Template hat die Bild-URL aus fau_get_image_attributs() geholt, was natürlich immer das Original liefert. Es gab aber schon eine Lösung auf Grundlage der durch das Plugin hinzugefügten Bildgröße 'ilifautpl-slide' (1920x1080). Die URL für das Bild in dieser Größe wird jetzt im Template per wp_get_attachment_image_src() geholt.

[SebastianHonert]

Im Dev-Branch findest du jetzt eine Version mit dynamischen Größen für die Slides. Funktioniert gut, allein die Festplatte wird durch die notwendigen add_image_size() natürlich zugepflastert. Wäre gut, wenn du dir das noch einmal ansehen könntest, bevor ich in den Master-Branch pushe.

Edit: Die Styles werden jetzt per add_action() im Header eingebunden. Proof of concept: https://study-at-fau.de/. Bleibt vorerst im Dev Branch, ich bin noch nicht sicher, welche Größen für fau.de am geeignetsten sind.