Wie groß sind die Bilder normal und wird das WebP-Format beim Export ins Internet genutzt?

----- WebSite X5 Pro -----

1 Einstellungen > SEO

Suchmaschinenoptimierung

[x] Bild in WebP-Format konvertieren

Hallo Daniel

Images sind in WEBP, SVG  oder JPG (X5 wandelt ja Images in WEBP um).

Die meisten binde ich schon selber in WEBP ein (ausser Objektslider, da muss JPG verwendet werden).

Ich habe jetzt mal ein Codezeile die zumindest die Backgroundbilder für Smartphone tauscht.

<style>@media (max-width: 639px) and (min-width: 320px) {#imPageRowGraphics_1 {background: transparent url('../images/pixabay-2428521_small.webp') no-repeat center top;background-size: cover !important;}}</style>

Man sieht es rechts.

Jetzt wäre es für Images im Inhalt noch gut, sie werden zwar runterscaliert aber die orignal Größe (KB bzw. pixel width und hight) bleibt.

In der Objektgalerie (da nur das erste Bild was SEO Tool stört) die anderen interessiert SEO Tool nicht.

Gruß

Klaus

ciao, ... (It > De) ... für Hintergrundbilder ist es einfach, und im Prinzip müssen Sie nur das Hintergrundbild für jeden zugehörigen Haltepunkt zuweisen, wie bei dem von Ihnen geposteten Code...
... für normale Bilder ohne Hintergrundbilder sollten Sie stattdessen das HTML5-Tag <picture>  einzeln in einem HTML-Code-Objekt verwenden...
... im Falle von Galerien könnten Sie Galerien verwenden, die für jede Auflösung voreingestellt und in separaten Reihen angeordnet sind, sodass es einfach ist, sie je nach Auflösung zu verstecken / anzuzeigen...
... aber Sie wissen bereits, dass ich ohne LINK persönlich keine Bewertung abgeben kann, aber es wurde bereits alles gesagt...
...Aufmerksamkeit! ... keine Webp-Bilder verwenden (NEIN!), sondern JPG-Bilder verwenden (Ja!)...
... wenn Sie den LINK Ihres Beispiels posten, komme ich wie üblich mit meinen anderen möglichen Ideen hierher zurück......

.

ciao

.

Hallo KolAsim,

dieser Code <style>@media (max-width: 639px) and (min-width: 320px) {#imPageRowGraphics_1 {background: transparent url('../images/pixabay-2428521_small.webp') no-repeat center top;background-size: cover !important;}}</style> funktioniert wenn das Hintergrundbild im Zeilen Stil angelegt wurde, nicht wenn sie unter 3 Sitemap->Eigenschaften->Grafik angelegt wurden.

Hier bei https://www.terrassendach-experte.de/ wären es die Hintergrundbilder die unter 3 Sitemap->Eigenschaften->Grafik angelegt wurden.

Ich habe es mal so getestet wenn Background-Images unter 3 Sitemap->Eigenschaften->Grafik angelegt wurden.

<style>@media (max-width: 799px) and (min-width: 481px) {#imPageExtContainer {background: transparent url('../images/p1_medium.webp') no-repeat center top;background-size: cover;background-attachment: fixed !important;}}</style>

<style>@media (max-width: 480px) and (min-width: 320px) {#imPageExtContainer {background: transparent url('../images/p1_small.webp') no-repeat center top;background-size: cover;background-attachment: fixed !important;}}</style>

und anscheinend funktioniert es, bekomme keine Fehlermeldungen und es werden auch die richtigen Images angezeigt (medium und small)

TESTSEITE:https://www.terrassendach-experte.de/Testserver_06-04-2023/index_2.html

Auflösung 640px (medium) und 480 bis 320px (small)

Kannst ja mal Testen.

Für die Galerie diesen Link: https://www.printundcopycenter.de/bindung.html ganz unten die Galerie.

Gruß

Klaus

ciao  ... ... leider sehe ich nichts, ich habe Sie gebeten, keine Webp-Bilder zu verwenden...
... aber mit diesem Code von mir auf der Seite "www.terrassendach-experte.de" ändern Sie die Hintergrundbilder in allen neun (9) Haltepunkten (BreakpointXXX), die Sie in der Struktur verwendet haben, und können sie dann mit Ihren anpassen Bilder...

<!-- sfondo dinamico per Klaus G. (De) 258496 (KolAsim) -->
<style>
#imPageExtContainer {background-position: center center !important; background-repeat: no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover; -o-background-size: cover !important; background-size: cover !important;
background-attachment: fixed !important;
}
@media(min-width:1660px) {
#imPageExtContainer {background-image:url("http://finde-links.de/test123-volle-breite/images/home-2252301_1920_sydgpd2p.jpg") !important;}
}
@media(max-width:1659px) {
#imPageExtContainer {background-image:url("https://cdn.pixabay.com/photo/2023/04/24/03/16/camping-7947056_640.jpg") !important;}
}
@media(max-width:1279px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/04/26/16/57/flower-7952897_640.jpg) !important;}
}
@media(max-width:1079px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/01/19/03/07/marble-7728244__340.jpg) !important;}
}
@media(max-width:1023px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/04/14/08/35/nyc-7924482__340.jpg) !important;}
}
@media(max-width:799px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/04/14/20/52/lake-7925872__340.jpg) !important;}
}
@media(max-width:639px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/04/05/09/44/landscape-7901065__340.jpg) !important;}
}
@media(max-width:479px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/04/21/15/35/fusilier-tulip-7942127__340.jpg) !important;}
}
@media(max-width:359px) {
#imPageExtContainer {background-image: url(https://cdn.pixabay.com/photo/2023/04/23/15/52/flowers-7946004__340.jpg) !important;}
}
</style>

...........................................................

.

ciao

.

... für die Galerie der Seite "www.printundcopycenter.de/bindung.html"  müssen Sie zwei ähnliche Galerien verwenden, die in zwei getrennten Zeilen angeordnet und beide sichtbar sind, wie folgt:
-------------------------------------------------- ---
[--- Zeile pro Galerie für eine Auflösung von mehr als 720 Pixel ---]
-------------------------------------------------- ----
[--- Zeile pro Galerie für Auflösung kleiner als 720 Pixel ---]
-------------------------------------------------- -----

.
... wenn Sie fertig sind, benachrichtigen Sie mich ...

.

ciao

.

Hallöle KolAsim,

dieser Code passt und funktioniert. Mir ging es darum, wenn jemand am Tablet oder Smartphon Seiten aufruft das weniger KB geladen werden müssen. 

<style>
@media (max-width: 799px) and (min-width: 481px) {#imPageExtContainer {background: transparent url('../images/p1_medium.webp') no-repeat center top;background-size: cover; background-attachment: fixed !important;}}

@media (max-width: 480px) and (min-width: 320px) {#imPageExtContainer {background: transparent url('../images/p1_small.webp') no-repeat center top;background-size: cover; background-attachment: fixed !important;}}
</style>

Werde bei der nächsten Änderung mal so durch ändern (40 Seiten) :-) :-)

Den Code von dir muss ich mal in einem anderen Projekt TESTEN, da kann man die Backgrounds ja schön wechseln, ist auch ein GUTER EFFEKT :-) :-)

Mit der Gallery komme ich diese Woche nicht mehr dazu, ab morgen sind die Fensterbauer (neue Dachfenster) bei mir.

Ich DANKE DIR derweil

Gruß

Klaus

ciao, ... der Zweck meines Codes dient genau dazu, Bilder zu verwenden, die in Gewicht und Maß für jede Auflösung geeignet sind ...
... können Sie Bilder an nur zwei (oder drei) Haltepunkten durch quadratische Bilder (1:1)  ersetzen, zum Beispiel:
1 > ...1600x1600 Pixel Bild für Bildschirmauflösung über 1280 Pixel;
2 > ...1000x1000 Pixel Bild für Bildschirmauflösung über 720 Pixel;
3 > ...700x700 Pixel Bild für Bildschirmauflösung unter 720 Pixel;

... ciao ... ...

.