___ qstnhdr ___ Warum nicht immer 2x Bilder beim Erstellen von Webseiten verwenden? [geschlossen]
___ answer23298161 ___
Lassen Sie sich von Analytics leiten
Ich verwende die 5% -Regel. Sobald irgendein Merkmal mehr als 2 Standardabweichungen außerhalb der Norm liegt, lehne ich die Unterstützung dafür ab. Im Browserland bedeutet das, dass IE6 und IE7 für mich weg sind, aber ich unterstütze weiterhin IE8, weil ein großer Teil des Publikums diese Funktion nutzt. Yeah, die großen Jungs wie Google haben es fallen gelassen, aber ich sehe immer noch einen guten Teil des Traffics auf vielen Websites. Warum sie leiden lassen?
Nun, wie sich das auf Ihre Frage bezieht: Fragen Sie sich, wie viel Prozent Ihrer Zuhörer sich auf einer 10Mbps + LTE-Verbindung mit Retina-Bildschirm befinden. Vielleicht sind es in Ihrem Fall 95% Retina-Bildschirme mit LTE auf Mobilgeräten, aber überprüfen Sie Ihr Analysepaket. Meine Vermutung ist, dass es wahrscheinlich unter 20% ist, in welchem Fall Rückfälle einen besseren UX-Wert von 80% Ihrer Zielgruppe ergeben - die Mühe lohnt sich.
___ antwort23298401 ___
Meiner Meinung nach sehe ich diese Probleme:
-
Einige ältere Telefonmodelle (z. B .: iPhone 3G) und Tablets (z. B .: iPad 1) haben wenig Speicher. Ein ausreichend großes Bild kann Speicherfehler verursachen.
-
Um ein Bild zu skalieren, muss das System es in voller Größe laden und bei jedem Zeichnen eine komplexe Skalierung durchführen (manchmal wird es zwischengespeichert).
-
ein verkleinertes Bild sieht nicht so gut aus.
-
Sie können Probleme mit ihnen in älteren Browsern haben (wie von Bill Criswell erwähnt)
-
erhöht die Downloadgröße. Wenn wir eine 10kb Vergrößerung der Größe / Bild * 10 Bilder pro Seite betrachten, erhalten Sie 100kb pro Seite geladen. Wenn Ihre Seite viele Bilder anzeigen muss (denken Sie an soziale Netzwerke), dann ist der Aufwand sehr hoch.
-
Sie können Ihre Suchmaschinen-Rankings verbessern, wenn Ihre Seite schneller geladen wird und sie kleiner ist.
___ answer23297964 ___
Ich denke, die Antwort hängt davon ab, wo du auf der Welt lebst. Ob Sie es glauben oder nicht, ich lebe in einem Gebiet mit vielen Landstraßen, die immer noch nur einwählen. Manchmal funktioniert das auch nicht. Wir sind immer noch nicht so schnell wie wir mit Desktops sein sollten. Ich kann mir nicht vorstellen, dass sie diese zusätzlichen Daten herunterladen müssen, wenn sie 1x sehen.
Also, ich denke, es hängt von Ihrer Zielgruppe ab, wo sie mit größerer Wahrscheinlichkeit leben oder welche Geräte sie verwenden. Wir werden rechtzeitig ankommen, aber für einige noch nicht.
___ answer23297931 ___
Das Problem mit der Dateigröße stört mich. Ich denke, die Dinge sollten so klein wie möglich sein.
Wenn Sie sich darüber keine Gedanken machen, ist das einzige, vorübergehende Problem, das ich mir vorstellen kann, die Browserunterstützung für %code% . IE8 unterstützt es nicht und es wird immer noch genug verwendet, um sich darum kümmern zu müssen (zumindest bei meinen Projekten). Es gibt eine Polyfill dafür, aber es ist nicht mit dem echten Ding zu schnupfen.
___ tag123html ___ HTML (Hyper Text Markup Language) ist die Standard-Auszeichnungssprache, die zum Strukturieren von Webseiten und zum Formatieren von Inhalt verwendet wird. HTML beschreibt die Struktur einer Website semantisch zusammen mit Hinweisen für die Präsentation, wodurch sie eine Markup-Sprache statt einer Programmiersprache wird. Die neueste Revision der HTML-Spezifikation ist HTML5.2.
___ tag123css ___ CSS (Cascading Style Sheets) ist ein Blatt Sprache zur Beschreibung das Aussehen und die Formatierung von HTML (Hypertext Markup Language), XML (Extensible Markup Language) Dokumenten und SVG-Elemente, einschließlich (aber nicht beschränkt auf) verwendeten Farben Darstellung Stil, Layout, Schriftarten und Animationen.
___ answer23298998 ___
Das einzige große Problem ist die Dateigröße. Und wie Sie feststellen, sind die Dateigrößenunterschiede in vielen Fällen minimal.
Wenn wir hauptsächlich Icons sprechen, ist der Vorteil, dass a) Icons nicht groß sind, so dass die Dateigröße minimal ist und b) Symbole am meisten von der Retina-Auflösung profitieren.
Auf der anderen Seite, wenn wir "Vollbild" -Nachrichtenfotos sprechen, könnten diese etwas größer sein, aber auch gut aussehen, wenn sie nicht Netzhaut sind (da sie ein Dauerton sind). Es ist also weniger zwingend erforderlich, diese Retina zu erstellen, wenn Sie ein mobiles Gerät verwenden.
Ein Kompromiss für Letzteres könnte sein, sie zu faulenzen. Überprüfen Sie die Bildschirmgröße. Wenn das Telefon groß ist, lade das normale Bild und nenne es gut. Wenn es größer als die Telefongröße ist, laden Sie das normale Bild, gehen Sie dann zurück und greifen Sie die Retina-Version zum Beispiel für ein iPad 3 auf.
Das einzige technische Problem ist IE8 und älter. Sie können nicht mit dem CSS umgehen, das Sie normalerweise für Retina-Bilder verwenden würden. Es gibt Problemumgehungen, aber nicht für Sprites - die Sie normalerweise für Symbole verwenden würden.
Irgendwann werden wir mehr SVG-Unterstützung sehen, die dieses Problem lösen wird - zumindest für Icons. Wenn ich zum Beispiel reine iOS-Arbeit mache, ist die meiste meiner Bilder jetzt SVG. Es ist kleiner und automatisch retinabereit.
___ tag123retinadisplay ___ Die Retina-Anzeige ist eine Marke, die von Apple für Displays verwendet wird, deren Pixeldichte so hoch ist, dass das Auge keine Pixelierung bemerken kann. Der Begriff wird für mehrere Modelle des iPod touch, iPhone, iPad und MacBook Pro verwendet.
___ tag123web ___ Verwenden Sie dieses Tag für allgemeine Fragen zu allen Aspekten des World Wide Web. Verwenden Sie für bestimmte Teile das spezifische Tag, z. B. [uri], [html] und [http].
___ qstntxt ___
Ich hatte gestern ein Gespräch mit einem Designerfreund, dessen Hauptpunkte ich im Folgenden erläutern werde:
- 2x Bilder sind größere Dateien, aber nicht die 4x, die Sie vielleicht denken. In einem Beispiel ist eine 1x Bilddatei 47kb & amp; sein 2x Gegenstück ist nur 55kb.
- 2x Bilder sind nur für Retina-Bildschirme, und obwohl sie auf der Desktop / Laptop-Seite eingeführt wurden, ist die Wahrheit, dass die meisten Retina-Bildschirme mobil sind.
- Während WLAN immer mehr allgegenwärtig ist, sind Desktops (meist 1x) die einzigen Geräte, die niemals Daten aus einem Zellennetzwerk herunterladen müssen.
All dies hat mich dazu gebracht, die Frage zu stellen: Warum geben wir Energie für die Bereitstellung von 2x Bildern aus, wenn sie hauptsächlich von mobilen Geräten mit den größten Bandbreitenbeschränkungen genutzt werden?
Nachdem ich darauf geschlafen hatte, begann ich mich zu fragen: Nun gut, wenn wir das letzte Problem ignorieren, warum nicht einfach nur in 2x handeln? CSS kann die Bilder auf jeden Fall herunterskalieren (vielleicht liege ich hier falsch?), Also speichern Sie die Medienabfragen & amp; Speichern Sie den Aufwand, um 2 Kopien von jedem Bild zu erstellen und zu speichern, indem Sie einfach 2x überall verwenden?
Bin ich verrückt?
___