¿Alguien notó algo gracioso mientras la vista previa anterior se cargaba en la pantalla de su teléfono celular?
¿Por qué la imagen tardó tanto en rellenar todo el cuadrado de vista previa?
¡Eso es porque es una imagen muy grande!
Entonces, ¿por qué una imagen muy grande necesita consumir el plan de datos del usuario, tardando tanto cuando una vista previa pequeñísima habría aparecido antes de que te hubieras dado cuenta?
No, no estoy exactamente seguro de a quién culpar.
No. No es un error. La imagen llega tarde o temprano. Solo digo que es una mala experiencia de usuario. El usuario piensa que a nadie le importa su plan de datos y la página no termina de cargarse tan rápido como otras páginas.
No tan rápido. Tú, en tu Torre de Marfil en tu país del primer mundo, nunca notarías la diferencia. ¡Pero yo, en mi no Torre de Marfil, en mi país no del primer mundo, noto mucho la diferencia!
Usa Herramientas de Desarrollador, establece el País en segundo o tercer mundo, , desactiva la caché y recarga la página.
Para ser claros, la imagen original es de 3.4 MB, esa miniatura se sirve desde Cloudfront, tiene 690x460 y pesa 164 KB.
De cualquier manera, ¿qué propones? ¿Que Cloudfront es un mal CDN para los usuarios de tu región? ¿Que Discourse no descargó y creó las imágenes optimizadas lo suficientemente rápido?
¿En tu país no de torre de marfil donde los datos son 8 veces más baratos que en EE. UU. y aún así 2.5 veces más baratos que en Europa? (fuente) ¿o te refieres a tu país no de torre de marfil con el internet de banda ancha más rápido del mundo (fuente)? ¿O tal vez te referías a tu país no de torre de marfil que para datos móviles todavía ocupa el puesto 28, muy por encima de muchos países del primer mundo? (fuente)
A juzgar por publicaciones anteriores, Jidanni tiene un Galaxy A13 5G y un Zenfone 3:
Galaxy A13 5G: 6,5”, 1600 x 720
Asus Zenfone 3: 5,5”, 1920 x 1080
Dado que la miniatura optimizada es de 690x460 y sus dimensiones están aún más restringidas por el onebox, no es más grande que su pantalla. Sin embargo, utilizan escalado del navegador, así que quién sabe
Puede que me equivoque, pero creo que tiene sentido.
Si miras el srcset de HTML, las siguientes imágenes se sirven según la relación de píxeles del dispositivo (x1, x1,5, x2).
Normalmente, los móviles tienen una relación x2 (o más) porque tienen una mayor densidad de píxeles.
Por lo tanto, querrás servir imágenes con mayor resolución.
Relación de Píxeles del Dispositivo
La Relación de Píxeles del Dispositivo (DPR) es un número proporcionado por los fabricantes de dispositivos y se utiliza para pantallas HiDPI (Píxeles por Pulgada de Alta Densidad) o Retina (marca registrada de Apple), que forman parte de los teléfonos inteligentes modernos, tabletas e incluso algunos portátiles y monitores.
La DPR está en correlación directa con la densidad de píxeles de la pantalla; cuanto mayor sea la densidad, mayor será el valor de la DPR.
La DPR es la relación entre los píxeles físicos (del dispositivo) y los píxeles lógicos (CSS) en la dirección horizontal (ancho) o vertical (alto) de una pantalla.
En otras palabras, la DPR es un número utilizado para calcular la resolución CSS de la pantalla. A partir de la DPR, podemos ver directamente cuántos píxeles de hardware físicos componen un píxel CSS.
Ejemplo:
Apple iPhone 12
Resolución en píxeles del dispositivo (físicos): 1170 x 2532
DPR: 3
Ancho: 1170/3 = 390, Alto: 2532/3 = 844
Por lo tanto, resolución en píxeles CSS: 390 x 844
Dado que la DPR es 3, en la cuadrícula de píxeles: 3 (ancho) x 3 (alto) = 9; se utilizan 9 píxeles físicos para formar un píxel CSS.
Sí, no creo que esto sea un error. Mi iPad en vista móvil carga fotos de mayor resolución que mi escritorio porque puede. Podría estar equivocado, pero entendí que depende de la capacidad del dispositivo, no del tamaño de la pantalla.
Además, todavía no tengo claro si este tema trata sobre la miniatura de la caja única en sí o sobre la foto real que se carga cuando haces clic en el enlace de la caja única.
Es probable que no notes una imagen de menor resolución en los smartphones debido a su tamaño de pantalla y, en general, creo que es más probable que tengan una conexión a Internet más lenta a través de la red móvil que una conexión a Internet doméstica. En este sentido, no esperaría que una experiencia móvil cargara una imagen más grande que en un ordenador de escritorio.
Pero scrset dicta qué imagen cargar para cada relación de píxeles.
Definitivamente no es un error, lo moveré de nuevo a UX
Sí, estamos hablando de una miniatura de 500 kilobytes.
¿Qué pensaría Tim Berners-Lee?
Vale, hice una búsqueda en la web y, de hecho, es un tamaño razonable para una miniatura, si la estás subiendo a YouTube.
Quiero decir, debe ser una miniatura holográfica fantástica de 50 dimensiones o algo así. ¿Estás seguro de que no podrías hacer lo mismo con unos 5000 bytes? ¿Sería el usuario capaz de detectar alguna diferencia? No, no culpo a nadie por la crisis energética ni por ralentizar la web. Simplemente creo que, dado que el destino es un pequeño teléfono móvil, se podría hacer algo mejor.
Quiero decir, tiene que haber algún punto en el que simplemente añadir más bytes, sin importar el tamaño del dispositivo móvil que tengan, no marcará ninguna diferencia para los seres humanos, a menos que tengan ojos de águila, pero no son águilas, son humanos.
Estoy de acuerdo en que algo anda mal aquí, sin duda… esa imagen es demasiado grande. Nuestra implementación de onebox está solicitando una imagen sobredimensionada cuando una mucho más pequeña sería suficiente.
, desactiva la caché y recarga la página.
