Imágenes
La resolución de pantalla es el número de pixeles que muestra. La resolución CSS o Viewport. Si un dispositivo tiene un alto número de pixeles, a una distancia de visualización normal, usaremos dip la unidad de pixel independiente del dispositivo, es aproximadamente igual en todos los dispositivos. El pixel CSS, corresponde al pixel real del dispositivo y el dispositivo corrige esta diferencia con un factor de escala.
Imágenes de mapa de bits
La imagen está formada por una rejilla de pixeles, se definen por su tamaño en ancho y alto en pixeles y la profundidad de color, el número de colores que es capaz de representar en cada pixel.La imagen está formada por una rejilla de pixeles, se definen por su tamaño en ancho y alto en pixeles y la profundidad de color, el número de colores que es capaz de representar en cada pixel.La imagen está formada por una rejilla de pixeles, se definen por su tamaño en ancho y alto en pixeles y la profundidad de color, el número de colores que es capaz de representar en cada pixel.
Imágenes vectoriales SVG
SVG son las siglas de Scalable Vector Graphics. Es un formato desarrollado y mantenido por el W3C. Son imágenes definidas matemáticamente, que se calculan en el navegador y su visualización no pierde calidad en cualquier tamaño que se presenten.SVG son las siglas de Scalable Vector Graphics. Es un formato desarrollado y mantenido por el W3C. Son imágenes definidas matemáticamente, que se calculan en el navegador y su visualización no pierde calidad en cualquier tamaño que se presenten.SVG son las siglas de Scalable Vector Graphics. Es un formato desarrollado y mantenido por el W3C. Son imágenes definidas matemáticamente, que se calculan en el navegador y su visualización no pierde calidad en cualquier tamaño que se presenten.
La etiqueta picture la solución para imágenes responsive. Permite usar varias imágenes según las condiciones media. <picture> <source media="(min-width: 1100px)" srcset="shaum6.jpg"> <source media="(min-width: 1000px)" srcset="shaum5.jpg"> <source media="(min-width: 800px)" srcset="shaum4.jpg"> <source media="(min-width: 600px) " srcset="shaum3.jpg"> <source media="(min-width: 400px)" srcset="shaum2.jpg"> <source media="(min-width: 300px)“srcset="shaum1.jpg"> <img src="shaum1.jpg" alt="shaum"> </picture>
