Desde que Google anunció que después del 21 de abril iba a tener en cuenta para el posicionamiento que las páginas web tuvieran versión móvil, más de uno se dio cuenta de la importancia que tiene que una web se vea correctamente en todos los dispositivos.
Google ha creado una guía excelente donde cualquier desarrollador pueda crear sitios adaptados para móviles, no pretendo hacer una copia y pega de esa guía (lo cual sería una tontería por mi parte) sino que pretendo complementarla en lo referente a las imágenes. El propósito de este artículo no es otro que fomentar buenas prácticas con imágenes para móviles.
1.- Conocer las imágenes que más pesan en nuestra página web
Con webpagetest podemos averiguar cuales son las imágenes que más tardan en cargar en el móvil. Al hacer la búsqueda de tu web tienes que elegir el móvil donde quieres hacer la comprobación.
Una vez hecho lo anterior, en detalles puedes ver las imágenes que hay que trabajar. Por ejemplo en mi web serían las que están en la imagen:
Las que tendría que corregir sobretodo son las que se llaman devices1.png, devices2.png, devices4.jpg y 2.jpg. Están haciendo que tarde la web más en cargar.
2.- Optimizando esas imágenes para móviles
Es importante optimizar las imágenes en todos los dispositivos móviles, pues de ello dependerá el resultado final de tiempo de carga de la página web. Pero si eso es importante, mas aún es optimizarlo para móviles, para que no se muestren imágenes de gran tamaño y que no hacen falta para estos dispositivos.
Si hasta aquí estás de acuerdo, solo nos queda indicar como se hace para optimizar las imágenes.
Indicamos la etiqueta meta
Dentro del <head> de nuestra web indicamos:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Esto le dice al navegador móvil que es un sitio responsive y que no escale la imagen.
Código HTML
Antes de crear el HTML, tenemos que crear dos imágenes, la que se va a ver en los ordenadores y la que se va a ver en los móviles (con un ancho máximo de 375px). Una vez hecho esto, vamos al HTML:
<style>
@media (min-width:376px) {
.miimagen {
background-image: url("desktop.png");
width: 700px;
height: 550px;
}
}
@media (max-width:375px) {
.miimagen {
background-image: url("mobile.png");
width: 350px;
height: 130px;
}
}
</style>
<div class="miimagen"></div>
No se trata de crear el código para dos imágenes y ocultarla o no según el dispositivo. No cometas el error de crear el código de esta manera:
<style>
@media (min-width:376px) {
.mobile_image {
display: none;
}
.desktop_image {
display: inline;
}
}
@media (max-width:375px) {
.mobile_image {
display: inline;
}
.desktop_image {
display: none;
}
}
</style>
<img src="mobile.png" class="mobile_image" />
<img src="desktop.png" class="desktop_image" />
Es una mala práctica porque las dos imágenes serán descargadas, por lo que no conseguirás reducir el peso de la página.
¿Te ha parecido útil el artículo? Anímate y comenta.
Deja una respuesta