Los íconos constituyen una parte esencial de cualquier interfaz gráfica de usuario, y los sitios web no son la excepción. Todos los días navegamos por páginas que usan íconos para representar ideas o complementar gráficamente lo que expresa el texto. Una característica habitual de los íconos es que se muestran en tamaño pequeño y (a diferencia de, por ejemplo, la fotografía de un paisaje) siguen formas geométricas con contornos bien definidos. Por eso hoy, en una época con incontables resoluciones y densidades de píxeles, ya no es conveniente implementar íconos con PNG: en ese formato, los íconos pierden calidad cuando los agrandamos o achicamos, pudiendo quedar prácticamente irreconocibles. Para generar íconos responsivos necesitamos formatos escalables, y es allí donde se enfrentan SVG y los icon fonts.

SVG, por Scalable Vector Graphics, es un formato de imágenes vectoriales basado en XML, con soporte para interactividad y animación. Icon fonts es una técnica que, a través de la regla @font-face y una tipografía especial, representa caracteres de texto como íconos en la pantalla. Conozcamos las características de cada uno.

Íconos con SVG (Scalable Vector Graphics)

Ventajas

• Como son gráficos vectoriales, cambian de tamaño sin perder definición en los contornos.
• Como están implementados en XML, podemos manipular sus partes por separado. Así, es posible crear íconos multicolores. También tenemos mayores posibilidades de animación.
• Es más correcto en términos de semántica: mientras los icon fonts nos obligan a usar elementos vacíos o pseudoelementos de CSS, los íconos SVG se pueden representar con etiquetas como <img> o <svg>, que fueron hechas especialmente para mostrar imágenes.

Desventajas

• Para suplir los íconos SVG en browsers que no soportan el formato hay que usar fallbacks (reemplazos) con varios inconvenientes. Por ejemplo, la necesidad de generar un archivo alternativo en PNG.

Íconos con icon fonts

Ventajas

• Mayor compatibilidad: la regla @font-face es soportada, aunque con limitaciones, incluso en Internet Explorer 6.
• El color y el tamaño son más fáciles de manipular, ya que se manejan como cualquier texto a través de CSS.
• El tamaño de archivo es menor que en SVG, y las fuentes son almacenadas en caché. Esto garantiza un mejor rendimiento.
• Son más fáciles de integrar.

Desventajas

• Como son texto normal, el browser les aplica antialias, generando contornos borrosos.
• Como cada ícono es un carácter, no es posible crear íconos multicolores (aunque se puede crear varios íconos por separado y apilarlos para lograr el mismo efecto).
• Suele suceder que el browser no logra cargar el archivo de la fuente (a veces no lo hace por cuestiones de seguridad), o bien tiene problemas con el soporte de @font-face. Por eso, muchos desarrolladores de icon fonts advierten que se trata de una tecnología experimental.
• Pueden no mostrarse debido a aplicaciones para bloquear contenido que tenga instaladas el usuario.
• Son más difíciles de crear.
• Los browsers presentan diferencias en la forma de mostrar las fuentes; por ejemplo, aplican más o menos grosor a cada carácter. Esto también aplica a los icon fonts y puede causar problemas para distinguir la forma de cada ícono.
• Son más difíciles de posicionar visualmente con respecto a otros elementos.

Conclusión

SVG es una tecnología más poderosa que icon fonts, y, a medida que vayan desapareciendo los browsers que no lo soportan, es probable que se convierta en la opción por excelencia para mostrar íconos. Sin embargo, icon fonts es una buena elección cuando necesitamos una solución rápida y no tenemos grandes exigencias.

En términos de adaptabilidad a múltiples pantallas, ambas técnicas son superiores a los tradicionales CSS Sprites realizados con una imagen en PNG. Sin embargo, es posible emular esta técnica con SVG.

Los formatos de imagen más habituales en las páginas web tienen una larga historia detrás. Las primeras versiones oficiales de GIF, JPEG, PNG y SVG nacieron entre 1987 y 2001. Pero dentro de poco podríamos estar integrando un nuevo jugador a esta lista: WebP, un formato de imagen desarrollado por Google con soporte para transparencia y animación, y orientado a generar archivos de bajo peso.

Casi exclusivamente, las imágenes en WebP son resultado de la conversión desde otro formato (como los antes mencionados), y solo pueden consumirse de forma nativa a través de browsers compatibles (mayormente, Chrome y Opera). No existen cámaras de fotos ni editores de imágenes que produzcan gráficos directamente en WebP (sin un proceso de conversión). Y, de manera nativa, Android es el único sistema operativo que puede mostrarlos fuera de un browser, como si se tratara de imágenes en un formato tradicional. Sin embargo, existen funciones de PHP, plugins y codecs que salvan en parte estas falencias. WebP apareció en 2010 y todavía está muy lejos de alcanzar su madurez.

¿Para qué necesitaríamos convertir una imagen en GIF, JPG, PNG o SVG a WebP? Para reducir el tamaño del archivo. En muchas páginas web, las imágenes representan la mayor parte de los bytes que habrán de cargarse. Por lo tanto, reducir su peso mejorará drásticamente la velocidad de carga. WebP ofrece dos tipos de compresión:

• Compresión sin pérdida (lossless). Se reduce el tamaño del archivo sin generar ninguna pérdida de calidad.
• Compresión con pérdida (lossy). Se reduce el tamaño del archivo en mayor medida que con lossless, pero a cambio de sacrificar calidad.

De acuerdo con Google, las imágenes WebP con compresión lossless son un 26% más livianas que las PNG, mientras que las imágenes WebP con compresión lossy son entre un 25% y un 34% más livianas que las JPEG. El impacto sobre la velocidad de carga es tan importante, que empresas con altísimos volúmenes de tráfico están utilizando WebP para reducir el consumo de ancho de banda de sus servidores (y, con ello, el gasto de dinero que representa).

Pero no todo son ventajas. En 2013, Facebook empezó a convertir automáticamente las imágenes que subían los usuarios a WebP, mostrando esa versión en los navegadores que fueran compatibles (y JPEG en los otros casos). Las críticas no tardaron en llegar. Muchos usuarios, al descargar fotos de Facebook en su computadora para verlas offline, descubrían que estaban en un formato que no era reconocido por su sistema operativo, por lo que, a diferencia de las imágenes comunes (que pueden verse y editarse fácilmente con aplicaciones de escritorio), solo podían verlas a través del browser. Facebook tuvo que dar marcha atrás con la medida.

En aplicaciones donde los usuarios suben imágenes, la conversión a WebP es un arma de doble filo. Si bien la imagen resultante será más liviana para descargar, el proceso de conversión es complejo y exige un mayor trabajo por parte del servidor. En otras palabras, lo que se gana en ancho de banda se pierde en procesamiento de datos.

Por último, los resultados de la conversión también han sido objeto de crítica. En cuanto al formato JPEG, la conversión lossless a WebP puede generar imágenes incluso más pesadas que las originales, mientras que la conversión lossy puede causar pérdidas de calidad bastante apreciables para el ojo humano.

Conclusión

WebP combina muchas de las ventajas de JPEG, GIF y PNG en un mismo formato, por lo cual podría alcanzar una gran importancia en el futuro de la Web. Sin embargo, todavía tiene un bajo soporte cross-browser y debe resolver los muchos problemas de su algoritmo.

Enlaces externos

• WebP Image Galleries (ver con Opera o Chrome)