¡¡Buenas a todos!!
En esta entrada os voy a contar un poco acerca de la optimización de imágenes para la web. Intentaremos siempre mantener un equilibrio entre la calidad y el peso de la imagen, sin que haya un deterioro y tenga un peso reducido para evitar las demoras al cargar en la web.
Las optimizaremos en Photoshop en la opción "exportar como..."
La primera es una imagen en JPG, en modo RGB y de 8 bits.
Primera Imagen:
IMAGEN ORIGINAL.
Formato: JPG
Peso: 68KB
Dimensiones: 394px x 270px
Calidad: 100%
Escala: 100%
Modo de color: RGB
Vamos a optimizar la imagen:
Cambios tras la optimización:
La primera imagen tiene cambios muy considerables respecto a la imagen original. Se nota una alta perdida de calidad. Mantenemos su formato JPG y el modo de color RGB, pero las dimensiones y escala han sido modificados, siendo ahora 450 x 306px y 114,21% respectivamente. Su peso ha variado siendo ahora de 14KB, es muy ligera pero no es una calidad adecuada.
Vamos a optimizar la imagen con mejor calidad:
Cambios tras la optimización:
La segunda imagen ha sido optimizada con una mejor calidad, siendo esta del 100%. Se mantiene el formato y el modo de color, y sus dimensiones y escala son ahora de 394 x 270px al 100%. Esta imagen pesa ahora 95,1KB. Aunque pesa casi 6 veces la primera, sigue siendo un peso ligero para la web. Además, se ve bien, pudiendo apreciar claramente la imagen.
Segunda Imagen:
IMAGEN ORIGINAL.
Formato: JPG
Peso: 403KB
Dimensiones: 454px x 303px
Calidad: 100%
Escala: 100%
Modo de color: RGB
Tras la optimización...
Cambios tras la optimización:
La imagen la he optimizado de manera que, su calidad es del 0%. Su escala esta al 100% así como sus dimensiones y formato. Obtenemos un peso de 9,1KB. Hemos reducido mucho su peso, pero su calidad se puede mejorar aún más.
Vamos a optimizar la imagen con mayor calidad:
Cambios tras optimizarla:
En esta segunda imagen mantenemos el formato y el modo de color. Cambiamos la calidad a 100% y la escala al 100% , siendo ahora también las dimensiones de 454 x 303 px. El peso de la imagen ha cambiado, siendo este 85.9KB. Un peso bastante ligero, que contiene una buena calidad de imagen.
Tercera Imagen:
Una vez vistas las imágenes en JPG, vamos a pasar a ver cambios en imágenes PNG. Las imágenes originales, venían en formato PSD,
con lo cuál vamos a aprovechar a optimizarlas directamente de PSD a PNG.
Cambios tras la optimización:
En la primera optimización, he cambiado el formato a PNG, con una escala del 100%. Sus dimensiones son de 340 x 237px, y su peso es de 53,6KB. Pierde de calidad y definición de la imagen.
Segunda optimización:
Cambios tras optimizarla:
La segunda optimización tiene activada la transparencia, mantiene su formato PNG y tiene una escala del 73,52%, con las dimensiones de 250 x 174px. Su peso es 32,4KB. Preferimos la primera imagen, manteniendo una calidad normal y con un peso considerable.
Segunda Imagen PNG:
Esta imagen ha sido cambiada de JPG a PNG.
Cambios tras optimizarla:
En la primera optimización, he cambiado el formato a PNG, con una escala del 129,41%. Sus dimensiones son de 220 x 330px, y su peso es de 37,9KB. Pierde de calidad y definición de la imagen.
Vamos a optimizarla otra vez:
Cambios tras la optimización:
La segunda optimización tiene activada la transparencia, mantiene su formato PNG y tiene una escala del 58,82%, con las dimensiones de 100 x 100px. Su peso es 11,3KB. Preferimos la primera imagen, manteniendo una calidad normal y con un peso considerable, ya que la calidad de esta imagen es pésima.
Optimización de zanahorias:
Esta imagen tenía en principio un formato PSD y la hemos transformado a PNG.
Cambios tras la optimización:
En estas optimizaciones hemos activado la transparencia con lo cual no existe un fondo en si.
La escala de la imagen es 105,93%. La imagen pesa 72,1KB. No presenta cambios de calidad.
Veamos que pasa si la optimizamos con una escala mas reducida:
Cambios tras su optimización:
En el segundo caso, también hemos activado la transparencia, al ser la imagen más pequeña pensamos que el peso se reducirá en comparación a la imagen anterior, pero ha aumentado siendo este de 1,3MB. No se presentan cambios de calidad.
Cambio a GIF.
Vamos ahora con imágenes GIF. Dichas imágenes provenían del formato PNG, con lo cual al pasarlas a GIF, han perdido bastante peso.
Primera optimización:
Cambio tras la optimización:
Esta tiene una escala del 120%. Su peso es de 1,2MB con una resolución de 6000 x 3600px.
Vamos a optimizarla otra vez:
Cambios tras su optimización:
Y esta, tiene una escala del 60%, y su peso es de 35,7KB con unas dimensiones de 3000 x 1800px.
Optimización Puerta Bonita.
El formato de esta imagen era de JPG y hay que cambiarlo a GIF.
Vamos a optimizarla:
Cambios tras optimizarla:
Esta imagen tiene una escala de 100%, y al pasarla a GIF , pesa mucho menos que cuando era un PNG. No presenta cambios de calidad. Pesa 86,4KB.
Vamos a optimizarla otra vez a un tamaño mas reducido:
Cambios tras optimizarla:
Esta, por el contrario, tiene una escala del 74,62%, siendo más pequeña, y pesa 36KB.
Imagenes SVG.
El formato de esta imagen era PSD y hay que convertirla en SVG.
Es un formato vectorial poco conocido pero muy útil.
Vamos a optimizarla a un tamaño mayor:
Tras la optimización la imagen tiene una escala de 141,34% y unas dimensiones de 400 x 400px. Su peso es de 61,4KB. No ha perdido calidad.
Vamos a optimizarla a un tamaño mas reducido:
Tras la optimización la imagen tiene una escala de 70,67% y unas dimensiones de 200 x 200px. Su peso es de 24,7KB. No pierde calidad nada de calidad.
Basándonos en la relación calidad/peso de las imagenes, se pueden optimizar de diferentes maneras para conseguir una calidad decente y un peso ligero para evitar tiempos de carga prolongados en la web.
Espero que os sea útil y os guste, ¡¡hasta otra!!
