iresults/responsive-images

Maintainers

Details

github.com/iresults/responsive-images

Source

Issues

Installs: 20

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 0

Open Issues: 0

Type:typo3-cms-extension

pkg:composer/iresults/responsive-images

2.0.0 2026-02-26 15:39 UTC

Requires

GPL-2.0 f45fd23cb8d0aff4e52800e848e65cd76acf2203

  • Daniel Corn <daniel.woop@iresults.li>

This package is auto-updated.

Last update: 2026-02-26 15:40:30 UTC

README

This extension provides a view helper for responsive images.

Installation

composer require iresults/responsive-images

Examples

Simple

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              (max-width: 575px) 540px,
              (max-width: 1399px) 546px,
              634px"
    pixelDensities="1,2"
/>
<picture>
    <source
        width="378"
        height="252"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="360"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="364"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="422"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="422" alt="" />
</picture>

With file extension "png"

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              634px"
    pixelDensities="1,2"
    fileExtension="png"
/>
<picture>
    <source
        width="378"
        height="252"
        type="image/png"
        srcset="image-path-378px.png, image-path-378px-2x.png 2x"
        media="(max-width: 414px)"
    />
    <source
        width="634"
        height="422"
        type="image/png"
        srcset="image-path-634px.png, image-path-634px-2x.png 2x"
    />
    <img src="image-path-634px.png" width="634" height="422" alt="" />
</picture>

With crop variant

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              (max-width: 575px) 540px,
              (max-width: 1399px) 546px,
              634px"
    pixelDensities="1,2"
    cropVariant="1:1"
    fileExtension="jpg"
/>
<picture>
    <source
        width="378"
        height="378"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="540"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="546"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="634"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="634" alt="" />
</picture>

With preferredFileExtension

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="
              (max-width: 414px) 378px,
              (max-width: 575px) 540px,
              (max-width: 1399px) 546px,
              634px"
    pixelDensities="1,2"
    preferredFileExtension="webp"
/>
<picture>
    <source
        width="378"
        height="252"
        type="image/webp"
        srcset="image-path-378px.webp, image-path-378px-2x.webp 2x"
        media="(max-width: 414px)"
    />
    <source
        width="378"
        height="252"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="360"
        type="image/webp"
        srcset="image-path-540px.webp, image-path-540px-2x.webp 2x"
        media="(max-width: 575px)"
    />
    <source
        width="540"
        height="360"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="364"
        type="image/webp"
        srcset="image-path-546px.webp, image-path-546px-2x.webp 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="546"
        height="364"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="422"
        type="image/webp"
        srcset="image-path-634px.webp, image-path-634px-2x.webp 2x"
    />
    <source
        width="634"
        height="422"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="422" alt="" />
</picture>

Without media-queries and with preferredFileExtension

<iresultsResponsiveImages:responsiveImage
    image="{jpegImageFile}"
    widths="634px"
    pixelDensities="1,2"
    preferredFileExtension="webp"
    fileExtension="jpg"
/>
<picture>
    <source
        width="378"
        height="378"
        type="image/webp"
        srcset="image-path-378px.webp, image-path-378px-2x.webp 2x"
        media="(max-width: 414px)"
    />
    <source
        width="378"
        height="378"
        type="image/jpeg"
        srcset="image-path-378px.jpg, image-path-378px-2x.jpg 2x"
        media="(max-width: 414px)"
    />
    <source
        width="540"
        height="540"
        type="image/webp"
        srcset="image-path-540px.webp, image-path-540px-2x.webp 2x"
        media="(max-width: 575px)"
    />
    <source
        width="540"
        height="540"
        type="image/jpeg"
        srcset="image-path-540px.jpg, image-path-540px-2x.jpg 2x"
        media="(max-width: 575px)"
    />
    <source
        width="546"
        height="546"
        type="image/webp"
        srcset="image-path-546px.webp, image-path-546px-2x.webp 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="546"
        height="546"
        type="image/jpeg"
        srcset="image-path-546px.jpg, image-path-546px-2x.jpg 2x"
        media="(max-width: 1399px)"
    />
    <source
        width="634"
        height="634"
        type="image/webp"
        srcset="image-path-634px.webp, image-path-634px-2x.webp 2x"
    />
    <source
        width="634"
        height="634"
        type="image/jpeg"
        srcset="image-path-634px.jpg, image-path-634px-2x.jpg 2x"
    />
    <img src="image-path-634px.jpg" width="634" height="634" alt="" />
</picture>