¿Alguna vez has intentado subir una imagen a tu web y te han salido canas esperando a que se subiera del todo? ¿Has visitado alguna página en la que las imágenes cargaban como a trompicones?

Muchas veces esta lentitud puede deberse a nuestra conexión a internet, pero muchas otra se debe al peso de las imágenes. Cuanto más pesan las imágenes, más tarda en cargar una página web.

Pero ojo, cuando hablamos del peso de una imagen no nos referimos a su tamaño:

• El peso de una imagen se mide en kb (kilobytes) y hace referencia al espacio físico que ocupa en tu ordenador/servidor
• El tamaño de una imagen suele medirse en píxeles y hace referencia al ancho y alto que ocupa una imagen

Aunque pueda parecer lógico que cuanto más grande sea el tamaño de una imagen, más grande debería ser su peso, lo cierto es que la cosa no es tan simple y hay un par de trucos para que imágenes de tamaño grande tengan un peso pequeñito.

SOLUCIÓN 1: Guardando imágenes para web desde Photoshop

Para crear una imagen optimizada para web con Photoshop, empezamos por crear un nuevo documento. Si la imagen que quieres crear es para una entrada de tu blog, lo normal es que tenga una anchura de entre 800/1000 píxeles. En cambio, si es una imagen que debe ocupar todo el ancho de la página su tamaño será más grande.

Por lo tanto, lo primero que debemos tener en cuenta es el tamaño de la imagen que necesitamos. Con ello, a Archivo > Nuevo y nos encontraremos ante una pantalla como esta:

Introducimos la anchura y la altura en píxeles y nos fijamos también en la resolución. La resolución nos indica la cantidad de detalle que puede apreciarse en una imagen. Para crear imágenes para web la resolución ideal es de 72 píxeles/pulgada.

También es importante fijarnos en el modo de color. Para las imágenes para web debe ser Color RGB ya que es el sistema de gestión de color ideal para las imágenes que vemos en pantalla (por contra el modo de color CMYK es el que usaremos cuando necesitemos en caso de querer crear una imagen para imprimir en algún formato físico).

Aceptamos y ante nosotros aparece el nuevo espacio de trabajo que acabamos de crear.

Colocar una imagen

Ahora, para insertar una imagen debemos ir a Archivo>Colocar y seleccionar la imagen que queremos utilizar.

Una vez colocada, tendremos una nueva capa con esta imagen. Seguramente, la imagen no acoplará exactamente con el tamaño de nuestro lienzo y tendremos algo similar a esto:

Para que la imagen ocupe todo el fondo, lo ideal es apretar la tecla Shift del teclado y, sin soltarla, coger con el ratón una de las cuatro esquinas de la imagen y estirarla hasta que la imagen ocupe todo el lienzo. (Es importantísimo que no sueltes Shift mientras ajustas la imagen, si no quedará deformada).

Una vez ajustada la imagen, si queremos añadir un texto, una forma o cualquier otro elemento, ¡es el momento! Podemos utilizar algunas de las herramientas de la barra lateral izquierda del programa para insertar cualquier elemento que necesitemos.

Como guardar la imagen optimizada para web

En cuanto tengamos nuestro diseño listo, llega el momento decisivo: guardar la imagen. Para ello debemos ir hasta Archivo > Guardar para web

Lo que nos lleva a una pantalla como esta que nos permite múltiples opciones:

Lo principal, decidir en qué formato queremos guardar nuestra imagen y nuestras mejores alternativas son .jpg o .png:

• Por lo general, y especialmente cuando nuestra imagen sea una foto, conviene utilizar el formato JPG. Es un formato de archivo con escasa pérdida en la compresión y que ocupa poco tamaño. Podemos elegir la calidad de la imagen al guardar lo que nos permite ir ajustando según necesitemos mayor calidad de imagen o menor peso.
• Sin embargo, si lo predominante en nuestra imagen no es una fotografía, sino un texto, un dibujo trazado... es preferible optar por el formato PNG. Este formato comprime sin pérdida y aunque es un pelín más pesado que JPG, ofrece una mayor calidad de imagen sobre los colores lisos, fuentes tipográficas, archivos vectoriales... Para guardar en PNG debemos elegir la opción PNG-24 y también podemos decidir si el fondo debe ser transparente o no dependiendo de nuestro diseño.

Una vez ajustados los parámetros, procedemos a guardar la imagen. Y ya está lista para ser subida y usada en nuestra web 🙂

Solución 2: Guardando imágenes para web desde editores online

Si no sueles usar Photoshop, no lo tienes instalado o no acaba de convencerte para guardar imágenes de manera rápida y sencilla, existen otras alternativas 🙂

En los últimos años han proliferado diferentes editores online de imágenes. Funcionan igual que si tuvieras el programa instalado en el ordenador, pero la ventaja es que no debes instalar nada y puedes editar las imágenes desde cualquier navegador y dispositivo.

Bienvenido a PicMonkey

Uno de los editores online más populares es PicMonkey. Ha ido ganando adeptos por lo sencillo que resulta utilizarlo y por algunas de sus funciones como la de hacer collages de varias fotografías en cuestión de segundos.

Pero a lo que vamos, ¿cómo puedo usar PicMonkey para optimizar las imágenes de mi web?

Lo primero es acceder a su web www.picmonkey.com

Una vez allí, optamos por la opción "Edit"

Inmediatamente, nos hará elegir desde nuestro ordenador la imagen que queremos editar. La seleccionamos y nos encontraremos con la siguiente pregunta:

Como no vamos a imprimir nuestra imagen y tan solo vamos a usarla para nuestra web, elegimos la opción Jack que nos asegura un peso menor con una calidad de imagen más que suficiente.

Redimensionar y recortar nuestra imagen

Ahora tan solo nos queda darle el tamaño deseado. Para ello, podemos usar las herramientas "Resize" (redimensionar) y "Crop" (recortar) que encontramos en el menú izquierdo para darle el tamaño exacto que nuestra imagen necesita.

También y tal y como hemos hecho en Photoshop, podemos agregar textos, bordes, etc.

Una vez que tenemos la imagen tal y como la necesitamos, pulsamos en la parte superior "Save" y seremos redirigidos a una nueva página.

Cómo guardar la imagen optimizada para web

Desde allí, PicMonkey nos permite elegir entre los formatos JPG y PNG para guardar nuestra imagen. Al ser una fotografía, en esta ocasión optamos por el JPG. Optamos también por una calidad media (llamada Pierce) y procedemos a guardar pulsando sobre "Save to my computer".

Y con esto, ya tenemos a punto nuestra imagen para subir a nuestra web.

Aunque ambos procesos son diferentes por las herramientas usadas, lo cierto es que el resultado es muy similar. Tanto con Photoshop como con PicMonkey hemos sido capaces de convertir una imagen de 4100 x 2700px y un peso de 4,83MB, a dos imágenes de 1000 x 600px con un peso de unos 150kb. Eso quiere decir que hemos reducido aproximadamente en un 25% el tamaño de la imagen y ¡en un 97% su peso!

Seguro que a partir de ahora no va a salirte ni una cana más debido a la espera, tus imágenes van a cargar raudas y veloces 🙂