Responsive Images: verkleinertes Bild als Default?

[mpietsch]

Gruß,

für die Darstellung der größten Auflösung benötige ich das Bild ursprünglich hochaufgelöst. Dieses binde ich auch ein. Contao erstellt verkleinerte Varianten. Nun lädt das Polyfill (getestet in Chrome 37) beide Varianten: Original und verkleinert.

Um tatsächlich die Performance zu verbessern, würde ich gern als Fallback die kleine Auflösung angeben und nur größere Geräte müssen den Overhead eines zusätzlichen Images stemmen.

Habe ich diese Möglichkeit übersehen? Kann ich das Original bereitstellen zur Erstellung der Varianten und doch eine verkleinerte Variante als Default einbinden?

VG

-- Micha

[denniserdmann]

Moin Micha,

ich habe es so gelöst, dass ich mein Bild mit beispielsweise 300px, in den Einstellungen von Responsive Images standardmäßig erstmal auf 100px verkleinere. Über Pixeldichte/Skalierungsfaktor gebe ich 1x, 2x, 3x an und komme so am Ende auf die 300px. Heißt also, Contao erstellt mir aufgrund des Originalbilds eine kleine 100px Version und gibt diese als Fallback (SRC-Attribut) und als erstes Bild im SRCSET mit 100w aus. Wenn du alles richtig gemacht hast, dann hast du bei 300w kein Bild aus dem ASSETS-Folder, sondern dein Originalbild stehen.

Grüße,
Dennis

[juju]

Hallo Micha, hallo Dennis,

ich beschäftige mich auch gerade mit responsive images und habe heute sowohl Euren Beitrag als auch einen Artikel der Webkrauts gelesen und dachte meine Erkenntnis diesbezgl. hilft Euch vielleicht auch weiter

Ich dachte nämlich bisher auch, dass in einem srcSet auf jeden Fall das Fallback und dann zusätzlich auch noch das optimale Bild geladen werden muss. Dem ist aber bei modernen Browsern offensichtlich nicht so.

Browser, die das neue Attribut verstehen, ignorieren die Quelle im src-Attribut, alle anderen lesen sie wie immer aus.
(Absatz "Kleinere Bilder für kleinere Bildschirme")

Es wäre also nur für ältere Browser zu berücksichtigen. Und da würde ich im Zweifelsfall so verfahren wie vor der Existenz von srcSets, nämlich die Originalgröße wählen.

Viele Grüße,
juju