Manchmal `Größen` ist sehr wichtig.

0
51

Paraphrasiert aus Frage E-Mail:

Ich habe gerade Ihren Artikel gelesen Responsive Images: Wenn Sie nur die änderung Auflösungen, verwenden Sie srcset. Im Zeitalter von “responsive websites” srcset nicht helfen, in bestimmten Situationen. Ich habe zum Beispiel eines der beliebtesten Produkte-Schieberegler. Auf mobile habe ich ein Bild pro Folie, wo die Bilder sind 320px breit. Auf dem desktop habe ich sechs Bilder pro Folie, wo jeder ist 160px breit. So dass die desktop-Bilder sind kleiner auf dem desktop, nicht größer.

Wie umgehe ich diese situation mit srcset?

Ich habe versucht, vorsichtig zu sein mit, dass post-Titel: “Wenn du dich nur ändern Auflösungen, verwenden Sie srcset.” In diesem Fall ändern wir die Größe der Bilder nicht nur auf bestimmte Auflösungen, aber bei bestimmten Haltepunkte als auch, was bedeutet, wir sind auch gehen zu müssen, die Größen, die attribute zu bekommen die die meisten von responsive images. Die gesamte Arbeit des Größen-Attribut wird dem browser mitteilen, welche Größe das Bild wird gezeigt, wie Sie in unseren CSS.

Eine demo! Ändern der Breite zu sehen, es wechselt zwischen “Desktop” und “Mobile” Ansichten.

Finden Sie den Stift Responsive Bilder-Slider von Chris Coyier (@chriscoyier) auf CodePen.

Wie der E-Mail erwähnt, den “Desktop” – version tatsächlich macht die Bilder kleiner (160px) als “Mobile” version (320px).

Wir haben auch 2x angezeigt. Um uns darauf vorzubereiten, haben wir drei Versionen von jedem Bild:

  • 160px (1x desktop-displays)
  • 320px (für 2x Monitore, oder 1x Handy-displays)
  • 640px (für 2x Handy-displays)

Mit srcset, das sieht dann so aus:

<img srcset=”
Essen-big.jpg 640w,
Fuß-medium.jpg 320w,
Essen-small.jpg 160w”
/>

Beachten Sie, dass wir jetzt noch nicht mit der Größen-Attribut. Browser davon aus, dass Sie wahrscheinlich sind zu Rendern dieses Bild bei 100vw breit. Das ist schade, weil der browser den download eines größeren Bildes, als es braucht, das ist, was wir versuchen zu kämpfen, gegen die mit ansprechenden Bildern in den ersten Platz.

Auf meinem 2x desktop angezeigt, ich kann sagen, es ist ein Download der 640px-version, aber es muß wirklich nur die 320px version.

Es ist unser CSS-Code, der steuert, wie groß diese Bilder machen. In der Tat, wir haben ein media query in dieser demo, die sagt, “Hey browser, nur das Rendern der Bilder in 160px Breite auf dem Desktop anzeigen”.

@media (min-width: 600px) {
.slider img {
width: 160px;
}
}

Sie würden denken, dass der browser weiß und es tut — es muss nur zum download und zu analysieren, die CSS-ersten. Der browser will eine Entscheidung darüber, was schneller herunterladen als die. Also, wir sagen es mit den Größen-Attribut.

<img srcset=”
Essen-big.jpg 640w,
Fuß-medium.jpg 320w,
Essen-small.jpg 160w”

Größen=”(min-width: 600px) 160px, 320px”
/>

Das ist zu sagen “OK, wir werden das Rendern dieses Bild 160px breit auf dem Desktop. Ansonsten gehen wir mit 320px Breite.” Mit, dass an Ort und Stelle, können wir sehen, der browser ist die richtige Wahl:

Der browser ist jetzt nur die Wahl, laden Sie die 320px version, die richtig ist auf einem 2x display wo die Bilder sind gerendert, auf 160px.

Und nur um sicher zu sein, hier ist ein schmaler viewport (wie “Handy” wäre):

Wir sind zurück, um das herunterladen der 640px-version, die korrekt ist, da an dieser viewport-Größe, die Größen-Attribut sagt dem browser, den wir beabsichtigen, zu Rendern bei 320px und wir sind auf einem 2x display.

Es gibt noch weitere Nuancen hier

Ich zeigte dieses demo zu Eric “Größen Master” – Portis, die bestätigt all dies, hatte aber einige browser-spezifische Dinge hinzufügen. Ich fasse (aber beachten Sie das Datum dieses blog-post, weil diese Dinge neigen dazu, zu ändern):

  • Firefox macht genau das, wie oben beschrieben.
  • Chrome zu, außer, dass es immer die größere version, wenn es diese version im cache. Also, wenn es hat ein 640px version im cache, weiß es, es muß wirklich nur eine 320px-version, aber da es nicht mit einem 320px version im cache, es werden die 640px version statt.
  • Safari auch nicht, außer dass nach hat es seine Wahl, es ändert sich nie (wie wenn Sie die Größe des browser-Fensters).
  • Ein interessanter Teil über srcset ist, dass die spec erlaubt es, Entscheidungen zu treffen, aber es will, vielleicht mit Sachen wie Netzwerk-Bedingungen zu entscheiden. Die meisten Browser das nicht tun, so etwas noch, außer Chrome die downloads der kleinsten Ressource sollte es ein Save-Daten-header des HTML-Dokuments.
  • Joe McGill stellte auch fest: “Für ältere iOS-Geräte, die nicht unterstützen, w Deskriptoren in srcset, das erste source-Element in der Liste wird verwendet werden, so möchten Sie vielleicht zu führen mit Ihrem bevorzugten Standard-Größe, wenn Sie Unterstützung von älteren iOS-Geräten.” In anderen Worten, diejenigen, die ältere iOS-Geräte können unterstützt frühere Schreibweisen von responsive images, sondern nur mit x-Deskriptor (wie big-image.jpg 2x), also vielleicht geben Sie ein gutes Standard-Bild, wie die ersten in Ihrer srcset.

Es könnte hilfreich sein Blick auf Eric ‘ s fork leichter zu sehen, was heruntergeladen:

Finden Sie den Stift Responsive Bilder-Slider von Eric Portis (@eeeps) auf CodePen.

Random notes

  • Ich snagged diese food-Fotos von Unsplash.
  • Ich habe Sie hochgeladen, um Cloudinary, so dass ich verwenden könnte, die URL-params zu vergrößern anstatt zu begegnen, mich.
  • Sie sind alle Plätze, nicht weil ich Sie heruntergeladen, aber weil ich die Größe so in CSS und verhindert Anquetschen mit Objekt-fit. Das bedeutet, dass die Bilddaten heruntergeladen werden, werden nicht mehr gebraucht, also entweder ich haben sollte, beschnitten, Sie selbst, oder verwendet Cloudinary URL-params zu tun.
  • Verwendet habe ich das Mops HTML-Präprozessor für meine demo gerade zur Verringerung des code-Wiederholung.

Es ist einfacher zu betrachten:

img srcset=`
${img_base}w_640${img_1} 640w,
${img_base}w_320${img_1} 320w,
${img_base}w_160${img_1} 160w,
` Größen=Größen)

…als in der Ausgabe:

<img srcset=”
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_640/v1531407936/robin-stickel-82145-unsplash_qnexwz.jpg 640w,
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_320/v1531407936/robin-stickel-82145-unsplash_qnexwz.jpg 320w,
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_160/v1531407936/robin-stickel-82145-unsplash_qnexwz.jpg 160w,
“Größen=”(min-width: 600px) 160px, 320px”/><img srcset=”
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_640/v1531407936/cel-lisboa-60315-unsplash_qsji9j.jpg 640w,
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_320/v1531407936/cel-lisboa-60315-unsplash_qsji9j.jpg 320w,
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_160/v1531407936/cel-lisboa-60315-unsplash_qsji9j.jpg.jpg 160w,
“Größen=”(min-width: 600px) 160px, 320px”/><img srcset=”
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_640/v1531407936/charles-deluvio-466056-unsplash_ocd3dh.jpg 640w,
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_320/v1531407936/charles-deluvio-466056-unsplash_ocd3dh.jpg 320w,
https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_160/v1531407936/charles-deluvio-466056-unsplash_ocd3dh.jpg.jpg 160w,
“Größen=”(min-width: 600px) 160px, 320px”/>