Imágenes Responsive

La etiqueta <picture> es la solución para imágenes responsive. Permite usar varias imágenes según las condiciones media.

Imágenes vectoriales SVG vs Imágenes de mapa de bits

Imágenes vectoriales SVG: 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.

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 (número de colores que es capaz de representar en cada pixel).

Las imágenes superiores son svg mientras que las inferiores son png (formato 24bits truecolor, compresión sin pérdida, transparencia 256 niveles).