Logo de nuestra web sin pixelar

Cuando diseñamos páginas web es fundamental usar el logotipo de la empresa, normalmente como parte de la cabecera, ya que será de los primeros elementos que siempre estarán visibles en la primera carga del portal. Hasta aquí no he dicho ninguna novedad, pero es cierto que en los últimos años, sobre todo con la llegada de los smartphones y las páginas responsive, ha cambiado un poco la manera en la que mostraremos ese logo.

Y es que ya nos nos vale optimizar la web para una resolución concreta, sino que debemos prever que el diseño se ajuste a múltiples tamaños. Esto no solo afecta a la estructura, sino también al contenido y sobre todo a las imágenes. Es aquí en el tema de las imágenes donde el logotipo cobra protagonismo porque normalmente solemos usar un PNG o JPG a tamaño relativamente pequeño que al ampliarlo se pixela y se ve mal. Es importante recordar que una pantalla pequeña no siempre significa menor resolución (como es el caso de la tecnología Retina de Apple).

Aunque depende del diseño, lo habitual es que el logo se haya trabajado en vectorial y podemos valernos de esto para exportar nuestro archivo en un formato que no produzca pérdida de calidad. El formato que usaremos es SVG (Scalable Vector Graphics), que a diferencia de otros no rasteriza el diseño, sino que conserva la capacidad vectorial.

Para implementarlo, basta con exportar como lo hacemos normalmente, pero en lugar de los formatos habituales seleccionamos SVG. Si usas la suite de Adobe, tendrás que usar la función ‘guardar como’ en lugar de ‘guardar para web’. Una vez lo tengamos, lo incorporaremos a nuestra página web de la manera habitual y el navegador se encargará de representarlo.