Imágenes responsive
He asignado tres imágenes diferentes para diferentes min-width, así se puede ver cómo, al cambiar la dimensión de la ventana del navegador, se producen los cambios de imagen.
De esta forma, la imagen que aparece si el navegador es de 1100 píxeles de ancho o mayor es una hamburguesa. Cuando baja de los 1100 píxeles, y antes de llegar a los 600 píxeles, la imagen es un plato de verduras. Por último, si la ventana baja de los 600 píxeles, la imagen muestra unas patatas asadas. En el momento en el que se baja de los 300 píxeles, la imagen vuelve a ser la de la hamburguesa, ya que en la etiqueta <picture> se indicó también que la etiqueta <img> sin propiedades de media sería esa.
Vídeo insertado de Youtube
Imágenes vectoriales SVG
Dimensiones: 50x50 px
Dimensiones: 200x200 px
Dimensiones: 400x400 px
Al ser un archivo .svg se tratan de vectores matemáticos, por lo que la imagen nunca va a tener pérdida de calidad y siempre se verá con una resolución perfecta, independientemente del tamaño que se le asigne.