Optimizar imágenes para la web

Si bien las conexiones a internet son cada vez más veloces, o por lo menos en países más desarrollados, siempre es conveniente optimizar lo más que se pueda una imagen a la hora de subirla a la web para aumentar la velocidad de carga de la página.

Los puntos fundamentales para optimizar una imagen (léase, reducir su peso lo más posible sin perder calidad) son:

  1. Elegir el mejor formato (.JPG, .GIF, .PNG)
  2. Ajustar el tamaño de la imagen
  3. Opciones de guardado

Elegir el mejor formato

Los formatos más extendidos en internet son 3, GIF (Graphics Interchange Format), JPG (Joint Photographic Experts Group), PNG (Portable Network Graphics).

GIF

Es un formato que soporta hasta 256 colores (su principal limitación). Por este motivo, cuando tenemos una imagen que supera los 256 colores, la misma deberá adaptarse reduciendo sus colores, produciendo la consecuente pérdida de calidad.
Características:

  • Soporta 256 colores
  • Transparencias
  • Animaciones

JPG

Es un formato que intenta eliminar la información que el ojo humano no es capaz de distinguir, es por este motivo que se lo llama algoritmo de compresión con pérdida, porque justamente lo que hace es eliminar información.
Una de las Características que hacen muy flexible el JPEG es el poder ajustar el grado de compresión.
Características:

  • 24 bits color ó 8 bits (blanco y negro)
  • Grado de compresión bastante alto
  • No permite canal alfa (transparencia)
  • No permite animaciones

PNG

Es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes (al contrario que GIF). Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.
Características:

  • Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel.
  • Transparencias
  • No permite animaciones
  • Mejor calidad que GIF
  • Actualmente soportado por la gran mayoría de los navegadores

¿Cual de todos elegir?

En el caso de que tu imagen tenga pocos colores, generalmente si es texto, el formato GIF ocupará menos espacio. Por ejemplo las siguientes 2 imágenes; la primera es GIF y la segunda PNG. Ocupan 13,6KB y 22,6KB respectivamente y la calidad es muy buena en ambas, por lo que la mejor opción sería GIF ya que es más liviana.

Ahora, si tu imagen tiene degradados y transparencias, la cosa cambia a favor de PNG ya que maneja muchísimo mejor estos dos aspectos. Como prueba las siguientes tres imágenes, la primera es PNG y ocupa 48,9KB, la segunda es GIF y ocupa 24,1KB y la tercera es JPG y ocupa 23,1KB. En este caso me quedaría con JPG, pero recuerden de que si la imagen tuviese transparencia JPG quedaría afuera y la mejor opción sería PNG.



Pero si la imagen a tratar sería una fotografía, el más usado es JPG porque comprime y baja el peso de la imagen tanto como se quiera y como en una fotografía no se tienen transparencias se hace óptimo para este uso.

En resumen…

Imagen con pocos colores y animaciones: GIF
Imagen con transparencias y degradados: PNG
Fotografías: JPG

Ajustar el tamaño de la imagen

Es algo bastante simple pero que puedo hacernos ahorrar mucho peso. Primero y obvio, nunca subir una imagen de 2000 x 1000 pixeles cuando en realidad al ponerla en nuestro sitio le damos una ancho de 200 x 100 pixeles; y segundo, al publicar una imagen, lo mejor es recortar la parte más significativa de la misma y hacer un mejor uso del espacio.
Por ejemplo:

Opciones de guardado

Cuando guardamos una imagen JPG en GIMP, se nos abre un cuadro de diálogo con unas cuantas opciones.

opciones de guardado

Lo importante es tener como Calidad “85″, que baja un 30% aproximadamente de peso a la imagen y los cambios pasan desapercibidos. También tildar la opción de Progresivo que lo que hace es en el momento en que la imagen está siendo cargada la muestra completamente con mala calidad, y a medida que continua descargándola va mejorando su calidad “progresivamente”. Si esta opción estaría destildada la imagen a medida que está siendo descargada se muestra de a pedazos, pero de buena calidad, hasta finalizar su descarga.
Y por último se marcó también la opción Guardar miniatura que justamente lo que hace es guardar una miniatura para que cuando la queramos abrir, desde GIMP por ejemplo usando la opción Archivo – Abrir, se vea una pequeña miniatura de la imagen, cosa que no nos sirve a la hora de subirla a la web (esto nos ahorra unos 6 KB, que si bien nos son una gran cantidad, aporta algo).

Save for web

GIMP Plugin Guardar para el web GIMP Plugin   Optimizar las imágenes para la web

Guardar para el web, un plugin para GIMP que permite encontrar el equilibrio entre calidad y tamaño de cualquier imagen.

Simplemente trabajamos con nuestra imagen y una vez que terminamos, vamos al menú archivo y seleccionamos Guardar para el web, tras lo cual se abrirá un diálogo que nos permitirá seleccionar el formato de archivo, el suavizado, etc. Del lado derecho nos muestra una vista previa e la imagen; debajo de ésta, muestra el tamaño del archivo final, de esta forma podemos ir probando con los diferentes formatos de archivos y sus opciones.

guarda para el web interfaz GIMP Plugin   Optimizar las imágenes para la web
GIMP Plugin – Guardar para el web – Interfaz

Guardar para la web

Sitio/descargar:  registry.gimp.org/node/33

Descargar DEB (Linux): files.myopera.com/area42/files/gimp-save-for-web_0.28.4-1_i386.deb

Lisandro

Fundador de Sewebs, dedicado al área de Servicios web.

Estudiante de Ingeniería electrónica de la Universidad Nacional de Córdoba.
Publicado en diseño, internet, Manejo interno, SeWebs, software y etiquetado , , , , , , , , , , .

Un comentario