Las imágenes son uno de los aspectos más importantes de una página web. Estas nos van a ayudar a captar la atención de los visitantes y posiblemente lleguen a ser el motivo decisivo a la hora de comprar un producto… si lo hacemos bien. Subir una foto de mala calidad o tener una pésima organización de ellas, puede ocasionar un efecto totalmente contrario al dicho anteriormente.

¿Por qué es importante optimizar las imágenes? Estas son las características más relevantes para la buena optimización de imágenes en una web:

SEO: La velocidad de la carga de la página es uno de los factores que afecta positivamente al posicionamiento. Una página cuya carga en el navegador sea lenta tendrá menos posibilidades de posicionar correctamente. Las imágenes pesadas (muchos KB o MB) hacen que la velocidad de carga de una página se vea ralentizada.

Conversión: Una página donde su estructura y la combinación de imágenes y textos sea organizada, tendrá más posibilidades de atraer, retener y “convertir” en clientes a los visitantes.

Estética: las imágenes de pésima calidad hacen de todo menos transferir una imagen seria y profesional de nuestro negocio.

Aquí os mostramos y explicamos la diferencia, no visible para el ojo humano, pero que si afecta extremadamente a una página web.

IMAGEN OPTIMIZADA
Tamaño: 350 x 233 px
Resolución: 72 ppp
Tamaño (KB): 83,2 KB

PÍXELS

El tamaño en píxeles de la imagen original es el tamaño de largo y ancho. Piensa que 32 píxeles son 1 centímetro: por lo que la imagen original de la derecha (no optimizada) sería de 187,5 cm (que es la altura de un hombre adulto). Este es un tamaño innecesario para una imagen dentro de una columna. Podemos tener imágenes de 1000 o 2000 píxeles por ejemplo en el área superior de algunas plantillas (que está destinada para tener una imagen).

RESOLUCIÓN

ppp significa píxeles por pulgadas (también puedes verlo en inglés como dpi -dot per inch- o ppi -pixels per inch). Cuanto mayor sea el número de pp, mayor será la calidad, pero eso servirá para la impresión de una imagen. Por ejemplo, para una página web, 72 pp será suficiente; mientras que para una imagen de un periódico se necesita al menos 300 pp.

TAMAÑO

La imagen optimizada será menos pesada (83,2 KB) que la imagen no optimizada para web (1,2 MB) y eso influye en la velocidad de carga de la página. Existen diferentes formas para guardar imágenes para web o incluso plataformas online como pixlr donde puedes optimizarlas. Lo importante es la forma de guardar el archivo para web: podemos incluso lograr que una imagen de 2000px, optimizada para web y que no sea demasiado pesada.

En resumen, tendremos que buscar el equilibrio entre el tamaño y la calidad que queremos de la imagen para poder subirla correctamente a nuestra página web.

Estos son los tres formatos más utilizados para imágenes de páginas web:

• Formato .png: se utiliza sobretodo para las imágenes que están hechas con formas geométricas y tienen colores planos. La gran ventaja de este formato es que conserva las transparencias y que no pierde mucha calidad en la compresión de la imagen, por eso se utiliza para logotipos.
• Formato .jpg: es el formato universal que se utiliza sobre todo para las imágenes, pues aunque se pierde un poco de calidad al comprimir las imágenes, no se pierden colores o tonalidades.
• Formato .gif: este formato se utiliza para animaciones sobretodo. Dado que se utilizan varias imágenes o un vídeo para hacer el gif, el tamaño en kb puede ser muy grande; por eso, en ocasiones se comprime la imagen y pierde calidad.

De toda esta información sacamos cuatro conclusiones:

• Utiliza imágenes con un tamaño en píxeles adecuado en función de para lo que lo quieras utilizar (imagen de fondo, para una columna…)
• Optimiza la imagen para web para que no sea muy pesada (KB) pues eso ayudará a la velocidad de carga de tu página.
• Guarda las imágenes según el formato que más convenga a la imagen.
• Haz que las imágenes tengan el mismo tamaño o ratio para que el diseño sea más efectivo.