Mejores prácticas de diseño web, tamaños de imagen y multiplicador

Diseño web: hay muchos tamaños de pantalla a considerar. Especialmente los dispositivos de alta resolución usan multiplicador. Leí este artículo muy útil sobre la teoría:

https://sebastien-gabriel.com/designers-guide-to-dpi/

Se vincula a esta guía para tamaños de iPhone:

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resoluciones

Después de todo, establece que debe usar diferentes tamaños de pantalla como 1920 × 1080, 1280 × 800 o 375 × 812 y luego proporcionar un multiplicador diferente para los dispositivos de alta resolución como @ 2 y @ 3.

Actualmente estoy construyendo un sitio web pequeño con una gran imagen de héroe. ¿Necesito proporcionar como veinte resoluciones diferentes con su multiplicador? ¿Parece que funciona mucho Photoshop (y CSS Media Query) para una sola imagen de héroe?

Sé que podría entregar una imagen que se ajuste a todos. Pero eso podría no ser un buen trabajo de diseño web y los teléfonos también necesitan cargar las imágenes de alta resolución que consumen datos móviles muy grandes.

Si solo considero tres o cuatro resoluciones, como las mencionadas anteriormente, ¿son suficientes? ¿O debo usar diferentes resoluciones?

Respuestas (1)

Creo que esto equivale al nivel de construcción y complejidad visual que desea para cualquier creación web en particular en cualquier resolución de pantalla en particular.

Es completamente posible usar 1 imagen para cada resolución de pantalla posible. Puede usar 1 imagen pequeña y dejar que se vea mal en más pantallas 4k/retina. O puede usar 1 imagen grande y dejar que ralentice los tiempos de carga para pantallas donde no es necesario.

Por lo tanto, inevitablemente todo se reduce a qué tan específica desea que sea la experiencia de cualquier usuario. Cuantos más recursos cree para resoluciones de destino específicas, mejor será la experiencia del usuario en esas resoluciones. Si desea que la experiencia del usuario sea óptima en todas las resoluciones, debe crear imágenes para cada una de esas resoluciones.

Dado un público objetivo general y la disponibilidad de la carga de trabajo, personalmente "divido al bebé" y trabajo para @1x y @2x para dirigirme a la mayor cantidad de usuarios posibles y darme cuenta de que los usuarios fuera de esas resoluciones pueden ver versiones de imágenes menos favorables . Pero también veo el trabajo en esas resoluciones solo para estar seguro de que no se muestra nada visualmente horrendo. Si es así, puedo decidir ajustarme a algo como 1x y 3x.