Responsive Images generiert immer picture tag

[flo81]

Ich arbeite momentan mit Contao 5.5 und den Twig-Templates. Nun wird für Bilder im Standardfall immer ein <picture> verwendet. Dieser wäre eigentlich aber nur bei "Art direction" nötig. Ansonsten könnte man für responsive Bilder gut auch mit einem <img> (inkl. srcset, sizes) arbeiten. Gibt es dafür einen Grund? Gemäss diesem "alten" youtube video, wurde das früher mal anders gehandhabt: https://www.youtube.com/watch?v=ub8yROSQyQ4&t=3102s

<figure{{ figure_attributes }}>
        {% if not figure.linkHref|default %}
            
            {# Media #}
            {% block media %}
                {{ block('picture_component') }} <---- Picture component
            {% endblock %}
        
       {% else %}
            {# Media wrapped with link #}
             ...
        {% endif %}

        {% block caption %}...{% endblock %}
</figure>

Lieber Gruss
Florian

[zoglo]

Viewport-based-selection vs Art direction-based selection

Siehe Specs:
https://html.spec.whatwg.org/multipa...ased-selection

https://html.spec.whatwg.org/multipa...ed%20selection

picture / source
for instance the smaller image might be a cropped version of the bigger image

[Spooky]

<picture> brauchst du auch, wenn du das Bild in verschiedenen Formaten (PNG, JPEG, WEBP) zur Verfügung stellst.

[flo81]

Besten Dank für eure Inputs. Habe einige Tests vorgenommen und kann Spookys Aussage bestätigen. Wenn Datei-Typ von Originalbild und gerendertem Bild unterschiedlich sind, wird ein picture tag eingefügt. Also vorwiegend, wenn "Bildformate konvertieren" gesetzt ist.

Beispiel:
Bildformate konvertieren jpg -> webp ist aktiviert.
Hochladen von jpg erzeugt einen picture tag, da Originalbild (jpg) und gerendertes Bild (webp) unterschiedlich sind.
Hochladen von webp erzeugt keinen picture tag, da Originalbild (webp) und gerendertes Bild (webp) identisch sind.

Hab ich das korrekt verstanden? Würde auch bedeuten, dass der picture tag nicht unbedingt mit css stylings versehen werden sollte, da dieser nicht zwingend vorhanden ist.

[mlweb]

Normalerweise nutzt man m.E. figure und/oder image

[zonky]

immer noch (fast) aktuell: https://www.youtube.com/watch?v=ub8yROSQyQ4

[Spooky]

Hab ich das korrekt verstanden?

Korrekt. Also <picture> braucht man immer dann, wenn man mehrere <source>s hat.