Ist jemandem etwas Lustiges aufgefallen, als die obige Vorschau auf dem Bildschirm Ihres Mobiltelefons geladen wurde?
Warum hat es so quälend lange gedauert, bis das Bild endlich das gesamte Vorschaufenster ausgefüllt hat?
Das liegt daran, dass es ein sehr großes Bild ist!
Warum muss ein sehr großes Bild den Datentarif des Benutzers verschlingen und so lange dauern, wenn eine winzige Vorschau erschienen wäre, bevor man sie überhaupt bemerkt hätte?
Nein, ich bin mir nicht sicher, wem ich die Schuld geben soll.
Nein. Es ist kein Fehler. Das Bild kommt früher oder später an. Ich sage nur, es ist schlechte Benutzererfahrung. Der Benutzer denkt, niemand kümmert sich um seinen Datentarif, und die Seite lädt nicht so schnell wie andere Seiten.
Nicht so schnell. Sie, in Ihrem Elfenbeinturm in Ihrem Land der Ersten Welt, würden den Unterschied nie bemerken. Aber ich, in meinem Nicht-Elfenbeinturm, in meinem Land der Nicht-Ersten Welt, bemerke den Unterschied sehr wohl!
Verwenden Sie die Entwicklertools, stellen Sie das Land auf Zweite oder Dritte Welt ein, , schalten Sie den Cache aus und laden Sie die Seite neu.
Ihre Beschwerde richtet sich also an Ihren ISP und dessen Peering?
Um es klarzustellen: Das Originalbild ist 3,4 MB groß, diese Miniaturansicht wird von Cloudfront bereitgestellt, ist 690x460 groß und wiegt 164 KB.
Wie auch immer, was schlagen Sie vor? Dass Cloudfront ein schlechter CDN für Benutzer in Ihrer Region ist? Dass Discourse die optimierten Bilder nicht schnell genug heruntergeladen und erstellt hat?
Ich habe ein kleines Smartphone (4,6 Zoll | 720 x 1.280 Pixel). Mein Bildschirm ist nicht kleiner als die Miniaturansicht. Wie klein ist dein Bildschirm?
In Ihrem Nicht-Elfenbeinturm-Land, in dem Daten 8x billiger sind als in den USA und immer noch 2,5-mal billiger als in Europa? (source) oder meinen Sie Ihr Nicht-Elfenbeinturm-Land mit dem schnellsten Breitband-Internet der Welt (source)? Oder meinten Sie Ihr Nicht-Elfenbeinturm-Land, das bei mobilen Daten immer noch den 28. Platz belegt, weit über vielen Industrieländern? (source)
Klingt, als bräuchten Sie einfach ein größeres Telefon.
Nach früheren Beiträgen zu urteilen, hat Jidanni ein Galaxy A13 5G und ein Zenfone 3:
Galaxy A13 5G: 6,5 Zoll, 1600 x 720
Asus Zenfone 3: 5,5 Zoll, 1920 x 1080
Da das optimierte Thumbnail 690 x 460 ist und seine Abmessungen durch die Onebox weiter eingeschränkt werden, ist es nicht größer als ihr Bildschirm. Sie verwenden jedoch Browser-Skalierung, also wer weiß
Ich irre mich vielleicht, aber ich denke, das ergibt Sinn.
Wenn man sich das HTML srcset ansieht, werden die folgenden Bilder basierend auf dem Geräte-Pixelverhältnis (x1, x1,5, x2) ausgeliefert.
Normalerweise haben Mobiltelefone ein x2-Verhältnis (oder mehr), da sie eine höhere Pixeldichte haben.
Sie möchten also Bilder mit höherer Auflösung ausliefern.
Geräte-Pixelverhältnis
Das Geräte-Pixelverhältnis (Device Pixel Ratio, DPR) ist eine Zahl, die von Geräteherstellern vergeben wird und für HiDPI-Displays (High Dots Per Inch) oder Retina-Displays (eingetragene Marke von Apple) verwendet wird, die Teil moderner Smartphones, Tablets und sogar einiger Laptops und Monitore sind.
Der DPR steht in direktem Zusammenhang mit der Pixeldichte des Displays, je höher die Dichte, desto größer der DPR-Wert.
Der DPR ist das Verhältnis zwischen physischen (Geräte-) Pixeln und logischen (CSS-) Pixeln in horizontaler (Breite) oder vertikaler (Höhe) Richtung eines Bildschirms.
Mit anderen Worten, der DPR ist eine Zahl, die zur Berechnung der CSS-Auflösung des Bildschirms verwendet wird. Anhand des DPR können wir direkt sehen, wie viele tatsächliche physische Hardware-Pixel ein CSS-Pixel bilden.
Beispiel:
Apple iPhone 12
Auflösung in Geräte-(physischen) Pixeln: 1170 x 2532
DPR: 3
Breite: 1170/3 = 390, Höhe: 2532/3 = 844
Daher Auflösung in CSS-Pixeln: 390 x 844
Da der DPR 3 beträgt, gilt im Pixelraster: 3 (Breite) x 3 (Höhe) = 9; 9 physische Pixel werden verwendet, um ein CSS-Pixel zu bilden.
Ja, ich glaube nicht, dass das ein Fehler ist. Mein iPad zeigt auf Mobilgeräten Fotos in höherer Auflösung an als mein Desktop, weil es das kann. Ich könnte mich irren, aber ich ging davon aus, dass dies von der Gerätefähigkeit und nicht von der Bildschirmgröße abhängt.
Außerdem bin ich mir immer noch nicht sicher, ob es in diesem Thema um das One-Box-Thumbnail selbst geht oder um das eigentliche Foto, das geladen wird, wenn man auf den One-Box-Link klickt?
Auf Smartphones werden Sie aufgrund ihrer Bildschirmgröße wahrscheinlich keine geringere Bildauflösung bemerken, und ich denke, im Allgemeinen ist die Wahrscheinlichkeit, dass sie eine langsamere Internetverbindung über das Mobilfunknetz als über eine Heiminternetverbindung haben. In dieser Hinsicht würde ich nicht erwarten, dass eine mobile Erfahrung ein größeres Bild als auf einem Desktop-Computer lädt.
Aber scrset gibt vor, welches Bild für welches Pixelverhältnis geladen werden soll.
Das ist definitiv kein Fehler, ich verschiebe es zurück zu UX
Ja, wir sprechen von einem 500-Kilobyte-Miniaturbild.
Was würde Tim Berners-Lee dazu sagen?
Okay, ich habe eine Websuche durchgeführt und tatsächlich ist das eine angemessene Größe für ein Miniaturbild – wenn man es auf YouTube hochlädt.
Ich meine, es muss ein ziemlich fantastischer 50-dimensionaler Hologramm-Thumbnail oder so etwas sein. Bist du sicher, dass du nicht dasselbe für etwa 5000 Bytes machen könntest? Könnte der Benutzer einen Unterschied erkennen? Nein, ich mache niemandem Vorwürfe wegen der Energiekrise oder der Verlangsamung des Webs. Ich denke nur, dass bei einem kleinen Handy etwas besser gemacht werden könnte.
Ich meine, es muss einen Punkt geben, an dem das Hinzufügen von mehr Bytes, egal wie groß das Handy ist, für Menschen keinen Unterschied macht, es sei denn, sie haben Adleraugen, aber sie sind keine Adler, sie sind Menschen.
Ich stimme zu, hier stimmt etwas nicht … dieses Bild ist viel zu groß. Unsere Onebox-Implementierung verlangt ein übergroßes Bild, wo ein viel kleineres ausreichen würde.
Wir werden uns das in den nächsten Monaten ansehen.
, schalten Sie den Cache aus und laden Sie die Seite neu.
