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.
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.
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!
No hay comentarios:
Publicar un comentario