PHPackages                             diu/neos-content-picture - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. diu/neos-content-picture

ActiveNeos-plugin

diu/neos-content-picture
========================

Neos default picture element with auto download option, auto target \_blank for external links and rel noopener

2.0.2(1y ago)06.0k↓50%1MITSCSS

Since May 6Pushed 1y agoCompare

[ Source](https://github.com/di-unternehmer/DIU.Neos.Content.Picture)[ Packagist](https://packagist.org/packages/diu/neos-content-picture)[ RSS](/packages/diu-neos-content-picture/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (2)Versions (10)Used By (0)

Responsive Images in Neos
=========================

[](#responsive-images-in-neos)

This package delivers the basic image content element for responsive Neos websites. It's heavily depending on the Sitegeist Kaleidoskop package. See the packages Readme here for more information about possible settings:

Using this package
------------------

[](#using-this-package)

By default this package creates a picture tag with fallback image so that also IE11 is supported. It also creates several renditions of an image as the default type of the image, like jpg, gif ... and also a webp format. Make sure that your system/server is correctly configured in order to get .webp images out of the box.

Adapt image size to your grid
-----------------------------

[](#adapt-image-size-to-your-grid)

In order to have an image fit perfectly to your grid settings do the following:

1. Make sure you add this package to your site packages composer.json as a required dependency
2. Create a fusion file to override the Picture settings, e.g. if you use our DIU.Grid package:

**Two column example**

```
prototype(DIU.Grid:Content.Structure.Grid.Column.Two) {
    prototype(DIU.Neos.Content.Picture:Picture) {
        renderer {
            imageSource.withAsset.renderer = Sitegeist.Kaleidoscope:AssetImageSource {
                width = 540
            }

            sources >
            sources = Neos.Fusion:RawArray {
                webp = Neos.Fusion:RawArray {
                    imageSource = ${imageSource.setFormat('webp')}
                    srcset = '345w, 330w, 450w, 510w, 540w, 690w, 660w, 900w, 1020w, 1080w, 1035w, 990w, 1350w, 1530w, 1620w'
                    sizes = '(max-width: 375px) 345px, (max-width: 767px) 510px,(max-width: 991px) 330px,(max-width: 1199px) 450px, 540px'
                    type = 'image/webp'
                }
                default = Neos.Fusion:RawArray {
                    srcset = '345w, 330w, 450w, 510w, 540w, 690w, 660w, 900w, 1020w, 1080w, 1035w, 990w, 1350w, 1530w, 1620w'
                    sizes = '(max-width: 375px) 345px, (max-width: 767px) 510px,(max-width: 991px) 330px,(max-width: 1199px) 450px, 540px'
                }
            }
        }
    }
}

```

How does it work
----------------

[](#how-does-it-work)

\###Step one First you tell the browser on which break point the image will have which width.

```
sizes = '(max-width: 375px) 345px, (max-width: 767px) 510px,(max-width: 991px) 330px,(max-width: 1199px) 450px, 540px'

```

These are just the column width at the breakpoints with one additional on mobile, so that we don't load the biggest necessary one for 767px. Now you know which width the image can have in a two column (50%/50%) grid. One thing, you have to use `max-width` NOT min-width! The last value without the max-width will be then the image for every bigger screen. ( So this is different from CSS where you go usually with min-with up )

### Step two

[](#step-two)

Second we have screens with several dpi values. "Old" regular screens have a value of 1x, others like HiRes screens for computer or mobile phones will have a twice as high density "2x" or even "3x". There for we need an image which has the doubled or three times the size of the column width. This makes the next line, where we have 1x, 2x, 3x of the sizes values:

```
srcset = '345w, 330w, 450w, 510w, 540w, 690w, 660w, 900w, 1020w, 1080w, 1035w, 990w, 1350w, 1530w, 1620w'

```

If the browser doesn't find the exact matching image it will take the next bigger one. This is important to know so that you provide an efficient set of image widths. Just keep in mind, that every additional value in srcset will increase the amount of disk space necessary on the server! So you should find a good balance here.

### Step three

[](#step-three)

Third one, test your images. We recommand to use Firefox to test responsive images as Firefox will load the different images when changing the size, whereas Chrome will load once the biggest and won't show you that he will load the smaller image when you shrink the with of the browser window

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance44

Moderate activity, may be stable

Popularity22

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 77.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~251 days

Recently: every ~439 days

Total

8

Last Release

445d ago

Major Versions

1.0.4 → 2.0.02021-06-16

### Community

Maintainers

![](https://www.gravatar.com/avatar/4df37002e22763e04e7e7b08f339210844688f2ea67980a825fb9d45143da745?d=identicon)[DIU](/maintainers/DIU)

---

Top Contributors

[![akappler-diu](https://avatars.githubusercontent.com/u/267666191?v=4)](https://github.com/akappler-diu "akappler-diu (7 commits)")[![andreas-reichel-diu](https://avatars.githubusercontent.com/u/101269956?v=4)](https://github.com/andreas-reichel-diu "andreas-reichel-diu (1 commits)")[![sophieTschuden](https://avatars.githubusercontent.com/u/48276840?v=4)](https://github.com/sophieTschuden "sophieTschuden (1 commits)")

### Embed Badge

![Health badge](/badges/diu-neos-content-picture/health.svg)

```
[![Health](https://phpackages.com/badges/diu-neos-content-picture/health.svg)](https://phpackages.com/packages/diu-neos-content-picture)
```

###  Alternatives

[neos/neos-ui

Neos CMS UI written in React

2661.0M104](/packages/neos-neos-ui)[neos/form-builder

Flow Form Framework integration into Neos CMS

19347.1k18](/packages/neos-form-builder)[neos/demo

Site package for the Neos Demo Site

18181.0k6](/packages/neos-demo)[flowpack/media-ui

This module allows managing media assets including pictures, videos, audio and documents.

2184.5k2](/packages/flowpack-media-ui)[kaufmanndigital/gdpr-cookieconsent

A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site.

2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[flowpack/neos-matomo

Track visits of your Neos site with the Matomo Open Analytics Platform!

2337.6k](/packages/flowpack-neos-matomo)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)