Muchos de vosotros nos habéis preguntado: “¿Qué significa eso de 400 pixels de ancho en una imagen?“.

Cuando estáis en un programa de diseño siempre hay varias medidas a tener en cuenta:

1.- El tamaño del documento.-
Estas medidas pueden ser en centímetros, picas y otros sistemas que se utilizan normalmente para imprentas y también para imprimir el documento al tamaño del papel.

2.- La resolución.-
Normalmente una resolución de 300 pixels es la indicada para que se pueda imprimir sin problemas cualquier documento en una imprenta, sin embargo, para Internet el estándar es de 72.

3.- Dimensiones en pixels.-
Ese es el tamaño que se va a utilizar en las imágenes expuestas en Internet. Unas personas las verán en sus monitores de un tamaño mayor o menor, siempre dependiendo de la resolución de su pantalla.

Tenéis que tener en cuenta que en algunos monitores una imagen de 400 pixels puede ocupar el total de la pantalla.

ATENCION: La información detallada en otro manual paso a paso de estos últimos tres apartados, los encontraréis en "El tamaño de las imágenes en Internet".

Aparte de todo esto, está la optimización.

La optimización trata de poner en Internet una imagen que se vea a la máxima resolución posible y que sin embargo nos ocupe muy poco espacio en el servidor.

Esto no solo es bueno para nosotros, también lo es para que vuestro artículo se abra antes y el visitante no se canse de esperar a que se descarguen las imágenes y se vayan a otro sitio.

Ahora os vamos a explicar “paso a paso” como redimensionar las imágenes y optimizarlas con el programa Adobe Photoshop.

Abrimos el programa.

Buscamos la imagen que queremos optimizar y cambiar de tamaño.

Y la abrimos.

Comenzaremos por cambiarle el tamaño

Como veréis la imagen tiene un ancho de 1600 pixels, es excesivamente grande y aparte de deformar vuestro blog, no cogería en la mayoría de las pantallas.

Atención, lo único importante es el primer bloque. El de "Dimensiones en pixeles".

Lo único que tenéis que cambiar es la anchura a 450 pixels (por ejemplo)....

... y presionar en “OK”

Atención: Si la imagen original es menor del tamaño que queremos lograr, no sirve de nada aumentarla. Imaginemos que tenemos una imagen de 200 pixels de anchura, si le pones 400 esa imagen se verá mal.

Ya tenemos la imagen al tamaño deseado, ahora solo nos queda optimizarla.

Hacemos lo siguiente

Y os aparecerá una pantalla que dependerá de la opción que escojas arriba.

Para ver la imagen original..

Para ver su calidad después de ser optimizada.

Para ver ambas imágenes en dos ventanas

Y para verla en cuatro ventanas, donde podrás comprobar el resultado de la optimización en varias resoluciones.

Cada ventana tiene sus datos informativos que le explico a continuación:

1. Vista preliminar de la calidad de la imagen después de ser optimizada.
2. El tipo de imagen y su tamaño resultante.
3. El tiempo que termina en descargarse de internet dependiendo de la velocidad de conexión.
4. La calidad escogida.

Para ver más tiempos de descarga, presione aquí:

En la parte superior derecha os encontraréis con este cuadro de diálogo.

De ahí solo os importa, para lo que estamos haciendo, este apartado:

1. Si le dais a la flechita de la izquierda, veréis unos cuantos formatos.
   1. GIF.- Para gráficos como los que os aparecen en este tutorial. Es decir, gráficos con muchas líneas y dibujos, pocos colores y pocos degradados.
   2. JPG.- Para fotografías e ilustraciones con muchos colores y degradados.
   3. PNG.- La máxima calidad, pero también los archivos más grandes.
2. Nuestro ejemplo se trata de un dibujo con muchos colores y degradados, por ello hemos escogido el formato JPG
   1. En ese cuadrito, como máximo tenéis que poner 60. 55 es lo ideal para este formato
   2. Si se tratase de un formato GIF, podéis ir probando y mirando la imagen de la derecha para saber cómo se va a ver en Internet. Cuanto menos sean las cantidades de colores a utilizar, más pequeño será el archivo y por tanto se abrirá antes.

Ahora solo nos queda guardarlo en la carpeta que tengamos para ello y con el nombre que deseemos.

Este es el resultado del ejemplo de este “paso a paso”