---
title: "Responsive Image Rendering"
url: "https://www.typo3.net/d/127053-responsive-image-rendering"
source: "typo3.net"
tags: ["Extensions","Frage","TYPO3 8"]
created: "2018-08-30"
last_reply: "2018-08-30"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# Responsive Image Rendering

Extensions · 1 Antwort · gestartet 2018-08-30

## Eröffnungsbeitrag

**michael_m** · 2018-08-30 · [Beitrag #1](https://www.typo3.net/d/127053-responsive-image-rendering/1)

Hallo zusammen.
Ich suche mir schon länger einen Wolf zu diesem Punkt.
Ich suche nach einer Möglichkeit zum automatisierten Bildererstellen für verschiedene Auflösungen/Ausgabegeräte. Weitgehend so wie im Bootstrap Package von Benjamin Kott.

Kennt da jemand etwas?

Danke im Voraus
Michael

## Antworten

### [#2](https://www.typo3.net/d/127053-responsive-image-rendering/2) · Teisinger · 2018-08-30

Kenn die Ext nicht, aber mit Fluid kannst du sowas doch ganz easy machen.
Zum Beispiel:

```html
<picture>
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1920')}" media="(min-width: 1601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1600')}" media="(min-width: 1334px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1333')}" media="(min-width: 1001px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '1000')}" media="(min-width: 801px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '800')}" media="(min-width: 601px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '600')}" media="(min-width: 401px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '400')}" media="(min-width: 321px)">
    <source srcset="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'smartphone', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '320')}" media="(min-width: 200px)">
    <img src="{f:uri.image(src:'{file.uid}', treatIdAsReference:'1', cropVariant: 'default', height: '{dimensions.height}', maxHeight: '{data.imageheight}', width: '{dimensions.width}', maxWidth: '{data.imagewidth}')}"
        {f:if(condition: '{data.imagewidth}', then: 'width="{data.imagewidth}"', else: 'width="{dimensions.width}"')}
        {f:if(condition: '{data.imageheight}', then: 'height="{data.imageheight}"', else: 'height="{dimensions.height}"')}
        {f:if(condition: '{file.title}', then: 'title="{file.title}"')}
        {f:if(condition: '{file.alternative}', then: 'alt="{file.alternative}"')} />
</picture>
```

---

Quelle: „Responsive Image Rendering“, typo3.net, https://www.typo3.net/d/127053-responsive-image-rendering
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.