4

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:

  1. ¿Qué ventajas y desventajas tienen cada uno?
  2. ¿Cuál sería la mejor técnica para insertar iconos a una página web?

Teniendo en cuenta calidad, rendimiento y velocidad.

1 respuesta 1

2

Teniendo en cuenta calidad, rendimiento y velocidad y considerando que tu pregunta se refiere a insertar ICONOS quedan a la cabeza SVG y Fuentes.

Ambas tendrán mayor calidad y mejor rendimiento que imágenes ya que ambas están basadas en vectores.

La decisión depende de la cantidad de iconos diferentes que quieras manejar y del grado de personalización que quieras en tus iconos.

Si quieres unos cuantos iconos muy personalizados tu mejor opción es SVG. Por otro lado, si quieres un amplio catálogo de iconos comunes y listos para utilizar lo mejor será elegir una fuente.

En cualquier caso te recomiendo estos 2 links para que amplíes la información y conozcas buenas practicas en el uso de SVG

https://css-tricks.com/using-svg/

https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/

1
  • Gracias por los ejemplos. Me han servido de ayuda.
    – D.Bulten
    Commented el 30 nov. 2016 a las 13:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.