# Frosh Webp Unterstützung - Bilder richtig dimensionieren
**URL:** https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910
**Category:** Shopware 5
**Tags:** general, programming, templates--design, themes--design
**Created:** [6. Juli 2021 um 17:42 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910 "2021-07-06T17:42:45Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [6. Juli 2021 um 17:42 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/1 "2021-07-06T17:42:45Z")
Hallo Leute,
Ich verwende das Friends of Shopware Frosh „Webp Unterstützung“ Plugin. Bei Google Pagespeed Insights wird mir angezeigt, dass die .webp images nicht richtig dimensioniert werden und dadurch über 1s eingespart werden könnte. (siehe Anhang)
Für die mobile Ansicht werden anscheinend 800x800 verwendet? Klar, dass er meckert.
Was muss ich bei den Einstellungen vornehmen?
vielleicht: @shyim wie kann man das anpassen?
Vielen Dank im Voraus!!
---
### Author:  [@phil](https://forum.shopware.com/u/phil)
#### Post date: [6. Juli 2021 um 21:49 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/2 "2021-07-06T21:49:39Z")
Hi Antonio,
dann erzeuge doch einfach weitere Thumbnails mit geringerer Auflösung bzw passe die Standardgröße(n) an - denke das Plugin hat damit erstmal nichts zu schaffen, das stellst du im Media Manager ein:
[https://docs.shopware.com/de/shopware-5-de/inhalte-und-medien/medien](https://docs.shopware.com/de/shopware-5-de/inhalte-und-medien/medien?category=shopware-5-de/inhalte-und-medien#thumbnailgroessen-ab-shopware-5)
[https://developers.shopware.com/designers-guide/responsive-images/](https://developers.shopware.com/designers-guide/responsive-images/)
LG Phil
---
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [6. Juli 2021 um 22:39 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/3 "2021-07-06T22:39:23Z")
Hi Phil,
ich habe folgende Thumbnails für die Artikelbilder:
140x140
200x200
400x400
800x800
Muss ich andere bestimmte Auflösungen einstellen?
Danke und VG
---
### Author:  [@NextMike](https://forum.shopware.com/u/NextMike)
#### Post date: [7. Juli 2021 um 08:39 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/4 "2021-07-07T08:39:10Z")
Das hat nichts mit WebP zu tun, sondern mit den Thumbnails. Man sollte die Thumbnails so einstellen, dass sie mehr oder weniger optimal für die Verwendung (Stelle und Viewport) dimensioniert sind.
---
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [7. Juli 2021 um 11:55 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/5 "2021-07-07T11:55:53Z")
Hi @NextMike , das habe ich getan und die Fehlermeldung ist weg. Danke. Leider hatte es keinen Einfluss auf den Pagespeed Wert ☹
Ich habe desweiteren noch folgende Fehlermeldung:
" Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt"
In welcher LESS/CSS Datei müssten hier die @font-face Einstellungen vorgenommen werden?
Danke
---
### Author:  [@NextMike](https://forum.shopware.com/u/NextMike)
#### Post date: [7. Juli 2021 um 13:01 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/6 "2021-07-07T13:01:16Z")
Da gibt es keine Vorgabe. Du leitest das Theme ab. Die all.less ist der Einstiegspunkt für deine Anpassungen / Überschreibungen. Du kannst alles in die all.less schreiben, dich nach der Struktur der „Responsive“ richten oder deine eigene Struktur erstellen.
---
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [7. Juli 2021 um 14:23 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/7 "2021-07-07T14:23:11Z")
Ich verwende ein Template von einer Shopware Agentur, welches aufgebaut ist auf der Responsive.
**Ich bin langsam echt am verzweifeln. Könntest du mir eine kurze Anleitung schreiben wie und wo ich das mit @font-face einfügen kann?**
Es geht in erster Linie um den Befehl: **font-display: swap**
DANKE
Das ist Google’s Beispiel:
````auto
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}```
````
---
### Author:  [@NextMike](https://forum.shopware.com/u/NextMike)
#### Post date: [7. Juli 2021 um 17:33 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/8 "2021-07-07T17:33:59Z")
Du müsstest dich hier einarbeiten: [Shopware 5 - Tutorials & FAQs - Änderungen am Template vornehmen](https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/aenderungen-am-template-vornehmen)
Und entsprechend deine Situation dabei berücksichtigen. Das zu beschreiben wäre ein ganzes Buch.
---
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [8. Juli 2021 um 17:25 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/9 "2021-07-08T17:25:46Z")
Ok, danke. Ich habe folgendes gemacht:
in die **all.less** in meinem theme habe ich folgendes eingefügt:
```auto
@font-face {
font-family: 'tcinn-outline';
font-style: normal;
font-weight: inherit;
src: local('tcinn outline'), local('tcinn-outline'), url(https://www.MEINEURL.de/engine/Shopware/Plugins/Community/Frontend/TcinnCleanTheme/Themes/Frontend/CleanTheme/frontend/_public/src/fonts/tcinn-outline.ttf?f2qhvh) format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: inherit;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://www.MEINEURL.de/themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff2?201901180958) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'shopware';
font-style: normal;
font-weight: inherit;
src: local('shopware'), local('shopware'), url(https://www.MEINEURL.de/themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff?201901180958) format('woff');
font-display: swap;
}
```
@NextMike wäre das richtig?
---
### Author:  [@NextMike](https://forum.shopware.com/u/NextMike)
#### Post date: [9. Juli 2021 um 08:38 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/10 "2021-07-09T08:38:31Z")
sieht richtig aus. Am besten testen. Bei den Icons font-display:block;
---
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [9. Juli 2021 um 08:46 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/11 "2021-07-09T08:46:14Z")
> [@Antonio](#):
>
> " Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt"
Hat nichts verändert. Google sagt: font-display:swap um die Fehlermeldung zu beseitigen, siehe hier:
> **[Ensure text remains visible during webfont load - Chrome for Developers](https://developer.chrome.com/docs/lighthouse/performance/font-display/?utm_source=lighthouse&utm_medium=unknown)**
>
> Learn how to use the font-display API to make sure your web page text
> will always be visible to your users.
---
### Author:  [@NextMike](https://forum.shopware.com/u/NextMike)
#### Post date: [9. Juli 2021 um 10:46 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/12 "2021-07-09T10:46:29Z")
Für Icons block. Du musst aber schon die Fonts die geladen werden erwischen und überschreiben. Guck mal was aktuell geladen wird und überschreibe genau das.
---
### Author:  [@Antonio](https://forum.shopware.com/u/Antonio)
#### Post date: [9. Juli 2021 um 12:49 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/13 "2021-07-09T12:49:32Z")
Hat geklappt! Danke für die Hilfe!!!
Für alle die es irgendwann auch suchen: Ich habe es direkt in den Responsive-LESS Dateien geändert, anstatt im eigenen Theme. Aber für viele vielleicht keine Option wegen Überschreibung durch Updates.
---
### Author:  [@NextMike](https://forum.shopware.com/u/NextMike)
#### Post date: [10. Juli 2021 um 10:33 UTC](https://forum.shopware.com/t/frosh-webp-unterstuetzung-bilder-richtig-dimensionieren/88910/14 "2021-07-10T10:33:06Z")
Dann sehen wir uns hier beim nächsten Update.