¡Buenas!
En esta entrada os voy a comentar un poquito acerca de la optimización de imágenes para la web. Intentando siempre amntener un equilibrio entre calidad y peso de la iamgen, es decir, que se vea decente sin mucho deterioro, y que sea ligera para que no tarde mucho en cargar en una web.
Para ello vamos a optimizarlas en la opción "exportar como..." de Photoshop, sin más habladurías, comenzamos.
Empezamos con una imagen PNG, en modo RGB y de 8 bits.
Al realizar la optimización, hay notables diferencias entre una y otra.
Vamos a ver los cambios entre la imagen original y las optimizaciones.
Antes de nada, detallar las características de la imagen original:
Formato: JPG
Peso: 68 KB
Dimensiones: 394 px x 270 px
Calidad: 100%
Escala: 100%
Modo de color: RGB
Vamos a optimizar la imagen:
Una vez optimizadas, se notan cambios:
La primera imagen optimizada tiene cambios notables respecto a la original. Se puede ver una alta pérdida de calidad (0%). Mantenemos su formato JPG, y modo de color RGB pero sus dimensiones y escala han sido cambiados, siendo ahora 236 x 162 px y 60% respectivamente. Su peso ha variado, siendo ahora 7KB. Es muy ligera, pero no es una calidad adecuada.
La segunda imagen ha sido optimizada con una
mejor calidad,siendo esta del
50%. Se mantiene el
formato y el
modo de color, y sus dimensiones y escala son ahora de
473 x 324 px al
120%. Esta imagen pesa ahora
39KB. Aunque pesa casi 6 veces la primera, sigue siendo un peso ligero para implementar en la web. Además, se ve bastante bien, pudiendo apreciar varios bordes claramente con esta imagen.
Vamos ahora a hacer lo mismo pero con otra imagen.
Imagen Original
Formato: JPG
Peso: 403 KB
Dimensiones: 454 x 303 px
Calidad: 100%
Escala: 100%
Modo de color: RGB
Optimizamos...
La imagen la he optimizado de manera que, su
calidad es del 10%. Mantenemos su
escala del 100% así como sus dimensiones y formato
. Obtenemos un peso de 12.3KB. Hemos reducido mucho su peso, pero su calidad se puede mejorar aún más.
En esta segunda imagen mantenemos el
formato y el
modo de color. Cambiamos la
calidad a 70% y la
escala al 50% , siendo ahora también las dimensiones de
227 x 152 px. El peso de la imagen ha cambiado, siendo este
18.2KB. Un peso bastante ligero, que contiene una
buena calidad de imagen.
Ya vistas las imágenes en JPG, vamos a pasar de forma un poco más ligera, a ver cambios en imágenes
PNG. He de aclarar que las imágenes originales, venían en formato
PSD, con lo cuál vamos a aprovechar a optimizarlas directamente de
PSD a PNG.
En la primera optimización, hemos cambiado el formato de salida a
PNG, con una
escala del 45%. Hemos deshabilitado la opción de
transparencia. Sus dimensiones son de
153 x 107 px, y su peso es de
32.3KB. Pierde de calidad y definición de la imagen, pero no pierde tanta como para desecharla.
La segunda optimización tiene activada la transparencia, mantiene su formato PNG y tiene una escala del 70%, con las dimensiones de 238 x 166 px. Por si fuera poco, su peso se ha casi triplicado, siendo este 81.5KB. En esta ocasión, preferimos la primera imagen, manteniendo calidad decente y con mucho menos peso.
Vamos a realizar EXACTAMENTE las mismas optimizaciones en otra imagen. Obteniendo estos resultados:
En estas optimizaciones tenemos un pequeño dilema. ¿Dejar o quitar la transparencia? Si no la activamos como en este primer caso, la imagen es rodeada por un fondo blanco. Este no queda muy bien visualmente... En esta optimización he desactivado la transparencia y mantenido la escala al 100%. La imagen pesa 180.7KB. No presenta cambios de calidad.
En el segundo caso, he activado al transparencia, lo cual
duplicó el peso de la imagen anterior. Pero al reducir su escala al
50%, hemos logrado un peso considerablemente menor, siendo este de 75.6KB.
Además, no se presentan cambios de calidad.
Vamos ahora con imágenes GIF. Las cuales provenían del formato PNG, y al pasarlas a GIF, han perdido bastante peso.
Optimizamos...
En estas imágenes tan sólo he tocado la escala de ambas. Así podremos comprobar cuánto influye la escala en relación al peso.
Esta tiene una escala del
60%. Su peso es de
27KB.
Y esta, tiene una escala del 120%, y su peso es de 88.7KB.
Hacemos lo mismo con otra imágen.
Optimizamos...
Esta imagen mantiene la escala del 100%, y al haberla pasado a GIF , pesa mucho menos que cuando era un PNG. No presenta cambios de calidad. Pesa 600KB.
Esta, por el contrario, tiene una escala del 50%, siendo más pequeña, y pesa 243.2KB.
Y eso sería todo, basandonos en la relación calidad/peso de la imagen, se pueden optimizar de diferentes maneras para, una mejor calidad y un peso ligero.
¡Hasta otra :D!
He seleccionado la opción de ''MP3 a 256 kbps''. Hemos eliminado la información de todas las imágenes y nos hemos quedado sólo con el sonido. Esto pesa ahora 6,9MB. 
