SVG vs. icon fonts: ¿cuál es la mejor técnica para crear íconos responsivos?

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.

WebP: construyendo el futuro de las imágenes en la Web

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

Minificar código: una técnica sencilla para hacer más liviano nuestro sitio web

La velocidad de carga es uno de los factores más influyentes en la experiencia que reciben los usuarios de nuestro sitio web. Por eso, tiene una incidencia directa en las tasas de abandono: los usuarios tienden a cerrar la página cuando ven que tarda demasiado en cargar.

Una de las muchas técnicas que apuntan a resolver este problema es la minificación de código: reducir el peso de los archivos de código fuente a través de la eliminación de bytes innecesarios —espacios adicionales, saltos de línea, sangrías y comentarios—, además de simplificar todo lo posible la escritura de las sentencias (por ejemplo, usando nombres de variables y funciones más cortos, o evitando lo más posible la repetición). Otra técnica relacionada es juntar todos los archivos de código fuente de un mismo lenguaje en uno solo. En desarrollo web, los lenguajes que se suelen minificar son CSS y JavaScript (la simplificación de código HTML puede generar una interpretación incorrecta por parte del browser, mientras que en los lenguajes del lado del servidor —como PHP— no se producen mejoras significativas). El verbo no existe oficialmente en español, sino que es una traducción literal del inglés minify.

Veamos un ejemplo. El siguiente código CSS no ha sido minificado, ya que contiene saltos de línea y sangrías, que son útiles para que una persona lo comprenda bien, pero prescindibles para una correcta interpretación por parte del browser:

#main #archives {
     margin-bottom: 30px;
     margin-top: 0px;
     padding-bottom: 40px;
     padding-top: 0px;
     position: relative;
}

Al minificarlo, el código pasa a verse así:

#main #archives{margin-bottom:30px;margin-top:0;padding-bottom:40px;padding-top:0;position:relative}

Un archivo CSS que contenga el primer código pesará 128 bytes, mientras que el segundo tendrá apenas 100 bytes. El peso se ha reducido en un 21,875%.

Conozcamos las ventajas y las desventajas de esta técnica.

Ventajas

  • Se reduce el peso del código fuente del sitio web. Dependiendo de la técnica utilizada, el código fuente original y la posible combinación con otros métodos (como ofuscación de código y almacenamiento en caché), esto puede acelerar de forma drástica la carga de las páginas.
  • Como se reduce la cantidad de bytes que necesita nuestro sitio web, también se reduce el espacio ocupado en el servidor y el consumo mensual de ancho de banda. A partir de cierto nivel de tráfico, esto se traduce en un ahorro de dinero en servicios de hosting.

Desventajas

  • El código minificado es extremadamente difícil de depurar: no hay comentarios y todos los errores se producirán en una única línea larga.
  • Especialmente en JavaScript, si no conocemos la técnica en profundidad, minificar el código puede alterar de manera indeseada su funcionamiento.

Por las características señaladas, muchos plugins de JavaScript y CSS vienen con cada archivo en dos versiones. La versión sin comprimir se recomienda para la etapa de desarrollo, mientras que la versión minificada se destina al sitio ya en producción.

Obviamente, el proceso de minificación nunca es manual, sino que debe realizarse con herramientas específicas como YUI Compressor (Yahoo!) y Closure Compiler (Google).

Herramientas gratuitas para evaluar la calidad de nuestro sitio web

¿Qué es un sitio web de calidad? Si nos basamos en las definiciones que se aplican al software, podemos decir que es aquel que satisface los requerimientos de la función para la que fue creado. Pero ¿qué criterios debe cumplir para adaptarse a esta definición? En este artículo mencionamos algunos de ellos y ofrecemos herramientas en línea para descubrir si nuestro sitio web los cumple.

  • Cumplimiento de estándares. Los validadores del W3C nos indican cuánto se adapta nuestro sitio web a los estándares oficiales de codificación en lenguajes de marcas y CSS. Cumplir con estos estándares no siempre es indispensable para que nuestro sitio web se vea bien, pero genera buenas prácticas, ayuda al mantenimiento y genera código comprensible por la mayor cantidad de plataformas posible.
  • Accesibilidad. La gran mayoría de los desarrolladores web no adapta sus creaciones a los usuarios discapacitados. Sin embargo, los sitios accesibles alcanzan un mayor público objetivo, se posicionan mejor en los buscadores y cargan más rápido. Con WAVE podemos saber qué tan accesibles son los elementos HTML que componen nuestras páginas web y cómo podemos mejorarlos.
  • Velocidad de carga. La lentitud en la carga es quizás el factor que más impulsa a los usuarios a abandonar un sitio web, pero podemos mitigarla siguiendo los consejos de Google PageSpeed Insights. Gracias a esta herramienta obtendremos datos de desempeño en computadoras y dispositivos móviles. Pingdom Website Speed Test aporta datos más complejos.
  • Desempeño en dispositivos móviles. El validador del W3C considera factores como el uso de las imágenes, el peso del documento, la codificación de caracteres, la validez del código, los medios de ingreso de datos y el uso de tablas.
  • Compatibilidad con navegadores. Browsershots nos permite saber cómo se ve nuestro sitio web en una enorme cantidad de browsers (algunos de ellos, prácticamente desconocidos).

Es probable que validar nuestro sitio web a través de una de estas herramientas implique no poder cumplir con los requerimientos de otra. Sin embargo, adaptarnos a la mayor cantidad posible de ellas seguramente redunde en una mejor experiencia para la mayoría de los usuarios.

Cómo acelerar la carga de nuestro sitio web

A menudo, la intención de desarrollar un sitio web visualmente impactante va en contra de una condición irrompible: que «cargue rápido». Los usuarios impacientes abandonarán nuestro sitio web si lo encuentran lento, lo que en otras palabras significa que no comprarán ninguno de los productos o servicios que ofrecemos. Según Strangeloop Networks, un 57% de los usuarios se van de un sitio web luego de tres segundos esperando que cargue. Además, de acuerdo con Akamai y Gomez.com, el 79% de los consumidores online que se enfrentaron a un sitio web lento no volverá a intentar comprar productos allí.

En dispositivos móviles, los tiempos de carga suelen ser mayores que en los de escritorio, tanto por una menor capacidad de procesamiento como por conexiones a Internet más lentas (algo que en nuestro país es especialmente problemático). Sin embargo, los usuarios de móviles esperan tener una experiencia igualmente buena.

¿Cómo lograr que nuestro sitio web cargue rápido y los usuarios no nos abandonen?

  • Usar pocos plugins. Usar plugins externos puede ser indispensable y ahorrarnos mucho trabajo. Sin embargo, en plataformas como WordPress afectan notablemente al tiempo de carga. Existen herramientas para conocer el nivel de uso de recursos de cada uno de nuestros plugins.
  • Cargar los scripts al final. Siempre que sea posible, los scripts de JavaScript deben invocarse al pie del código HTML, de manera que los elementos básicos del sitio se carguen primero.
  • Evitar el hotlinking. Esta técnica consiste en mostrar imágenes o videos alojados en servidores externos, diferentes de aquel en el que se aloja la página actual. Esto obliga a realizar peticiones a un gran número de servidores distintos, ralentizando la carga de la página.
  • Optimizar las imágenes. Debemos comprimir las imágenes JPG de máxima calidad para que pesen menos. Por otra parte, las imágenes deben mostrarse en su tamaño real: incluir una imagen grande y reducir sus dimensiones a través de HTML obliga a escalarlas en tiempo de carga, entorpeciendo este proceso.

Google y Yahoo! ofrecen varios recursos para analizar y mejorar el desempeño de nuestro sitio web.