Imágenes
Hace años las imágenes se utilizaban en todos los aspectos en una página web, su inconveniente es su tamaño, con gran solicitudes HTTP. Con lo cual nació la técnica CSS Sprites para reducir, velocidad, rendimiento y hacen más fácil su visualización haciendo referencia a través de CSS a imágenes que son reutilizables.
.icono-facebook, .icono-twitter {
background-image: url('./ruta-sprite.png') no-repeat;
height: 64px;
}
.icono-facebook {
width: 60px;
background-position: 0 0;
}
.icono-twitter {
width: 112px;
background-position: -72px 0;
}
Fuentes Iconos
Hacer uso de fuentes iconos hoy un día es muy fácil, existen grandes librerías populares como Font Awesome Icon, IcoMoon, Elegante Icon Font y alguno que me dejo.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
SVG
Con gran popularidad actualmente en el mundo del diseño. SVG es sinónimo de gráficos vectoriales escalables.
<svg>
<path id="#mi-icono" d="m50,100..."></path>
</svg>
Ahora mi pregunta:
- ¿Qué ventajas y desventajas tienen cada uno?
- ¿Cuál sería la mejor técnica para insertar iconos a una página web?
Teniendo en cuenta calidad, rendimiento y velocidad.