Liste der Anhänge anzeigen (Anzahl: 2)
Frage zur Funktion "responsive Images"
Servus beisammen,
ich hätte eine Verständnisfrage zu der neuen Funktion für Bilder.
Imho habe ich alles korrekt eingestellt.....aber die Bilder werden trotzdem nur per HTML skaliert und nicht in der korrekten Version erzeugt!? Die Einstellungen der Größen ist "proportional" und Layout hat polyfil aktiviert.
Er ändert auch die gewünschte Breite wie angegeben...allerdings ist es immer ein skaliertes Bild. Sollte er nicht ein Neues erzeugen um Bandbreite/Dateigröße einzusparen? Siehe Anhang.
Was mach ich falsch? Link zur Seite - hier
VG
Liste der Anhänge anzeigen (Anzahl: 1)
Noch mal was zum Verständnis. Ich habe den Wert "0.33x, 0.66x, 1x" jetzt ins oberste Element eingetragen. Aber ich habe ja je nach Auflösung auch noch weitere Bildgrößen-Media-Query (max width 480, max.width 320 etc als eigene Größen). Reicht dieser Eintrag in der Einstellung der Bildgröße selbst?
Siehe Anhang. Beim Pfeil ist der Skalierungsfaktor gesetzt, bei den 4 Untergrößen nicht.
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
RockSolid Themes
Ja, mindestens 2048px.
Contao setzt hierbei immer das 1x Bild als Fallback (in dem Beispiel das 1024er). Man sollte hierbei auf die häufigsten Besucher der Website achten. Wenn man hauptsächlich mobile Besucher hat sollte man eher die Einstellungen Breite 338, Skalierungsfaktor 1x, 2x, 3x, 4.5x, 6x verwenden.
Auch mir raucht der Kopf :-/
Zu meinem Verständnis:
Schritt 1: Ich lade ein Original-Bild in der Breite von 2048px in Contao-Dateiverwaltung hoch.
Schritt 2: ich gebe in Themes-Bildgrößen folgende Werte in die Felder ein:
Anhang 16967
Das bedetuet also dann, das für den Fallback src das Bild mit den 338px genommen wird, da dies in der
Breite mit 338 angegeben ist und Contao automatisch dies als 1x für den Fallback src nimmt?
Würde ich da also die Originalgröße von 2018px in die Breite eintragen, dann würde Contao also für den Fallback src das
Bild mit den 2018 px nehmen?
Heißt das, dass das 338px-Bild dann von der Datenmenge auch geringer ist und so schneller geladen wird als das 2018px für Fallback src?
Nächste Frage:
Was ist, wenn man mit dem zweiten Mobile-Layout arbeitet?
Ist diese Technik SEO-konform?
Zusätzlich zur technischen Umsetzung von diesem Thema muß man ja auch
die suchmaschinenoptimierte Darstellung von Bilder im Auge behalten, z.B.
für die google-Bildersuche.
Der Code, der bei der hier beschriebenen Technik generiert wird, schaut
ja recht umfangreich und von den Keywords her sehr wirr aus. Dazu ist
ein Script eingebunden, daß meines Wissens nach nicht positiv von google
beim Ranking bewertet wird:
HTML-Code:
<figure class="image_container">
<img alt="" sizes="100vw," srcset="assets/images/f/gemeindehaus-bar-c0c2345f.jpg 500w, assets/images/9/gemeindehaus-bar-c081b109.jpg 250w, assets/images/1/gemeindehaus-bar-8f94e671.jpg 375w, assets/images/6/gemeindehaus-bar-080fcee6.jpg 1000w, assets/images/2/gemeindehaus-bar-bb3fcfb2.jpg 2000w, assets/images/6/gemeindehaus-bar-7d009d96.jpg 2500w, assets/images/8/gemeindehaus-bar-1929d538.jpg 3000w" src="assets/images/f/gemeindehaus-bar-c0c2345f.jpg">
<script>
window.respimage && window.respimage({
elements: [document.images[document.images.length - 1]]
});
</script>
<figcaption class="caption">Medium 500</figcaption>
</figure>
Wäre es da nicht besser, statt nur ein großes Bild (z.B. 2048px) lieber drei Bilder in 3 verschiedenen Größen in verschiedenen Ordner hochzuladen?
z.B.
/images/small/keyword.jpg
/images/medium/keyword.jpg
/images/large/keyword.jpg
und das Ganze dann doch per Hand einzubinden wir z.B.
HTML-Code:
<img src="/images/small/keyword.jpg"
srcset="/images/small/keyword.jpg 650w,
/images/medium/keyword.jpg 1000w,
/images/large/keyword.jpg 1600w"
sizes="100vw" alt="keyword" titel="Das Keyword wird angezigt">
??
Wie sieht Ihr das?
