como optimizar las imagenes antes de subirlas a la web

Para que una web sea el máximo de efectiva cabe prestar especial atención a las imágenes.

Por un lado la calidad visual de la imagen ayudará a:

- Mejorar la impresión general que los visitantes se lleven de tu web. En general, siempre prestamos más atención a una web visualmente agradable que a una que no lo sea tanto.

- Que el visitante tenga una mayor sensación de confianza en el producto o servicio que le estás ofreciendo.

Por tanto evita siempre que sea posible la utilización de fotos "demasiado caseras" o de baja calidad.


Por otro lado antes de subir imágenes a tu web, debes tener en cuenta la optimización de las mismas, a nivel de tamaño y peso del archivo, para que la carga de la página sea lo más rápida posible.

Una velocidad rápida de carga de la página afecta positivamente a:

- La fluidez de la navegación por tu web, reduciendo los tiempos de espera.

- La indexación de la web por parte de los buscadores de Internet como Google. La velocidad de carga de la página (en dispositivos móviles y en escritorio) es uno de los factores, entre muchos otros, que los buscadores tienen en centa a la hora de decidir qué webs muestran antes que otras en los resultados de la búsqueda.

Antes de empezar debes tenes dos cosas claras:

1 - El formato de imagen más adecuado para web és jpg/jpeg por su buena relación de compresión.

2 - Si la imagen original tiene un tamaño inferior al que necesitas para la web, tienes un problema. Ampliar la imagenes suele producir que se vean poco definidas o pixeladas.


A continuación vamos a ver los 3 pasos a seguir para optimizar facilmente las imágenes antes de subirlas a la web:


1. Recortar o dar una proporción determinada a una imagen. (Si la imagen original ya tiene la proporción que te interesa puedes saltar este paso)

Partiendo de la imágen original, te puede interesar recortar una parte de la misma para evitar mostrar algún detalle concreto o simplemente para variar la proporción alto/ancho (por ejemplo, si tienes una imagen horizontal pero necesitas que sea cuadrada para la web)


Para realizar esta operación hay numerosas herramientas muy fáciles de usar. Por ejemplo:

- Aplicación básica Fotos de Windows
- Microsoft Office Picture Manager (herramienta de Office 2010)
- Herramientas gratuitas online como editor.pho.to


2. Ajustar el tamaño de la imagen en píxeles

Una vez tienes la imagen en la proporción deseada has de comprobar si su tamaño en píxeles es el adecuado para la web. Para ello has de ver el espacio que ocupará la imágen en la web. Guíate siempre por la anchura. Teniendo en cuenta que una pantalla fullHD tiene 1920 píxeles de ancho total, puedes prever más o menos cuantos píxeles debe medir la imagen según el espacio que debe ocupar en la web, por ejemplo:

Si la imagen debe verse a pantalla completa necesitarás que el tamaño sea grande, de 1920 px de ancho (si és un poco menos tampoco pasa nada), pero si la imagen debe ocupar solo un espacio pequeño de la pantalla (por ejemplo una tercera o cuarta parte del ancho total) necesitarás reducirla, manteniendo la proporción ancho/alto para no deformarla.


Puedes hacerlo con dos de las aplicaciones mencionadas anteriormente:

- Microsoft Office Picture Manager (herramienta de Office 2010)
- Herramientas gratuitas online como editor.pho.to


3. Eliminar el "sobrepeso" de la imagen

Un fichero de imagen jpg contiene más elementos de los que puedes apreciar visualmente. Se trata de información sobre la imagen, la fecha y la cámara con que se realizó, etc... entre otros. Si consigues eliminar toda esta información que no necesitas sin perder calidad de imagen, obtendrás la misma imagen con menos peso.

Hay muchas herramientas gratuitas online para realizar este proceso. Puedes probar con compressjpeg.com


Una vez tengas la imagen optimizada en tamaño y peso ya puedes subirla a la web. Se mostrará correctamente sin penalizar el tiempo de carga de la web.