Standard Bilderformat für resized images von png auf zB webp ändern

Christian

Hallo,
ich suche schon seit Tagen nach einer Lösung für dieses Problem.

Ich möchte das Bilderformat bei den Websites meiner Kunden auf "webp" als Standard einstellen, speziell wenn Bilder resized werden.
Der Kunde soll prinzipiell nur mehr "webp"-Dateien hochladen und diese sollen nicht mehr in andere Formate konvertiert werden.
Irgendwo muss definiert sein, dass "processed images" standardmäßig als "png" gerendet werden (ich verwende Graphicsmagick), aber wo kann ich das ändern?

Hat jemand eine Idee?

Wolfgang Wagner

Ich glaube, das Thema kam neulich schon mal irgendwo auf. Das Einfachste ist, du installierst diese Extension: https://extensions.typo3.org/extension/webp/
Sofern dein Server bzw. ImageMagick oder Graphicsmagick webp unterstützt, werden alle hochgeladenen Bilder automatisch nach webp konvertiert. Hochladen kann man dann wie üblich jpg, png, was auch immer.

Christian

Die webp-Extension habe ich schon ausprobiert - diese hilft in einigen Fällen aber leider nicht.

Ich habe versucht webp-Bilder direkt in den Seiteneigenschaften (Resourcen) einzufügen - allerdings werden diese automatisch in ein png umgewandelt.

Dasselbe Problem tritt auf, wenn ich webp-Bilder in einem Inhaltselement integriere und "Click enlarge" wähle.
Die kleinen Bilder werden als webp-Bilder korrekt eingefügt, sobald man aber auf "Vergrößern" klickt, werden diese erneut als png gerendert.

Deshalb würde ich gerne wissen, ob man den Default-Wert ('png') zentral irgendwo selber definieren kann?
In würde sogar "jpg" eher bevorzugen als "png".

The_C

Ich verwende hierzu das /fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html da kannst alles gut an deine Bedürfnisse anpassen, und die Umwandlung ist dann auch automatisch da brauchst eigentlich keine Extension.
Du kannst doch nicht von Redakteuren verlangen das die nur webp Bilder hochladen die meisten wissen von dem ja nicht mal das es sowas gibt 😅

Christian

In der Datei Image.html habe ich auch schon Anpassungen gemacht.
<html xmlns:f="https://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<picture>
<img
class="image-embed-item"
title="{file.title}"
alt="{file.description -> f:format.nl2br()}"
src="{f:uri.image(image:file, maxWidth: 1280, fileExtension: 'webp')}"
width="{dimensions.width}"
height="{dimensions.height}"
type="image/webp"
loading="lazy" />
</picture>
</html>
Das funktioniert schon einigermaßen.

Die Kunden haben übrigens eigene Grafikabteilungen, die webp-Grafiken werden von ihnen bereits bereitgestellt.
Darum möchte ich ja, dass die Grafiken nicht in ein anderes Format umgewandelt werden.

Christian

Es gibt ja noch eine weitere Datei unter "Fluid_styled_content/Resources/Private/Partials/Media/Type/Image.html"

Dort ist zB das Click-Enlarge integriert - ich weiß allerdings nicht wie ich dort das webp-Format integriere.
Hier das Original-Snippet aus dieser Datei:

<figure class="image">
<f:if condition="{file.link}">
<f:then>
<f:link.typolink parameter="{file.link}" title="{file.title}">
<f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings}" />
</f:link.typolink>
</f:then>
<f:else>
<f:if condition="{data.image_zoom}">
<f:then>
<ce:link.clickEnlarge image="{file}" configuration="{settings.media.popup}">
<f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings}" />
</ce:link.clickEnlarge>
</f:then>
<f:else>
<f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings}" />
</f:else>
</f:if>
</f:else>
</f:if>
<f:if condition="{file.description}">
<figcaption class="image-caption">
{file.description -> f:format.nl2br()}
</figcaption>
</f:if>
</figure>

Christian

Bei den Parametern des Objekts "<ce:link.clickEnlarge>" habe ich diesbezüglich leider nichts gefunden

The_C

Hmm... das vendor/typo3/cms-fluid-styled-content/Resources/Private/Partials/Media/Type/Image.html verweist doch wieder auf das partial Media/Rendering/Image ich verstehe nicht ganz was du da machen willst?

Christian

Es wird korrekt das kleine webp-Bild eingefügt. Sobald ich aber auf "vergrößern" klicke, wird das webp in ein png umgewandelt.
<ce:link.clickEnlarge image="{file}"> rendert also das png.

The_C

Christian
Interessant... ich sehe das jetzt auch bei einer Bildergallerie von mir dort werden mir .gif Bilder ausgegeben.
Hat sicher was mit der TYPO3 Komprimierung zu tun ich schau da bei Gelegenheit nach wenn du bis dahin nicht schon eine Lösung gefunden hast.

Ich habe den Fehler bei mir gefunden bei meir war es der Gifbuilder im TS IMG_RESOURCE da hab ich vergessen das Format anzugeben bei der Zusammenrechnung.

Christian

Könntest du das TypoScript Snippet bitte posten?
Kann man dort beim Format auch webp einstellen?

The_C

Hier das TYPO3 Tutorial dazu mein TS ist viel zu kompliziert:
https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Gifbuilder/Examples.html#masking-semi-transparent-images-logos-onto-other-images

Christian

Besten Dank!

Kann man dem Gifbuilder mitteilen, dass alle Bilder mit einem bestimmten Format gerendert werden?
Ich bin leider hauptsächlich Integrator und kenne mich da zu wenig aus.

The_C

Ich hab mich für meine Downloads für JPG entschieden weil das ein Format ist mit dem jeder umgehen kann bei webp bin ich mir nicht sicher...
Kannst ja mal versuchen unter format = webp einzutragen.
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/13.0/Feature-102177-WebPSupportForImagesGeneratedByGIFBUILDER.html#description

Unterstütze das Forum

Hilf mit, den Community Hub für TYPO3 werbefrei zu halten und die Betriebskosten zu decken. Werde Official Community Hub Supporter für nur 5 Euro im Monat (zzgl. USt) und erhalte ein exklusives Supporter-Badge. Jeder Beitrag zählt!

Jetzt Supporter werden

Impressum - Datenschutz - Kontakt - Netiquette - RSS