Imágenes para mi sitio web
No es nuevo mencionar que las imágenes son un pilar fundamental en nuestra página web, ya que es lo que nos va a ayudar a captar la atención de nuestras visitas, a comprender mejor un contenido y hasta puede ser el elemento detonador de una compra… Pero eso sí, ¡siempre y cuando lo hagamos bien!
Subir una foto de mala calidad, o tener una pésima organización de ellas, puede ocasionar el efecto contrario ¡claro está!
Pero para entrar en contexto. ¿Por qué es importante optimizar nuestras imágenes a la hora de hacer una página web y qué tenemos que tener en cuenta a la hora de subirlas a la web?
¡Les traigo varios consejos para ayudarte a crear el mejor sitio web!
¿No les ha pasado que entran a un sitio web y la imagen de la página dura una eternidad en cargar? ¿Que produce en ti ese hecho? ¡Imagino que no debe ser nada positivo!
Pero espera un momento… Les traigo buenas noticias ¡acá está la solución!
Las razones son muchas, pero nos quedaremos con las tres más importantes:
• SEO: Uno de los factores que contribuye al posicionamiento es la velocidad de la carga de la página o, dicho de otra manera, una página cuya carga en el navegador sea lenta, tendrá menos posibilidades de posicionar correctamente, como lo habíamos mencionado anteriormente. Las imágenes pesadas, es decir, con muchos KB o MB, hacen que la velocidad de carga de una página se vea ralentizada. Por lo que se recomienda subir imágenes más livianas.
• Conversión: Una página cuya estructura y la combinación de imágenes y textos sea organizada, tendrá más posibilidades de atraer, retener y «convertir» en clientes a las visitas.
• Estética: las imágenes de pésima calidad hacen de todo menos transferir una imagen seria y profesional de nuestro negocio.
Pero ¿Cómo hago para tener una imagen de buena calidad y que no sea tan pesada?
Podemos empezar a hablar sobre…
La calidad de las imágenes
Pondré dos ejemplos: La primera IMAGEN OPTIMIZADA y la segunda IMAGEN NO OPTIMIZADA
IMAGEN OPTIMIZADA
• Tamaño: 350 x 233 px
• Resolución: 72 ppp
• Tamaño (KB): 33Kb
IMAGEN NO OPTIMIZADA
• Tamaño: 6000 x 4000 px
• Resolución: 300 ppp
• Tamaño (KB): 10,3 MB
¿Quieres saber cuál es la diferencia?
Vamos a explicar por qué una está optimizada y la otra no.
PÍXELES
El tamaño en píxeles de una imagen original es el tamaño de largo y ancho. Piensa que 32 píxeles son 1 centímetro, por lo que el ejemplo de una imagen 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
Efectivamente, la imagen optimizada será menos pesada (33KB) que la imagen no optimizada para web (10, 3 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. Como decíamos, 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.
Entonces…
¿Qué formato recomiendo? ¿.jpg, .png o .gif?
Vamos a presentarte a continuación los tres formatos de imágenes más comunes de una página web y para qué se utiliza cada uno.
• Formato .png: Se utiliza sobre todo 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. ¡Buen dato!
• 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.
Y, por último, pero no menos importante…
• 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.
No sirve de nada que hayamos optimizado las imágenes si al final tu sitio web no tendrá una buena conexión entre imágenes y textos.
Combinación imágenes y textos
Para que un diseño sea efectivo y que las imágenes capten la atención de las visitas, es fundamental que estén bien combinadas.
¿Alguna vez han visitado un sitio web y ven imágenes de diferentes tamaños y con una alineación distinta?
Para que esto no suceda y las imágenes ayuden a organizar el contenido y funcionen como un elemento de atracción, debemos hacer que tengan el mismo tamaño tanto de (ancho x largo) o el mismo ratio (16:9, 4:3, 1:1).
En resumen
– 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.
El orden y la armonía de las imágenes y los textos hacen que las personas encuentren el diseño agradable y no; y eso es lo que hace que sea efectivo o no.
¡INTENTALO Y VERÁS LA DIFERENCIA!
