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.
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.
Existen diferentes modos de evitar el pixelado de un logotipo de las imágenes en general de una web, pero nosotros solo vamos a ver algunos de ellos en lo que no es necesario saber programar.
Aumentar la resolución
Este método consiste en aumentar la resolución del logotipo subido. Seguramente estarás pensando ahora mismo que esto no es ninguna novedad, pero espera porque el asunto tiene más miga que la que quizá esperas. Y es que es importante recordar que una pantalla pequeña no siempre significa menor resolución, tan importante es el tamaño como la densidad de píxeles.
Sin querer detenerme demasiado en esta explicación, basta con decir que hay pantallas que usan más píxeles por pulgadas que otras. Esto provoca que una misma resolución se pueda ver con mayor nitidez dependiendo del dispositivo, algo que sucede por ejemplo con las pantallas Retina de Apple o con los smartphones de nueva generación. Esta mayor nitidez es el resultado de que aunque la resolución pueda ser la misma, el tamaño de los objetos es en realidad mayor, normalmente el doble. Por eso un logotipo que está optimizado para un tamaño x, en pantallas de alta densidad se ampliará y pixelará si no se ha previsto el caso.
Teniendo en cuenta lo anterior, si queremos que un logo no pixele por culpa de la densidad de píxeles, podemos subirlo al doble de tamaño del que se verá en pantallas normales y ajustamos su escala con CSS a la mitad. De este modo en pantallas normales se verá bien porque lo que estamos haciendo es reducir su tamaño y en pantallas de doble densidad se verá a tamaño completa sin pérdida alguna.
Usar formato SVG
La mejor opción a nivel de calidad y rendimiento es el uso del formato SVG. Aunque depende del diseño, lo habitual es que el logo se haya trabajado en vectorial y como diseñador web podemos valernos de esto para exportar nuestro archivo en un formato que no produzca pérdida de calidad. El SVG (Scalable Vector Graphics) es un formato vectorial puro, que a diferencia de otros no rasteriza el logotipo, sino que conserva la capacidad vectorial en entorno web.
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.
Ahora bien, es importante que el SVG realmente no es una imagen en sí, sino un archivo que contiene diferentes cálculos que el navegador traducirá en vectores. Esto puede suponer un riesgo potencial de seguridad para tu web si el origen del archivo no es fiable, ya que dentro podría contener instrucciones no deseadas.
Deja una respuesta