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.
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.
Noticias recientes
