Formatos de imagen para web

Para la web existen 4 formatos de imágenes: jpg, png, gif y svg. Cada uno tiene sus caracterísitcas y ventajas propias que voy a detallar. Optimizar una imagen significa guardarla en el formato más conveniente y logrando el menor peso posible del archivo final. El peso de los archivos en la web es importantísimo ya que influye en la velocidad de descarga del sitio, una variable que puede decidir si el usuario se queda o se va.

Formato JPG:

El formato JPG es el indicado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Cuanto menos contraste de luces tenga la imagen, más compresión se logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo resulta mucho más liviano. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable (generalmente entre 40 y 60 en Photoshop). Luego se puede comprimir aún más en tinypng.com o similar.

Formato PNG:

La extensión PNG es la más usada para iconos, marcas o imágenes que necesiten fondo transparente. La transparencia de PNG a diferencia del GIF no tiene halo, logrando una calidad de imagen mucho mayor y simplificando el maquetado, permitiendo independizar las imágenes de sus fondos.

El PNG tiene dos opciones: PNG8 (con paleta de color reducida hasta 256 colores) y el PNG24 ideal para transparencias.

Las imágenes PNG también conviene comprimirlas lo más posible usando tinypng.com

Formato GIF:

El GIF comprime mejor las imágenes con plenos de color originados en dibujos vectoriales. Este formato reduce la paleta a 256 colores como máximo. En el momento de guardar una imagen como gif, los más importante es decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además pueden ser transparentes y animadas.

Los archivos GIF permiten seleccionar áreas transparentes en el momento de exportar. La imágenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen resultará con bordes duros (serruchados) o suavizados con halos de color diferente al fondo. Para esto se utiliza la opción Mate que permite seleccionar el color similar al fondo.

Actualmente este formato sólo se usa para animaciones muy simples.

Formato SVG:

Es el único formato vectorial y por lo tanto escalable para web con la enorme ventaja que eso significa para hacer un sitio adaptable. Se utiliza para logos, íconos y cualquier imagen vectorial.

El archivo SVG se puede guardar directamente desde Illustrator y el resultado es un archivo que reconoce el navegador, pero que también se puede abrir en el Sublime porque es puro código. Esto le da infinitas posibilidades de uso para web, especialmente combinado con el lenguaje javascript.

Las imágenes SVG se pueden insertar con la etiqueta img o pegando directamente el código dentro del HTML.

Carrito de compra
USD Dólar de los Estados Unidos (US)