PHPackages zeroseven/pictureino - 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. zeroseven/pictureino ActiveTypo3-cms-extension[Image & Media](/categories/media) zeroseven/pictureino ==================== Responsive images – fully automated. No setup required. Boost PageSpeed and SEO with lazy loading and modern WebP delivery v1.3.1(3mo ago)62.6k—10%3[4 issues](https://github.com/zeroseven/pictureino/issues)GPL-2.0-or-laterPHPPHP >=8.1CI failing Since Apr 23Pushed 1mo ago3 watchersCompare [ Source](https://github.com/zeroseven/pictureino)[ Packagist](https://packagist.org/packages/zeroseven/pictureino)[ RSS](/packages/zeroseven-pictureino/feed)WikiDiscussions master Synced 2d ago READMEChangelog (6)Dependencies (12)Versions (26)Used By (0) Pictureiño – when your images size themselves ============================================= [](#pictureiño--when-your-images-size-themselves) **Responsive Images Done Right in TYPO3:** Pictureiño intelligently calculates the **ideal image dimensions** based on real viewport sizes and usage patterns. It learns from request data over time and adapts its sizing logic to serve only what’s needed – no more, no less. Images are delivered in **pixel-perfect dimensions**, as **modern WebP**, with **lazy loading** and **retina support** out of the box. This fully automated approach eliminates the need for manual configuration, **improves PageSpeed and Core Web Vitals**, and **boosts SEO** – all while maintaining maximum visual quality across devices. How does it work? ----------------- [](#how-does-it-work) Responsive images that think for themselves: Instead of pre-calculating image sizes server-side, a small fallback image is delivered that analyzes the viewport size and device characteristics (like pixel density) in the frontend. Based on this data, the image sends a request to TYPO3, which calculates the optimal size. The image is then processed and seamlessly replaced with the correct size, ensuring optimal performance and visual quality on the fly. This entire process happens dynamically, without the need for any manual configuration, making it seamless for developers and highly efficient for end users. Usage Examples -------------- [](#usage-examples) Simple image integration in your fluid template. ``` ``` Renderer example ---------------- [](#renderer-example) ``` ``` Installation ------------ [](#installation) ``` composer require zeroseven/pictureino ``` Commands -------- [](#commands) ### Cleanup processed images [](#cleanup-processed-images) Remove all images of dynamic image requests and cleanup the pictureino database entries ``` vendor/bin/typo3 pictureino:cleanup ``` Security -------- [](#security) Pictureiño includes several mechanisms to ensure secure and efficient image processing: - **Rate Limiter**: A built-in rate limiter monitors the number of image requests for new image sizes. This prevents abuse through excessive requests and protects server resources. - **Request Optimization**: Similar image requests are automatically grouped to avoid generating too many images in close proximity. This reduces server load and improves performance. - **Cleanup Task**: Additionally, the processed files are logged along with information about image requests. You can easily delete these images via command, for example, via a regular cron job. These features make Pictureiño a reliable and secure solution for dynamic image generation in production environments. Frequently Asked Questions -------------------------- [](#frequently-asked-questions) ### Does this have any disadvantages for SEO? [](#does-this-have-any-disadvantages-for-seo) No, quite the opposite! Pictureiño improves SEO. By serving WebP images, page load speeds are significantly reduced, which is a key ranking factor for Google. Additionally, with lazy loading, only visible images are loaded, optimizing the initial load time. Pictureiño also ensures that images are always delivered in their optimal size and quality across devices. Plus, structured data is automatically available, even while images are still loading. This helps search engines like Google understand the content and context of images right away, improving indexing. ### Is no configuration necessary at all? [](#is-no-configuration-necessary-at-all) No, the responsive image optimization starts immediately with no setup required. However, you can make manual adjustments if needed, such as defining maximum image sizes or setting breakpoints for different aspect ratios. ### Do I need JavaScript? [](#do-i-need-javascript) Yes, JavaScript is required. The concept is designed so that images dynamically report their optimal size to TYPO3 directly from the frontend. Without JavaScript, this functionality cannot be achieved. ### Can I use this with content blocks? [](#can-i-use-this-with-content-blocks) Yes, you can add the custom TCA field `aspect_ratio` to your content blocks. ``` name: vendor/element typeName: vendor_element group: default prefixFields: true prefixType: vendor fields: # Use the existing field - identifier: aspect_ratio useExistingField: true type: AspectRatio # Add a new field of type AspectRatio - identifier: foo_bar type: AspectRatio ``` ### Health Score 47 — FairBetter than 93% of packages Maintenance74 Regular maintenance activity Popularity28 Limited adoption so far Community19 Small or concentrated contributor base Maturity56 Maturing project, gaining track record 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 ~19 days Recently: every ~75 days Total 19 Last Release 90d ago Major Versions v0.12.2 → v1.0.02025-06-02 PHP version history (3 changes)v0.2.0PHP >=8.2 v0.7.0PHP >=8.3 v0.12.1PHP >=8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/6b22f8a50cfbda138fd9d18f9a9323a9ab93434487122956978e804dee700876?d=identicon)[zerosevendesignstudios](/maintainers/zerosevendesignstudios) ![](https://avatars.githubusercontent.com/u/19648920?v=4)[Raphael Thanner](/maintainers/raphaelthanner)[@raphaelthanner](https://github.com/raphaelthanner) --- Top Contributors [![srosskopf](https://avatars.githubusercontent.com/u/17512766?v=4)](https://github.com/srosskopf "srosskopf (20 commits)")[![teneris](https://avatars.githubusercontent.com/u/773723?v=4)](https://github.com/teneris "teneris (15 commits)")[![schliesser](https://avatars.githubusercontent.com/u/11655823?v=4)](https://github.com/schliesser "schliesser (13 commits)")[![raphaeludg](https://avatars.githubusercontent.com/u/218826395?v=4)](https://github.com/raphaeludg "raphaeludg (8 commits)")[![lwinterhalder](https://avatars.githubusercontent.com/u/12656324?v=4)](https://github.com/lwinterhalder "lwinterhalder (5 commits)")[![raphaelthanner](https://avatars.githubusercontent.com/u/19648920?v=4)](https://github.com/raphaelthanner "raphaelthanner (2 commits)")[![rmue11er](https://avatars.githubusercontent.com/u/6332955?v=4)](https://github.com/rmue11er "rmue11er (1 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags imagepagespeedpictureresponsivetypo3typo3v12typo3v13 ### Code Quality Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/zeroseven-pictureino/health.svg) ``` [![Health](https://phpackages.com/badges/zeroseven-pictureino/health.svg)](https://phpackages.com/packages/zeroseven-pictureino) ``` ### Alternatives [netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.1M8](/packages/netresearch-rte-ckeditor-image)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[pagemachine/typo3-formlog Form log for TYPO3 23238.6k8](/packages/pagemachine-typo3-formlog)[web-vision/wv_deepltranslate DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 33304.3k](/packages/web-vision-wv-deepltranslate)[web-vision/deepltranslate-core DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 33142.5k8](/packages/web-vision-deepltranslate-core)[eliashaeussler/typo3-warming Warming - Warms up Frontend caches based on an XML sitemap. Cache warmup can be triggered via TYPO3 backend or using a console command. Supports multiple languages and custom crawler implementations. 22260.2k](/packages/eliashaeussler-typo3-warming) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)