Las imágenes son una parte muy importante en publicidad y marketing. Nos transmiten ideas, emociones y sensaciones, y pueden llegar a influir en el mensaje de la campaña tanto o más que el mensaje escrito, pero mal utilizadas pueden producir una sensación de poca profesionalidad o dejadez, o incluso un efecto visual muy desagradable para el usuario. Para conseguir el estímulo deseado debemos conocer cómo hay que aplicarlas y cuales son los requisitos de cada tipo de soporte. Por ello, para ciertos proyectos es indispensable un diseño web profesional.

En este post, nos centraremos en la optimización de las imágenes para páginas web.

¿Por qué es primordial adaptar el formato y resolución de las imágenes al tipo de soporte?

Prácticamente todos en algún momento nos hemos encontrado con las siguientes situaciones:

  • Una página web que tarda en cargar una eternidad (más de 5 segundos ya es demasiado tiempo de carga), y puede verse como una o varias imágenes de la página van apareciendo poco a poco.
  • Una página web cuyas imágenes están cortadas, deformadas horizontal o verticalmente, o son demasiado grandes o pequeñas.
  • Cartelería o cualquier otro tipo de gráfica impresa con imágenes con poca definición, borrosas o de mala calidad.

Esto se debe a una mala adaptación y optimización de las imágenes, puesto que cada soporte requiere unos parámetros específicos. Si contratamos un diseñador para realizar nuestro proyecto, ya sea online o físico (impreso), él se ocupará de dicha optimización, pero si tenemos que proporcionarle las imágenes debemos saber qué puede servirle y que no.

Igualmente si vamos a realizarlo nosotros mismos, tendremos que tener en cuenta varios valores dependiendo de dónde y para qué se van a utilizar las imágenes.

resolución

La importancia de la resolución y el tamaño en las imágenes

¿Qué es la resolución de la imagen? Podríamos decir que es la “calidad” de dicha imagen. Habitualmente para monitores se mide en PPP (pixeles por pulgada), o en inglés PPI (pixels per inch), que en impresión se traduce en puntos por pulgada. Es una medida de densidad de la imagen que relaciona el número total de píxeles o puntos que la conforman, con su tamaño.

¿Demasiado técnico? La explicación sencilla sería la siguiente: las imágenes están formadas por puntos de color, cuantos más puntos tenga la imagen, mejor será su definición. Esto nos podría llevar a pensar entonces que cuanta más resolución, mejor. Pero ojo, para formato digital no es así.

¿Qué resolución de imagen se utiliza en páginas web?

Para las páginas web la resolución que se utiliza es de 72 ppp, puesto que las pantallas “normales” tienen esa resolución. Pero ahora, con la novedad de las pantallas de retina, esta resolución puede ser insuficiente. Esto se soluciona duplicando la resolución (150 ppp para redondear), o duplicando el tamaño de la imagen. El tamaño de una imagen para internet siempre se mide en píxeles.

Subir a internet una imagen con muchísima resolución o tamaño no solo no sirve para nada, puesto que su calidad visual no mejorará por ello (el monitor simplemente no da para más), sino que además es contraproducente. Cuanta más resolución tenga una imagen mayor será la memoria que ocupa.

¿Qué quiere decir esto? Pues que tardará mucho más tiempo en cargarse, y afectará a la velocidad de carga de la página. Igualmente, aun teniendo una resolución adecuada, si la imagen es demasiado grande también nos “pesará” más de lo necesario.

¿Por qué es importante el tamaño de la imagen en una página web

Es necesario adecuar el tamaño de la imagen al espacio que va a ocupar para maximizar la eficiencia de carga. Es absurdo que una imagen tenga más resolución de la que la pantalla puede reproducir como puede verse en las imágenes a continuación.

Si pulsamos sobre una de ellas con el botón derecho y seleccionamos “abrir imagen en una pestaña nueva”, el navegador nos muestra la imagen a tamaño real.

imagen grande

1688 x 1126 px (300 ppp)
900 KB

imagen grande

800 x 534 px (72 ppp)
160 KB

Se puede comprobar cómo dentro de este post la diferencia entre ambas imágenes es imperceptible, puesto que se adaptan al espacio disponible, pero realmente una es mucho mayor que la otra y ocupa mucha más memoria, y por tanto tardará más en cargarse.

Si caemos en la tentación de pensar “bueno, no pasa nada porque tarde un poco más en cargar la página, ¿no?” debemos tener en cuenta que el peso de las imágenes (entre otras cosas de las que no hablaremos en este momento) afectan negativamente a SEO, ya que Google tiene en cuenta cada día más los tiempos de carga, siendo un factor que requiere ser optimizado.

Google puede penalizarte si tu página tarda demasiado en cargar, por ello es importante reducir al mínimo posible el peso de las imágenes. Además, debes tener en en cuenta lo siguiente:

¿Pueden ampliarse las imágenes sin perder calidad?

¡Cuidado! Una regla primordial a la hora de trabajar con imágenes es que nunca pueden ampliarse sin perder calidad. Una imagen grande siempre puede reducirse, pero si ampliamos una imagen pequeña nos encontraremos con que esta pierde calidad, se ve borrosa o se “pixela”, o sea, se le ven los píxeles. En ocasiones podemos ampliar ligeramente sin que la calidad se vea muy afectada, pero nunca demasiado.

Por lo tanto, a la hora de trabajar con un diseñador, debemos proporcionarle las imágenes lo más grandes (o con la mejor resolución) posible y él o ella las adaptará al tamaño y resolución adecuado.

Cómo cambiar el tamaño de una imagen

¿Y que ocurre si decidimos hacerlo por nuestra cuenta, sin contratar los servicios de un diseñador? Para ello necesitamos alguna herramienta que nos permita ver y modificar estos parámetros y no afectar negativamente a nuestra página.

Existen herramientas gratuitas para esto, una de ellas es GIMP, un editor de imagen gratuito que si bien no es tan completo como el programa de edición de imagen por excelencia, Photoshop, cuenta con los medios suficientes para una edición de este tipo. Puede servir cualquier tipo de editor siempre que nos permita modificar el tamaño y la resolución.

Comenzando por lo más básico, el tamaño de una imagen en pantalla es completamente visual. Abriendo una imagen en el editor y configurando su visualización al 100%, lo que nos aparece es el tamaño real al que se vería (sin adaptar al espacio) la imagen.

tamaño de la imagen

Por lo tanto, si no sabemos el tamaño del espacio que ocupará nuestra foto (muchos editores web te lo especifican) y queremos optimizarla para que tenga el tamaño mínimo adecuado para web, pondremos la visualización de la imagen al 100% (al 50% si queremos tener en cuenta las pantallas de retina), con una resolución de 72 ppp. y comprobamos si el tamaño que se ve es similar al del espacio a ocupar.

Una vez hecho esto podemos exportar la imagen con el formato adecuado: jpg para imágenes con fondo y png para fondo transparente.

Cómo optimizar una imagen online

Para terminar de reducir su peso lo más posible es recomendable utilizar un optimizador de imágenes online, de los que hay varias posibilidades gratuitas como pueden ser:

https://tinypng.com/
https://compressor.io/
http://compress.photos/

Con esto ya tendremos nuestra imagen adaptada a web, con un peso adecuado y una visualización perfecta, optimizado la carga de nuestra página.

Si necesitas diseño web para tu e-Commerce o web corporativa, en Amarillo Limón contamos con profesionales que diseñarán y adaptarán las imágenes de manera óptima a la web.