Desarrollo del sello Eco Rating en SVG.

Diseño accesible, escalable y eficiente para millones de usuarios

1. Contexto

Telefónica Movistar integró el sello Eco Rating a su ecosistema digital para fomentar un consumo más consciente de tecnología.

Este distintivo ambiental, desarrollado junto a otras operadoras y fabricantes de smartphones, debía aplicarse en cientos de fichas de producto del sitio de e-commerce.

Pero el recurso gráfico utilizado originalmente (imágenes JPG/PNG) presentaba múltiples problemas técnicos y de experiencia de usuario.

2. Puntos de dolor detectados

Al analizar el flujo de navegación y el rendimiento general del sitio, identificamos las siguientes fricciones:

• Pérdida de nitidez en pantallas retina o de alta densidad de píxeles (especialmente en mobile).
• Necesidad de multiples versiones de la misma imagen para cubrir distintas resoluciones.
• Alto peso por instancia (298 KB promedio por sello).
• Poca flexibilidad visual, sin posibilidad de aplicar estilos dinámicos.
• Nula accesibilidad: los screen readers no interpretaban correctamente el sello.
• Sin valor SEO: al ser imagen raster, no era indexable ni aportaba keywords al sitio.

3. Objetivo

Rediseñar el sello Eco Rating como elemento web escalable, semántico y accesible, logrando:

• Calidad visual impecable en cualquier resolución.
• Reducción significativa en el peso del recurso.
• Mejora en la experiencia mobile y tiempos de carga.
• Cumplimiento con buenas prácticas SEO, accesibilidad y performance web.

4. Solución implementada

Propuse reconstruir el sello completamente en formato SVG, combinando diseño visual y desarrollo frontend en una única solución accesible, performante y sostenible.

Ventajas clave del formato SVG:

• Un sólo archivo con menor peso, sin multiples instancias y responsivo mediante estilos CSS.
• Escalable sin pérdida de calidad (perfecto en 1x, 2x, 3x...).
• Compatible con todos los navegadores modernos.
• Escalable para todos los equipos disponibles.
• Indexable por buscadores (mejor SEO).
• Legible por tecnologías de asistencia (screen readers).
• Listo para futuras adaptaciones a Light/Dark Mode.

Nota: El diseño visual del sello, tanto en su versión mobile como desktop, fue provisto por el consorcio Eco Rating.
Mi responsabilidad estuvo enfocada en su implementación técnica, con especial atención en la mejora de rendimiento, accesibilidad y escalabilidad.

5. Impacto medible

Datos estimados sobre una única instancia del sello en una tienda con 1.125.000 visitas mensuales.

Formato original	Peso promedio	Peso nuevo (SVG)	Ahorro estimado anual
JPG / PNG	298 KB	3,78 KB	+4050 GB de datos

Si consideramos múltiples visitas, comparativas de productos y otros puntos de exposición del sello, el ahorro de datos podría multiplicarse x2, x3 o más, representando un impacto real en consumo energético.

6. Conclusión

Esta solución fue más que una mejora visual: fue un salto de calidad que integró diseño, performance, accesibilidad y sostenibilidad.

Con este caso logramos demostrar que:

• Una decisión técnica acertada puede tener impacto ambiental positivo.
• El código también comunica, cuando se usa con propósito.
• No se trata solo de optimizar imágenes, sino de construir experiencias responsables y escalables.

7. Ficha técnica

Cliente	Rol	Tecnologías	Resultados
Telefónica Movistar	UX/UI Developer — Diseño, Maquetado y Desarrollo Web	SVG, HTML5, CSS3, Accesibilidad ARIA, SEO Semántico	Mayor performance, mejor UX, impacto sostenible medible