Cómo dar un tamaño y resolución óptimo a nuestras imágenes para web

IMPORTANTE: Este artículo donde se explica cómo procesar las imágenes se debe aplicar solo a aquellas que se vayan a insertar directamente en los textos, ya que las imágenes que subiremos a galerías, álbumes, fondos, etc. ya son optimizadas directamente por el sistema.


Muchos de vosotros al encontraros con un nuevo medio de representación de imagen como es Internet, nos preguntáis acerca de la RESOLUCIÓN y TAMAÑO de las imágenes, por ejemplo: “Si le pongo tantos píxeles ¿qué tamaño en cm es?”, “...Si tiene 96ppp ¿cuál es el tamaño final?”, no es lo mismo, a continuación os indicamos algunos conceptos a tener en cuenta para que las imágenes de vuestra web sea óptimas.

  • Debemos tener claro que una cosa es el tamaño de la imagen y otra la resolución, entre ambas configuran el peso del archivo.
  • En web hablamos de ppp (puntos por pulgada) debemos olvidarnos de los centímetros.

  • 96ppp: Esta es la resolución perfecta para Internet, es decir para visualizarlo en una pantalla. No hace falta más. Todo lo que sea más que esto será exceso de peso para la web y por tanto lentitud (y por tanto visitas que se marchen).

  • 300ppp: Esta es una resolución de imprenta para diseño gráfico.

Podéis dar a una imagen TAMAÑO en píxeles o cm (y otras unidades). Si vais a trabajar con papel poned la imagen en los centímetros exactos que va a tener el folleto, flyer, lo que sea. Si vais a trabajar para Internet los píxeles que vais a necesitar en la foto.

La RESOLUCIÓN que especifiquéis después dependerá de las primeras apreciaciones sobre la resolución. Si es para Internet (96ppp) o si es para soporte papel ( +de 150ppp)

La preparación de imágenes para la web exige algunas precauciones cuando se parte de una imagen con alta resolución. Debemos tener presente que la resolución del monitor es aproximadamente de sólo 96ppp (puntos por pulgada). Si cargamos a 300ppp, estamos obteniendo imágenes que serán innecesariamente grandes y que no se verán en absoluto mejor que la imagen adquirida al mínimo de resolución. Una imagen mastodóntica puede tardar una eternidad en descargarse, ocupará espacio innecesario en vuestro servidor y probablemente los visitantes no tengan paciencia para esperar.

Por ello es necesario que obtengáis un programa de edición de imágenes, hay gratuitos como Xnview o otros con licencia más conocidos como Adobe Photoshop. Los conceptos son los mismos, por ello vamos a explicar paso a paso un ejemplo de cómo dar un TAMAÑO de 1440píxeles de ancho y una RESOLUCIÓN A 96ppp.

Paso 1: En primer lugar y muy importante es hacer una copia de la imagen original para poder recuperarla en cualquier momento si fuera necesario.

Paso 2: Abrimos la copia de nuestra imagen en el programa de edición, nosotros vamos a utilizar Photoshop, recuerda que hay cientos de opciones en el mercado.

Paso 3: Nos dirigimos en la barra superior a Imagen > Tamaño de imagen...:


Se abrirá una nueva ventana que nos dará la información que necesitamos de nuestra imagen. Vemos que se divide en tres bloques la ventana:

  1. Dimensiones en píxeles: Anchura 1732 píxeles y Altura: 1155 píxeles
  2. Tamaño documento (Será el tamaño del lienzo si lo imprimiéramos a escala 1:1): Anchura 14,66 cm, Altura: 9,78 cm y lo más importante RESOLUCIÓN 300píxeles/pulgada (este dato puede cambiar según la configuración de la cámara con la que hayamos sacado la foto)
  3. Parámetros de proporción y remuestreo, deben aparecer como se muestran en la imagen.



Paso 4: Vamos a modificar el dato de Anchura en Píxeles, cambiamos el dato original por 1732 por el que queremos 1440, ¿qué ocurre? podemos observar que los datos de Tamaño documento cambian, sin embargo se mantiene la resolución. Una vez cambiado el dato de la anchura a 1440 debemos pulsar en OK, se cerrará la ventana que estamos modificando sus datos.



Paso 5: Volvemos a la barra superior a Imagen > Tamaño de imagen..., se abrirá de nuevo la ventana, observamos que ahora la anchura en píxeles es 1440. Ahora solo nos queda que la resolución sea a 96ppp, para ello deberemos desactivar las opciones: Restringir proporciones y Remuestrear la imagen, una vez desactivamos como se muestra la imagen podremos cambiar la resolución de 300 por 96.

Por último debemos pulsar OK.


Paso 6: Ahora podemos guardar nuestra nueva imagen. Para ello debemos ir a Archivo > Guardar para Web y dispositivos...


Se abrirá la siguiente ventana, se divide en dos, la parte superior se muestra la imagen original y la parte de abajo muestra la imagen optimizada según la Calidad, lo recomendable es que la calidad se encuentre entre 80-60 siendo aún inferior si al comparar original con optimizada no vemos mucha perdida de calidad. Para configurarlo tendremos que hacer los siguiente:

  • Elegir formato JPG del desplegable, punto 1.
  • Insertar numéricamente la calidad punto 2, lo recomendable es entre 80-60, dependerá del color, y de la base de la imagen original. Podemos ir probando hasta encontrar una Calidad que nos guste la comparación. Recuerda cuanto el valor de calidad sea inferior menos pesará la imagen y más rápido cargará tu web.


  • Pulsamos Guardar y ya podemos subirla a la red.



Con Arcadina podrás crear tu web de fotografía. Te invitamos a conocer y probar nuestro servicio.



Sugerencias y base de conocimientos