Extension repository & Download
Introduction
WebP is an image format developed by Google. According to Google's measurements, a conversion from PNG to WebP results in a 45% reduction in file size when starting with PNGs found on the web. Our own tests with JPEGs revealed reductions in file sizes from about 25% up to more than 95%.
What does it do?
This extensions provides an alternative partial for image rendering with multiple resolutions and support for WebP format. Furthermore it provides alternative partials for the extension *news* and a viewhelper to include SVG images as inline html.
Einleitung
WebP ist ein Grafikformat, das von Google entwickelt wurde. Nach Angaben von Google ergibt die Konvertierung von PNG zu WebP eine Größenreduzierung von durchschnittlich 45% für PNGs aus dem Internet. Unsere eigenen Tests mit JPEGs ergaben Reduzierungen der Dateigrößen von etwa 25% bis über 95%.
Was macht die Extension?
Diese Extension liefert ein alternatives Partial-Template für die Bildausgabe mit mehrfachen Auflösungen und Unterstützung für das Format WebP. Weiterhin liefert es ein alternatives Partial-Template für die Extension news und einen ViewHelper, um SVG-Grafiken inline als HTML-Code einzubetten.
Example images
Beispielbilder
| original | size | WebP | size | resolution |
|---|---|---|---|---|
| slider_start.jpg | 273.5 KB | slider_start.webp | 202.4 KB | 1920x650 |
| slider_coding.jpg | 109.1 KB | slider_coding.webp | 21.9 KB | 1920x650 |
| textimage_serviceportale.jpg | 157.31 KB | textimage_serviceportale.webp | 89.7 KB | 720x540 |
| news_coeln_concept_relaunch_beitragsbild.jpg | 441.5 KB | news_coeln_concept_relaunch_beitragsbild.webp | 24.3 KB | 500x375 |
| extension-cc_image-webp_support.png | 29.3 KB | extension-cc_image-webp_support.webp | 14.2 KB | 955x409 |
Administrator Manual
Install the extension and make sure that your webspace supports WebP. Check "Image Processing" in the administration tools / install tool.
Anleitung für Administratoren
Installieren Sie die Extension und stellen Sie sicher, dass Ihr Webspace WebP unterstützt. Prüfen Sie dafür "Image Processing" unter den Verwaltungswerkzeugen / im Install-Tool.
Breaking HTML
Important: This extension wraps IMG-tags in an additional PICTURE-tag to provide different sources and image fallbacks for old browsers. That may break your layout and css or javascript, especially if you use the child-selector on images e.g.:
"p > img" (change to "p > img, p > picture > img")
Bruch im HTML
Wichtig: Diese Extension umschließt IMG-Tags in einen zusätzlichen PICTURE-Tag, um verschiedene Dateien und Fallbacks für alte Browser bereitzustellen. Das kann Ihr Layout und CSS oder Javascript zerstören, besonders wenn Sie Child-Selectoren für Bilder verwenden, z.B.:
"p > img" (ändern in "p > img, p > picture > img")
Usage
TYPO3 fluid content elements
Add the static template "CC Image Fluid" for WebP support in regular content elements like "Text & Images" somewhere after "Fluid Content Elements".
Extension news
Add the static template "CC Image News" for WebP support in the extension news.
Partial "Picture"
First add the path to the partialRootPaths of your extension or to your FLUIDTEMPLATE, e.g.:
Verwendung
TYPO3 Fluid-Inhaltselemente
Fügen Sie für die WebP-Unterstützung in normalen Inhaltselementen wie z.B. "Text & Bild" das statische Typoscript-Template "CC Image Fluid" irgendwo nach "Fluid Content Elements" hinzu.
Extension news
Fügen Sie für die WebP-Unterstützung in der Extension news das statische Typoscript-Template "CC Image News" hinzu.
Partial "Picture"
Fügen Sie vorher den Pfad zu den partialRootPaths Ihrer Extension oder des FLUIDTEMPLATEs hinzu, z.B.:
Typoscript
page.10.partialRootPaths.5 < plugin.tx_ccimage.view.partialRootPaths.0
plugin.tx_ccexample.view.partialRootPaths.5 < plugin.tx_ccimage.view.partialRootPaths.0HMTL
<!-- With an image object -->
<f:render partial="Picture" arguments="{image:image, title:image.title, alt:image.alternative, maxWidth:settings.media.maxWidth, maxHeight:settings.media.maxHeight}" />
<!-- With an image src-path -->
<f:render partial="Picture" arguments="{src:'EXT:cc_example/Resources/Public/Images/image.png', title:'title', alt:'alternative image text', maxWidth:settings.media.maxWidth, maxHeight:settings.media.maxHeight}" />Breakpoints
Maximum image width on minimum viewport in px:
| viewport | image size | |
|---|---|---|
| dpi | 1x | 2x |
| 1250 | 1920 | original |
| 1000 | 1280 | 1920 |
| 750 | 960 | 1280 |
| 480 | 768 | 960 |
| 250 | 480 | 768 |
Breakpoints
Maximale Bildbreite bei Mindest-Viewport in px:
| Viewport | Bildgröße | |
|---|---|---|
| dpi | 1x | 2x |
| 1250 | 1920 | Original |
| 1000 | 1280 | 1920 |
| 750 | 960 | 1280 |
| 480 | 768 | 960 |
| 250 | 480 | 768 |
Inline-SVG
Inline-SVG
HTML
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:cci="http://typo3.org/ns/CoelnConcept/CcImage/ViewHelpers"
data-namespace-typo3-fluid="true">
<!-- With an image object -->
<cci:image.inlineSvg image="{svgImage}" />
<!-- With an image src-path -->
<cci:image.inlineSvg src="EXT:cc_example/Resources/Public/Images/image.svg" />
</html>TYPO3 Extensions
Wir integrieren und entwickeln für Sie individuelle Erweiterungen,
die Ihren Anforderungen entsprechen.