Posted by on Mar 6, 2013 in Blog, Tutoriales | 0 comments

colores Existen muchísimos formatos de todo tipo para los archivos gráficos. Pero sólo unos pocos suelen ser compatibles con los navegadores. Ahora comentaré los formatos más estándarizados y que menos problemas dan para ser vistos en páginas HTML. A saber:

 

 

  1. .jpg
  2. .gif
  3. .png
  4. .svg

Cada uno de ellos tiene sus características propias y sus ventajas. Pero también tienen una serie de características comunes. Básicamente es que no son formatos pensados para editarse, por lo que no tendrán opciones de guardar capas o temas similares (aunque se pueden editar, claro está), se comportan muy bien a baja resolución sobre todo, y ocupan poca información porque normalmente tienen compresión de serie, por lo que su tamaño disminuye enormemente.

 

JPG (Joint Photographic Experts Group)

El rey de reyes de los formatos de imagen. Sustituyó al bitmaps y otros por su gran compresión. Es un formato de imagen que da muy buenos resultados en imágenes de baja y media resolución y unos aceptables resultados en alta calidad. Se suele usar para casi todo tipo de imágenes aunque no sean para web, sobre todo a nivel doméstico. Pero ahora veremos que tiene unas características especiales que lo hacen ideal para visualizarlo en un navegador.

Fue el primer formato en usar compresión de serie. Esto hace que imágenes de media calidad se vean muy bien sin ocupar demasiado. Por poner un ejemplo, la imagen que uso de cabecera pesa en .jpg 35,5 KB, mientras que en .tiff (sin compresión) ocupa 148 KB.

Soporta la descargar progresiva, es decir, que en vez de descargarse de golpe (cuando vemos que una imagen grande se va formando fila a fila) lo hace en pases (primero se forma una a baja resolución, luego va mejorando hasta formarse la imagen tal como es), tantos como le configuremos. Esto era importante cuando las velocidades de conexión son bajas, para hacerse una idea de la foto sin llegar a descargarla entera. Hoy en día con las lineas de alta velocidad actuales no se suele usarse a no ser que sean imágenes realmente grandes.

 

GIF (Graphics Interchange Format)

De muy pequeño tamaño, este formato está pensado para imágenes pequeñas y con colores planos.

No acepta más de 256 colores y de hecho, si puede usa menos. Por ejemplo, si en una imagen hay 5 colores planos, el .gif estará en color indexado de 5 colores, ahorrando muchísimos datos. Pero si la imagen fuera una foto a todo color, por ejemplo, solo usaría 256 colores por lo que esta disminuiría drásticamente en calidad.

Acepta transparencia, lo que permite la imágen no sea cuadrada sino que tenga bordes distintos e incluso transparencia en su interior. Lo que no permite es degradados de transparencia. Es decir admite el transparente 100% o la opacidad 100%, pero nada intermedio.

Por último, es un formato especial por permitir movimiento. El movimiento se crea mediante varios pases a cierta velocidad de gifs estáticos. Esta función suele crear unos archivos .gif de gran peso y no es recomendable usarlo en grandes tamaños ni con muchos colores.

 

PNG-8 y PNG-24 (Portable Network Graphics)

El PNG-8 es básicamente un .gif sin posibilidad de movimiento. También usa 256 colores de máximo y permite transparencia. Se creó como una versión mejorada del .gif que acompañara a su hermano mayor de 24 bits por píxel.

PNG-24 es un .jpg dopado. Admite una calidad similar a un peso parecido, pero con la ventaja de aceptar transparencia.

El .png (el formato es el mismo independientemente de si se use el 8 o el 24) es un intento de mejorar y unificar los dos formatos aun dominantes. Cada vez se usa más y la tendencia es dejar de usar los anteriores exceptuando el .gif para el movimiento.

 

SVG (Scalable Vector Graphics)

Formato vectorial para poder ser visto en navegador. No me detendré mucho en él, vale conocer que existe y que en próximas entradas explicaré las diferencias entre las dos formas de crear una imagen digital: Mapa de bits y Vectorial.

 

Algunos consejos

¿Cuando uso cada cual? La norma es fácil:

  • ¿Tiene alta calidad? JPG o PNG-24
  • ¿Tiene solo colores planos y baja calidad? GIF o PNG-8
  • ¿Tiene alta calidad y transparencia? PNG-24
  • ¿Tiene colores planos, baja calidad y transparencia? GIF o PNG-8
  • ¿Es vectorial? SVG