Una de las necesidades que surgen al crear una web responsive es la de adaptar el logotipo de la empresa al tamaño del dispositivo. Un diseño de logotipo incluye la versión horizontal y vertical del mismo, y si dispone de logosímbolo nos permite trabajar con esa parte de la imagen. De este modo, es habitual mostrar una versión móvil más simple y compacta para asegurar la correcta usabilidad en la navegación en pantallas pequeñas.
Logo responsive con CSS3 y la etiqueta <picture>
Los nuevos estándares incluidos en CSS3 permiten seleccionar fácilmente la imagen que se muestra en cada tamaño de navegador. La etiqueta <picture> es perfecta para solucionar este problema.
Pero existe un handicap actualmente, los principales navegadores aún no soportan <picture>, como podemos ver en http://caniuse.com/ Esta web nos resulta muy útil para saber que navegadores soportan el elemento.
Logo responsive con JavaScript o CSS
Existen otros métodos basados en JavaScript y CSS que nos permiten solucionar el problema. Con JavaScript podemos cargar sólo la imagen adecuada en función del dispositivo usado. Esto resulta interesante para optimizar el tiempo de carga de la web. Con CSS podemos ocultar en cada momento la versión del logo que nos convenga. En la versión móvil ocultamos el logo grande y en la versión “grande” ocultamos el logo optimizado para móviles. Si las imágenes están correctamente optimizadas el resultado es muy interesante.
El código CSS
@media only screen and (min-width: 59.6875em) {
/* tablets and desktop */
.hide-from-cel{display:none;}
}
@media only screen and (max-width: 59.6875em) {
.hide-from-desktop{display:none;}
}
En este caso el tamaño de pantalla se mide en em y lo que hacemos es usar dos clases, una para cada imagen. Cuando la media query se cumplen, una de las dos versiones del logo se ocultan.
El código HTML
<img src="logo.png" alt="nombre de la empresa" class="hide-from-desktop"/> <img src="logo-movil.png" alt="nombre de la empresa" class="hide-from-cel"/>
Como se puede ver un método sencillo de aplicar a la espera de poder explotar toda la potencia de <picture> cuando sea soportado por la mayoría de los navegadores.
esta técnica no afecta el rendimiento del sitio cargando 2 imágenes? No seria mejor crear una imagen de fondo transparente que tenga el logo grande y el logo optimizado para móvil, luego usando el @media posicionas la imagen según el dispositivo y de esta forma la imagen es cargada una sola vez???
Si el logo está correctamente optimizado (incluso puede ser un fichero vectorial) el peso del mismo es mínimo en comparación con el total de la web. Lo que comentas es también una buena solución. Esperamos pronto poder usar < picture > pronto.