Optimización de imágenes

Vamos a guardar tres tipos de imágenes distintas (una imagen fotográfica con transparencia, una imagen fotográfica con fondo y una imagen clipart), cada una de ellas en distintos formatos y con diferentes opciones, para comparar cómo influyen los cambios en su tamaño, calidad y velocidad de carga.

• IMAGEN FOTOGRÁFICA CON TRANSPARENCIA

 

 ARCHIVO JPG

 Al guardar la imagen en JPG observamos que este formato no admite transparencias, automáticamente transforma el fondo transparente en un fondo gris.

ARCHIVO GIF

A continuación he guardado la imagen en formato CompuServe GIF, ahora podemos observar que este formato sí admite transparencias ya que no nos transforma el fondo de ninguna manera.
El formato GIF ocupa mayor tamaño que un JPG.

ARCHIVO PNG-8

ARCHIVO PNG-24

En este paso he guardado la imagen dos veces en PNG pero a distinta resolución.  Primero la he guardado como PNG-8 y después como PNG-24. La diferencia fundamental que observamos es el color, ya que la imagen guardada en PNG-8 sólo admite 256 colores. También hay gran diferencia de tamaños, el PNG-8 tiene un tamaño de 19.901bytes (20KB) y el PNG-24 66.789 bytes (70KB), comprobamos que el PNG-24 tiene un tamaño mucho mayor, lo que le hace más pesado y nos influirá a la hora de subirlo o una página web o también a la de que carge en nuestro blog.

Para guardar una imagen en los formatos PGN lo hacemos desde la aplicaión de Photoshop, nos diriginos a la barra de menú, vamos a Archivo y pulsamos la opción guardar para web.

• IMAGEN FOTOGRÁFICA CON FONDO

Repetimos el proceso anterior con la segunda imagen:

ARCHIVOS JPG Y GIF

La primera imagen está guardada en JPG y la segunda en formato CompuServe GIF, podemos distinguir una clara diferencia de calidad en la dos imágenes, que se ve muy claramente en el fondo de la fotografía. Y al igual que en la primera imagen el formato GIF es de mayor tamaño.

ARCHIVOS PNG

1ª FORMATO IMAGEN: PNG-8 (64 colores)
2ª FORMATO IMAGEN: PNG-8 (256 colores)
3ª FORMATO IMAGEN: PNG-24

Al ampliar las imágenes podemos observar como al cambiar el número de colores que contiene la imagen cambia la calidad de la imagen (los colores se ven más o menos vivos) este cambio también influye directamente en los tamaños de las imágenes ( a más colores mayor tamaño y calidad).

• IMAGEN CLIPART

Realizamos el mismo tipo de comprobaciones con la tercera imagen que es de tipo clipart:

ARCHIVOS JPG Y GIF

La primera imagen, guardada en formato JPG presenta diferencias que apreciamos a simple vista en comparación a la segunda imagen en formato GIF.
En esta imagen el formato JPG se ve con mucha menos calidad, y nos convierte el fondo transparente en un fondo de tono grisáceo.
En este caso a diferencia de los anteriores la imagen en formato JPG tiene mayor tamaño que la guardada en formato GIF.

ARCHIVOS PNG-8 Y PNG-24

 Finalmente, he guardado la imagen clipart en formato PNG-8 y PNG-24. Podemos apreciar como para imágenes tan sencillas como las de tipo clipart es mejor elegir una opción con un formato que contenga menor número de colores, puesto que se aprecia mejor visualmente la imagen guardada en formato PNG-8.

 En cuanto al tamaño, como ya hemos observado, siempre nos es mejor el formato con menos número de colores, esta imagen en formato PNG-8 ocupa 4KB y guardada en formato PNG-24 ocupa 8KB, lo que es la mitad. Sacamos como conclusión que en imágenes de tipo clipart, es recomendable elegir un formato con pocos colores ya que no nos afectará a como visualizamos la calidad de la imagen y obtendremos mejores resultados en el momento de que cargue la imagen en nuestra página web, blog, etc.

FUENTES PRINCIPALES:

• Imágenes obtenidas de CNICE. 
• Capturas de pantalla algunas editadas y retocadas.