Extension repository & Download

extensions.typo3.org/extension/cc_image


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

Administrator Manual

Install the extension and make sure that your webspace supports WebP. Go to Settings -> Configure extensions and check the WebP logo of Coeln Concept.

Anleitung für Administratoren

Installieren Sie die Extension und stellen Sie sicher, dass Ihr Webspace WebP unterstützt. Gehen Sie dafür zu Einstellungen -> Configure extensions und prüfen Sie das WebP-Logo von Coeln Concept.

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.0
HMTL
<!-- 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="{image:'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:

viewportimage size
dpi1x2x
12501920original
100012801920
7509601280
480768960
250480768

Breakpoints

Maximale Bildbreite bei Mindest-Viewport in px:

ViewportBildgröße
dpi1x2x
12501920Original
100012801920
7509601280
480768960
250480768

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.

zu den Extensions