PHPackages b13/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. [Image & Media](/categories/media) 4. / 5. b13/picture ActiveTypo3-cms-extension[Image & Media](/categories/media) b13/picture =========== Picture: Extended Image ViewHelper - Improved TYPO3 image ViewHelper creating picture elements with support for sizes, sources, additional image formats, etc. 4.0.2(2w ago)24236.9k↓36.5%9[1 issues](https://github.com/b13/picture/issues)[1 PRs](https://github.com/b13/picture/pulls)1GPL-2.0-or-laterPHPPHP ^8.3CI passing Since Nov 9Pushed 2w ago9 watchersCompare [ Source](https://github.com/b13/picture)[ Packagist](https://packagist.org/packages/b13/picture)[ RSS](/packages/b13-picture/feed)WikiDiscussions master Synced 2w ago READMEChangelog (10)Dependencies (18)Versions (49)Used By (1) [![CI](https://github.com/b13/picture/actions/workflows/ci.yml/badge.svg)](https://github.com/b13/picture/actions/workflows/ci.yml/badge.svg) b13 Image View Helper ===================== [](#b13-image-view-helper) What it does ------------ [](#what-it-does) The b13 image view helper is a massive extension of the regular Fluid image ViewHelper. Basically it processes images and renders a single src element or a picture element depending on the specified configuration. Installation ------------ [](#installation) Install the extension using composer: `composer req b13/picture`. Include the TypoScript within your main template: ``` @import 'EXT:picture/Configuration/TypoScript/setup.typoscript' ``` Use Fluid Namespace `B13\Picture` --------------------------------- [](#use-fluid-namespace-b13picture) Use a proper configured Fluid template adding the namespace when using this ViewHelper: ``` ``` TypoScript setup ---------------- [](#typoscript-setup) See `EXT:picture/Configuration/TypoScript/setup.typoscript` for possible configuration options (key: `plugin.tx_picture`): TypoScript Configuration optionDescriptionaddWebpAdd webp alternative image files as sources. *default: 0*onlyWebpEnable only images in webp format and for all size variants. *default: 0*useRetinaAdd retina (2x) version of all images as sizes variants. *default: 0*losslessEnable lossless compression for webp images. *default: 0*retinaUse custom or multiple multipliers for calculating retina image variants. \_default: retina.2 = 2x Only works in combination with `useRetina = 1`breakpointsUse named breakpoints for easier markup of different image sizes for one picture element. *default: empty*.lazyLoadingUse the `loading` attribute with images. See [Browser Native Lazy Loading by Default](https://b13.com/blog/lazy-loading-just-got-lazier-in-typo3-v10) *default: {$types.content.image.lazyLoading}*Attributes ---------- [](#attributes) ### All from f:image [](#all-from-fimage) Our image ViewHelper mimics the Fluid Image ViewHelper, so it has all the same attributes, including: - `width` and `height`, including `c` option for crop scaling - `maxWidth` for proportional scaling, without upscaling - `fileExtension` to set a file extension (to force webp for example) - `alt` and `title` - `cropVariant` - `loading` to enable [browser native lazy loading by default](https://b13.com/blog/lazy-loading-just-got-lazier-in-typo3-v10). ### useRetina [](#useretina) If useRetina is set and not further specified in TypoScript setup, the corresponding `img` tag's or `source` tag’s attribute `srcset` is extended by a 2x retina version of the image. ### addWebp [](#addwebp) Adds rendering of additional images in webp format. If it is specified without a given sources attribute, it renders a picture tag instead of a single img tag in order to maintain a browser fallback. If it is specified together with `sources` it adds an additional `source` tag above any `source` tag rendered by a given `sources` element. This attribute is ignored if `onlyWebp` option is active. ### onlyWebp [](#onlywebp) Enable only images in webp format and for all size variants. Enabling this option disables `addWebp` setting. ### lossless [](#lossless) Enable lossless compression for webp images. If you find your webp images lacking in quality compared to jpg/png images, enable this option to overwrite default settings for ImageMagick/GraphicsMagick. ### variants and sizes [](#variants-and-sizes) Adds multiple variants of an image with different image sizes, optionally add a sizes-attribute to image tags: ``` variants="400, 600, 800, 1000" sizes="(min-width: 600px) 400px, 100vw" ``` This can also be part of the `sources`-Array (see below). ### sources [](#sources) Sources must be notated as array. For each element given a source tag is rendered. It accepts the same attributes as the fluid image view helper. The source tags are rendered in the same ordering as specified in the array. If you do not specify additional TypoScript settings, any key can be used. ``` sources="{ 0: { width: '300c', height: '300c', media: 'min-width: 1000px', cropVariant: 'desktop', variants: '400, 600, 800', sizes: '100vw' }, 1: { width: '250c', height: '250c', media: 'min-width: 600px', src: alternativefile.uid, treatIdAsReference: 1 }, 2: { width: '200c', height: '200c', media: 'min-width: 300px', cropVariant: 'teaser' } }" ``` ### pictureClass [](#pictureclass) Add a CSS class used for the `picture` element (if rendered using ``). TypoScript Settings ------------------- [](#typoscript-settings) ### In general [](#in-general) The following attributes can also be set in TypoScript as defaults for your whole site: `addWebp`, `useRetina`. A default setting can be overridden for each usage of the ViewHelper by setting the corresponding attribute. ### retina [](#retina) The `retina` option enables an extension of the default behaviour of the `useRetina` attribute. If `retina` is set, an array should be specified with the multiplier for the image size as key, and the multiplier value output in the corresponding tag. ``` retina { 2 = 2x 3 = 3x } ``` ### breakpoints [](#breakpoints) With the array `breakpoints` you can use those settings by using keys in your Fluid template (instead of adding media queries for every key in your `sources` array). It simply adds a media query for min-width. ``` breakpoints { sm = 640 md = 1024 lg = 1280 } ``` Test rendering for demonstration purposes ----------------------------------------- [](#test-rendering-for-demonstration-purposes) You can include a test configuration to see the ViewHelper in your test instance frontend in action: `@import 'EXT:picture/Configuration/TypoScript/test.typoscript'` This configuration enables frontend rendering of the test file with lots of different rendering examples using the page type `1573387706874`. `https://your.local.test.environment/?type=1573387706874` will render a page with different options to showcase code examples. This is intended for demonstration and testing purposes, not meant for your production environment. Credits ------- [](#credits) This extension was created by Andreas Hämmerl and David Steeb in 2019 for b13 GmbH, Stuttgart. [Find more TYPO3 extensions we have developed](https://b13.com/useful-typo3-extensions-from-b13-to-you) that help us deliver value in client projects. As part of the way we work, we focus on testing and best practices ensuring long-term performance, reliability, and results in all our code. ### Health Score 66 — FairBetter than 99% of packages Maintenance95 Actively maintained with recent releases Popularity45 Moderate usage in the ecosystem Community25 Small or concentrated contributor base Maturity83 Battle-tested with a long release history Bus Factor2 2 contributors hold 50%+ of commits 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 ~83 days Recently: every ~108 days Total 26 Last Release 19d ago Major Versions v0.1.1 → v1.0.02021-01-08 1.3.2 → 2.0.02022-11-29 2.0.4 → 3.0.02024-08-02 3.0.4 → 4.0.02026-04-24 PHP version history (2 changes)2.0.0PHP ^7.4 || ~8.0 4.0.0PHP ^8.3 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3862523?v=4)[David Steeb](/maintainers/davidsteeb)[@davidsteeb](https://github.com/davidsteeb) --- Top Contributors [![davidsteeb](https://avatars.githubusercontent.com/u/3862523?v=4)](https://github.com/davidsteeb "davidsteeb (65 commits)")[![achimfritz](https://avatars.githubusercontent.com/u/2152991?v=4)](https://github.com/achimfritz "achimfritz (49 commits)")[![bmack](https://avatars.githubusercontent.com/u/165630?v=4)](https://github.com/bmack "bmack (15 commits)")[![o-ba](https://avatars.githubusercontent.com/u/8812114?v=4)](https://github.com/o-ba "o-ba (6 commits)")[![bnf](https://avatars.githubusercontent.com/u/473155?v=4)](https://github.com/bnf "bnf (4 commits)")[![jschlier](https://avatars.githubusercontent.com/u/9108576?v=4)](https://github.com/jschlier "jschlier (3 commits)")[![kevinmeckl](https://avatars.githubusercontent.com/u/1879988?v=4)](https://github.com/kevinmeckl "kevinmeckl (3 commits)")[![wazum](https://avatars.githubusercontent.com/u/146727?v=4)](https://github.com/wazum "wazum (2 commits)")[![georgringer](https://avatars.githubusercontent.com/u/1905663?v=4)](https://github.com/georgringer "georgringer (2 commits)")[![Patta](https://avatars.githubusercontent.com/u/2151127?v=4)](https://github.com/Patta "Patta (2 commits)")[![achimfritz-b13](https://avatars.githubusercontent.com/u/156071319?v=4)](https://github.com/achimfritz-b13 "achimfritz-b13 (1 commits)")[![brotkrueml](https://avatars.githubusercontent.com/u/2566282?v=4)](https://github.com/brotkrueml "brotkrueml (1 commits)") ### Code Quality Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/b13-picture/health.svg) ``` [![Health](https://phpackages.com/badges/b13-picture/health.svg)](https://phpackages.com/packages/b13-picture) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103574.3k69](/packages/friendsoftypo3-content-blocks)[typo3/cms-fluid-styled-content TYPO3 CMS Fluid Styled Content - Fluid templates for TYPO3 content elements. 229.7M433](/packages/typo3-cms-fluid-styled-content)[typo3/cms-install TYPO3 CMS Install Tool - The Install Tool is used for installation, upgrade, system administration and setup tasks. 1812.5M577](/packages/typo3-cms-install)[typo3/cms-adminpanel TYPO3 CMS Admin Panel - The Admin Panel displays information about your site in the frontend and contains a range of metrics including debug and caching information. 115.8M71](/packages/typo3-cms-adminpanel)[yoast-seo-for-typo3/yoast_seo Yoast SEO for TYPO3 571.8M9](/packages/yoast-seo-for-typo3-yoast-seo)[web-vision/wv_deepltranslate DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 34311.2k](/packages/web-vision-wv-deepltranslate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)