Imágenes para un móvil

Así que he estado leyendo un poco, pero estoy muy confundido. Soy bastante nuevo en los dispositivos móviles y principalmente he usado css para lograr el aspecto de mi aplicación móvil. La única imagen que se usa en la aplicación es un logotipo que aparece en la barra lateral.

He estado leyendo acerca de cómo Android requiere las imágenes en MDPI, HDPI, etc. Y iOS necesita imágenes en 2x, 3x. Entiendo que estas son imágenes que deben cargarse para diferentes densidades. Lo que no entiendo es,

  1. ¿Cómo se hacen estas imágenes para diferentes densidades?

  2. ¿Cómo implementa estas imágenes para que se carguen con la densidad correcta?

  3. ¿SVG es una buena opción?

Soy realmente nuevo en dispositivos móviles y no sé casi nada al respecto. Gracias de antemano.

relacionado, y probablemente útil: stackoverflow.com/questions/11581649/…

Respuestas (1)

SVG es una buena opción si está utilizando imágenes vectoriales simples. Can I Use muestra que el soporte es bastante bueno en todos los dispositivos ahora. Puede tener problemas si el SVG tiene miles de puntos, ya que el tamaño del archivo puede llegar a ser un poco grande.

Sin embargo, si necesita usar imágenes de trama, consulte este artículo que habla sobre el estándar emergente para imágenes receptivas. No voy a copiar completamente el artículo, pero puedo resumirlo un poco aquí:

  • srcsetdefine un conjunto de imágenes que están disponibles y permite que el navegador elija la mejor para cargar según los parámetros que establezca y el tamaño de la ventana del navegador del cliente. No funciona en IE pero tiene un respaldo al srcatributo estándar
  • pictureabre la posibilidad de la dirección de arte; utilizan el ejemplo de imágenes 16:9 en escritorio e imágenes cuadradas en dispositivos móviles. Aunque no funciona en IE o Safari/Mobile Safari
  • source typees una característica de pictureque le permite usar diferentes formatos cuando el navegador los admite. Entonces, si desea probar WebP o lo que sea, puede agregarlo al conjunto y tener un JPG como respaldo.

Creo que el resultado es bastante desordenado, pero se pueden obtener mejoras de rendimiento, como demuestra el autor. Cuando se trata de reunir todas estas imágenes, puede exportar todos esos tamaños y tipos de imágenes manualmente o puede encontrar un CMS/complemento en el backend que pueda generar esas cosas por usted.