Optimizar imágenes para web nivel ninja

Quiero compartir contigo el milenario arte de optimizar imágenes para web que utilizan los ninjas y hacer desaparecer cualquier KB que esté demás en tu web.

En esta ocasión también he grabado un videotutorial, pues quizás así es más rápido de entender. Pero como siempre, incluyo su versión en artículo más abajo por si estás en el trabajo, falto de datos o simplemente no te gustan los vídeos.

Guardar una imagen que te gusta y subirla 🙁

La motivación para crear este tutorial nace exactamente de esto. Muchos clientes, a la hora de incluir o sustituir imágenes en su web, se limitan a buscar por Google una imagen que les guste, guardarla en su ordenador y cargarla en su página.

Entiendo que éste es un proceso que puede parecer lógico, más aún cuando la mayoría de las webs van a redimensionar las imagenes en el momento de mostrarlas, de esta manera se adaptan a cualquier dispositivo, pero lo que hay detrás asusta a Google y a tu tarifa de datos.

La imagen no tiene por que ser pequeña aunque así se vea.

Supongo que el problema viene dado por que no acostumbramos a ver las imágenes a su tamaño real. Que una imagen se visualice a 600 x 400 píxels no quiere decir que éste sea su tamaño, en función del dispositivo estará mostrándose a uno u otro tamaño (diseño responsive…).

Por otro lado, la percepción al subir una imagen a la web es la misma, subes una imagen de 3000 x 3000 pixels pero se visualiza a 300 x 300 píxels así que crees que no pasa nada porque funciona igual. Pero sí que pasa, el navegador descarga la imagen a 3000 x 3000 píxels y después la adapta al tamaño de la pantalla.

Valorando qué imágenes tenemos.

Lo primero que vamos hacer es ver qué características tienen las imágenes que hemos descargado. Imaginemos que voy a escribir un artículo de los Simpsons y bajo estas imágenes para incluirlas en el post. Lo primero que debemos hacer es visualizarlas en el finder, gestor de imágenes, Photoshop o programa similar y ver 3 características principales: Tamaño, peso y formato.

 

Optimizar imágenes para web

El tamaño.

El tamaño de la imagen acostumbra a ser el mayor problema, fijémonos que la imagen de Matt Groening  y James L. Brooks que hemos visto en una web, al descargarla ¡mide 3000 x 2085 píxels! Nos sobra imagen por todos lados. Piensa que en esta página el ancho máximo del contenedor es de 912px, todo lo que exceda ese tamaño va a ser redimensionado.

El peso.

Si nos fijamos en el tamaño del archivo de la imagen mencionada, vemos que pesa 1,2MB, un peso desorbitado. Piensa en la persona que navega desde su teléfono móvil, vas a devorar su tarifa de datos, de alguna manera estamos cobrando al usuario de tarifa de datos por ver nuestra web, así que procuremos ser baratos.

Por otro lado tenemos a Google, que directamente te pondrá una cruz por pesado y perjudicará tu SEO.

El formato

Este punto también puede ser decisivo en el peso. Si conocemos los diferentes formatos de imagen para web podremos elegir el más adecuado a la imagen y cambiarlo para nuestro beneficio. Encontramos los siguientes:

Formatos de imagen para web

  • El Jpg es un formato que puede albergar 16 millones de colores, osea mucha información, por lo general, si la imagen no tiene alguna particularidad concreta, es el que utilizaremos.

  • El Gif es un formato que puede albergar hasta 256 colores y nos deja seleccionar el número de colores (2, 4, 8, 16, 32, 64, 128, 256). Es ideal para colores planos y para imágenes con transparencia, al tener una paleta de colores tan reducida no funciona bien con imágenes “reales” . También nos permite crear pequeñas animaciones aunque el peso se dispara y la calidad es muy baja, pero son divertidas.Ejemplo gif animado
  • El PNG, si bien tiene muchas características, a nivel de web nos interesa cuando queremos una imagen con mucha información (millones de colores), pero queremos utilizar transparencias y el gif se nos queda corto de calidad.

Optimizar imágenes con photoshop

Ahora que sabemos qué aspectos valorar, vamos a ver cómo optimizar imágenes para web. Hay varias herramientas, yo le doy el primer meneo con Photoshop, abro la imagen y me voy a la opción de: Archivo>Exportar> Guardar para web.

En esta ventana de exportación para web nos encontramos:

Guardar para web Photoshop

  1. Este apartado nos muestra el tamaño final de la imagen una vez exportada. Deberemos ir chequeándolo a medida que cambiemos ajustes.
  2. Formato y opciones de formato. En el primer panel elegiremos si queremos JPG, GIF o PNG, si está seleccionado JPG el selector de debajo nos mostrará los niveles de calidad: baja, mediana, alta…
  3. Este campo nos permite modificar el tamaño, aquí definiremos el tamaño al que queremos redimensionar la imagen. Verás que sólo con cambiar el tamaño ya baja mucho el peso.
  4. En el caso de seleccionar GIF este selector nos permite definir el número de colores que queremos para la imagen, esto influye exponencialmente en el peso final del archivo.

Una vez hechos los deberes y las imágenes tienen la misma medida a la cual se van a visualizar (ésto le encanta a Google, minipunto para tu SEO), hemos elegido el mejor formato y los mejores valores de calidad, tendremos la sorpresa de ver cómo se reduce el peso de manera muy significativa. Si nos remitimos a las imágenes de los Simpsons anteriores vemos que la optimización queda de la siguiente manera:Optimizar imágenes web con photoshop

Como habrás imaginado los números en rojo indican el peso que hemos ahorrado respecto las imágenes originales. Llegado a este punto puedes sentirte muy contento, pero he arrancado el tutorial diciéndote que era nivel ninja y un ninja llevaría esto a otro nivel.

RE optimizar imágenes con Kraken

La verdad es que la gran mayoría de la gente se queda satisfecha en el punto anterior,  pero si podemos reducir aún más el peso de nuestras imágenes, aunque sólo sean unos KB, ¿por qué quedarnos ahí? Existen diferentes programas y librerías para dar un nuevo meneo a las imágenes y restarles aún más peso. A mi me gusta usar Kraken.io que te permite usarlo desde su web y es una auténtica pasada. Una vez creada la cuenta (típico registro rápido) sólo tienes que hacer click en “Web Interface PRO” en el menú principal y:

  1. Arrastrar tus archivos en la zona destinada para ello. 
  2. Automáticamente Kraken optimizará tus imágenes y te muestra los valores optimizados.
  3. Te permite descargar individualmente las imágenes
  4. O descargarlas todas juntitas en un ZIP.

Optimizar imágenes kraken

De nuevo te muestro los KB aligerados, está vez habiendo pasado por kraken las imágenes supuestamente optimizadas con Photoshop. Podrás ver que los de adobe sobre todo patinan con la compresión PNG.

Optimizar imágenes web con kraken

Por supuesto este pellizco al peso no es tan asombroso como el primero, pero al final si vamos quitando unos KB de aquí y de allá restaremos MB a la web en general, gracias a esto la gente navegará más fluida, invertirá menos datos para ver nuestra web y tenemos otro minipunto de SEO gracias al poco peso de la web. Aunque haya necesitado más de 1000 palabras para explicártelo, verás que en cuanto le pilles el tranquillo optimizar imágenes no te llevará más que unos pocos minutos o ni uno.

Siéntete libre de dejar un comentario o contactarme a través de contacto, para mi será un placer que me saludes o poder ayudarte 🙂

No hay comentarios


Puedes ser el primero :)



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *