Cómo optimizar las imágenes para tu página web

Miquel  |
  14/03/2013

"Una imagen vale más que mil palabras", este es nuestro objetivo, conseguir que una imagen transmita una información importante al visitante de la página web y que, además, sea visualmente agradable y atractiva.

Optimizar imágenes

En este post del Blog de GPI Software vamos a aconsejaros sobre cómo optimizar imágenes para su correcto uso en páginas web.

Aspectos que debemos considerar cuando estamos trabajando con imágenes:

Combinación de colores

Las imágenes que cargamos en nuestra página web deben seguir (mínimamente) las tonalidades frecuentes de nuestra web para no "molestar" al visitante con unos colores demasiado agresivos o demasiado pobres. Pulse en el siguiente enlace para ver más información sobre El color en el entorno web.

Información de la imagen

Las imágenes pueden ser un punto fundamental en el ser o no ser de una buena página web. Para ello, es necesario que cada imagen transmita una información correcta al visitante de la web, es decir, las imágenes que pongamos en una página web deben tener necesariamente un sentido. Pongamos un ejemplo mediante una captura de pantalla de lo que podría haber sido este artículo con otra imagen principal (pulsar para ampliar):

 Imagen sin sentido

Seguramente habéis entendido el mensaje, en una página web donde hablamos de consejos web no tiene sentido que pongamos una fotografía de despiece de carne.

Además, las imágenes también nos pueden ayudar a optimizar la página para los buscadores, es decir, para mejorar el SEO de nuestra web. Para más información, ver los artículos relacionados sobre SEO.

Calidad de la imagen

Cuando hablamos de calidad de la imagen tenemos que pensar en que dicha imagen se vea bien, que no sea pixelada ni distorsionada.

Para conseguir una buena calidad de imagen es necesario siempre trabajar con imágenes que de origen sean buenas. ¿Qué quiere decir que una imagen sea buena? Deben unirse varios parámetros, entre ellos, color, luminosidad, contraste y otros aspectos que dependen directamente de quien nos proporcione las imágenes (fotógrafo, banco de imágenes, ...). Pero existen dos valores que son primordiales para la posterior optimización de la imagen, que son la resolución y las dimensiones.

Resolución de la imagen

Dicho valor de la imagen se acostumbra a medir con "píxeles por pulgada" o bien su abreviatura "ppp".

¿Qué valor mínimo de resolución necesito? Habitualmente en imágenes para páginas web, con 72 ppp es más que suficiente. Un valor superior solamente nos comportará que la imagen ocupará más espacio en disco y, por consiguiente, cargará más lenta sin un incremento notable de su calidad.

Dimensiones de la imagen

Dicho valor de la imagen se acostumbra a medir, en el mundo de las páginas web, en píxeles.

¿Qué dimensiones mínimas necesito para una imagen? Habitualmente, una imagen en una página web no debería sobrepasar los 800 píxeles de ancho por 600 píxeles de alto. Dichas medidas máximas tienen un sentido y es que, las pantallas de hoy en día suelen moverse en resoluciones entre 1024 x 768 (pantallas de aspecto 4:3) a 1280 x 1024 (pantallas de aspecto 16:9). Si nuestro objetivo es que en todas los monitores se puedan ver las imágenes completamente sin tener que desplazarnos por la pantalla, debemos tomar la resolución mas baja (1024x768) para que una imagen entre dentro de estos márgenes. Por lo tanto, una imagen de 800 píxeles de ancho por 600 de alto es suficiente para que se vea muy bien sin salirse de los monitores más pequeños.

Espacio en disco de la imagen

Este último parámetro de la imagen, también conocido como "peso" es, en parte, resultado de los anteriores parámetros. El espacio de disco que ocupa una imagen depende directamente de su dimensión, resolución, colores y, en general, de la calidad de dicha imagen.

¿Qué valor debo tomar como máximo en el peso de una imagen? Tomando como dimensiones de la imagen el aconsejado anteriormente, 800x600 píxeles, y una resolución de 72ppp, una imagen no debería sobrepasar los 200KB de espacio en disco.

Pondremos un ejemplo numérico y visual para que veáis la consecuencia de unas imágenes mal optimizadas:
Imaginad una página web con 10 imágenes (ya sean en una galería o cargadas en diferentes partes de la misma página). Si suponemos que cada imagen ocupa 500 KB (imágenes no optimizadas), esto resulta en una página web que deberá descargar 5000KB de información (5 MB). Con las conexiones medias existentes en España, según datos de la CMT en 2012, una ADSL descarga a una velocidad media de 600 KB/s siendo muy optimistas. En conclusión, 5 MB de datos serán descargados en 8  segundos y medio aproximadamente.

Sin tener en cuenta otros elementos de la página web, como podrían ser fuentes de texto, scripts de programación, plugins de terceros, etc. 8'5 segundos son muchos segundos para que la navegación sea fluida y el visitante obtenga una buena experiencia de la página web (imaginaros esperar 8 segundos a que una imagen se vea).

Por suerte, los programas de edición de imágenes nos pueden ayudar mucho en optimización y, además, webnet dispone de una herramienta que optimiza las imágenes en el momento de subirlas a la página web.

Seguro que habéis visitado páginas web que tardan en abrirse, o que las imágenes se cargan lentas y en fragmentos. Debemos evitar a toda costa tener una web de estas características porque el visitante captará una mala impresión de nuestra empresa, producto o servicio que anunciamos en la página web.
 

Esperamos que os haya sido útil éste artículo, esperamos vuestros comentarios y aportaciones.

 

 

COMPARTIR:
|
|