# Plugin mit Responsive Bildern

**URL:** <https://forum.shopware.com/t/plugin-mit-responsive-bildern/91921>\
**Category:** Shopware 5\
**Created:** [10. Dezember 2021 um 12:07 UTC](https://forum.shopware.com/t/plugin-mit-responsive-bildern/91921 "2021-12-10T12:07:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![skarpeta](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@skarpeta](https://forum.shopware.com/u/skarpeta)\
**Post date:** [10. Dezember 2021 um 12:07 UTC](https://forum.shopware.com/t/plugin-mit-responsive-bildern/91921/1 "2021-12-10T12:07:22Z")

</div>

Ich habe diesen Doku Eintrag gefunden [Responsive Images in Shopware](https://developers.shopware.com/designers-guide/responsive-images/)

Soweit ist alles klar, jedoch geht man hier davon aus das man konkrete Dateinamen hat.

Ich habe ein Plugin geschrieben für ein Einkaufswelt Element. Meine Bilder sind jedoch auf jeder Bildschirmgröße gleich.

Auswählen kann man das gewünschte Bild per „Media field“ [Custom shopping world elements](https://developers.shopware.com/developers-guide/custom-shopping-world-elements/#adding-configuration-fields-to-the-element)

Und meine aktuelle `src` für ein normales `img` ist `$Data.grid_image`

Was muss ich denn aber nun beim `<picture> ` in die jeweiligen sources einfügen damit die richtigen Thumbnail Größen genommen werden?

```auto
<picture>
    <source sizes="(min-width: 48em) 80vw, (min-width: 64em) 50vw, 100vw"
            srcset="product-small@2x.jpg 400w, product-medium@2x.jpg 1200w, product-large@2x.jpg 2560w" 
            media="(min-resolution: 192dpi)">
  
    <source sizes="(min-width: 48em) 80vw, (min-width: 64em) 50vw, 100vw"
            srcset="product-small.jpg 200w, product-medium.jpg 600w, product-large.jpg 1280w">

    <img srcset="product-large.jpg, product-large@2x.jpg 2x" alt="Product picture">
</picture>

```

Danke im voraus!