Responsive Bilder: Größe ändern oder dynamisch zuschneiden?

Question

Bei dieser Frage geht es eigentlich nicht um Kodierung, sondern um die richtige Methode für eine Aufgabe. Ich weiß nicht, ob es gegen die Regeln von SO ist, aber hier gehst du ..

Ich habe einmal ein kleines CMS für eine lokale Zeitung gebaut, die ihnen die Funktionalität ihrer Beiträge zusammen mit einem Foto hinzugefügt hat. In Bezug auf das Foto haben sie ein einzelnes Foto hochgeladen und ich habe verschiedene Versionen dieses Fotos gespeichert, um sie nach verschiedenen Vorlagen zu bedienen (Vorlagen und nicht Bildschirmgrößen!)

Jetzt werde ich gebeten, dieses alte zu erneuern System und ich bin mit dem Dilemma der Reaktionsfähigkeit/Anpassungsfähigkeit konfrontiert.

Soweit meine Ergebnisse online, das nächste große Ding ist das <picture> Element. Ich habe viele Ressourcen gefunden und gerade als ich mich dafür entschieden habe, bin ich über die this Webseite gekommen. Wenn Sie die Quelle eines Bildes betrachten, werden Sie feststellen, dass es eine Querystring wie width=940&height=320&mode=crop&scale=both&meta=panoramic hat. Wenn ich das Fenster verkleinere, wird es wie width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter Ich glaube, dass diese Website Image Resizer verwendet und dass abhängig von der Bildschirmgröße ein einzelnes Foto wird im laufenden Betrieb vom Server verarbeitet, um das neue Bild auszugeben.

Was ich nicht verstehe ist, welche dieser Methoden tatsächlich besser ist, da das picture Element noch mehrere Bilder auf den Server hochgeladen muss während ImageResizer nur man braucht und es Crops-ändert die Größe der eine geeignet für die Bildschirmgröße. Aber auf der anderen Seite, mit dem picture Element wird der Server nicht mit Anfragen zur Größenänderung von Bildern bombardiert, sondern dient bestehenden Fotos sparen von Verarbeitung und Zeit?

Answer 1

Die Image Resizer-Bibliothek klingt wie Ihre beste Wette - sparen Sie sich die Mühe, viele verschiedene Bildgrößen hochzuladen und zu verwalten!

Wenn Sie sich Gedanken über den Overhead der Bildgrößenanpassung machen (was ohnehin klein ist), könnten Sie immer ihr DiskCache Plugin ausprobieren, das ein Bild einmal skaliert und dann auf Platte speichert - nachfolgende Anfragen für dasselbe Bild der gleichen Größe gib das zurück.

Answer 2

Auf der Website, auf die Sie verlinken, wird das Bild src mit JavaScript geändert, wenn sich das Browser-Ansichtsfenster (und das Website-Design) ändert.

Dies bedeutet, dass der Browser auf die Ausführung dieses JavaScript warten muss, um zu wissen, welches Bild geladen werden muss.

Mit einer Reihe von vordefinierten Bildern auf dem Server und modernen Markup mit <img srcset="…"> oder <picture>, der Browser bekommt alles, was es benötigt direkt beim Herunterladen der HTML, was bedeutet, dass das beste Bild noch vor jedem CSS oder JavaScript herunterladen kann wird heruntergeladen und/oder ausgeführt. Dies ist wirklich viel besser für die Leistung und damit für den Benutzer.

Da diese Standards jetzt von den meisten Browsern unterstützt werden, funktioniert es auch, wenn JavaScript blockiert ist oder aus irgendeinem Grund bricht.