FB91 nos envía este tutorial de su web:
Los puntos fundamentales para optimizar una imagen (léase, reducir su peso lo más posible sin perder calidad) son 3:
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 pavo 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.
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).
Fuente original: FB91
Este tutorial íntegro, incluídas sus imágenes, han sido sacadas de la fuente anteriormente citada y aportadas por su autor.
1 comentario
buena información bacano y sobre todo para tener en cuenta en desarrollo web. Vale yo soy fánatico de png pero bueno tendré mas en cuenta a los otros ahora.