Hay una serie de formatos de imagen que se pueden utilizar en páginas web. Algunos ejemplos comunes son GIF, JPG y PNG. Los archivos SVG también se usan comúnmente en los sitios web hoy en día, lo que brinda a los diseñadores web otra opción para imágenes en línea.
Imágenes GIF
Use archivos GIF para imágenes que tengan un número pequeño y fijo de colores. Los archivos GIF siempre se reducen a no más de 256 colores únicos. El algoritmo de compresión para archivos GIF es menos complejo que para archivos JPG, pero cuando se usa en imágenes y texto de color plano, produce archivos de tamaño muy pequeño.
El formato GIF no es adecuado para imágenes fotográficas o imágenes con colores degradados. Debido a que el formato GIF tiene un número limitado de colores, los gradientes y las fotografías terminarán con bandas y pixelación cuando se guarden como un archivo GIF.
En pocas palabras, usaría GIF solo para imágenes simples con solo unos pocos colores, pero también podría usar PNG para eso también (más sobre esto en breve).
Imágenes JPG
Utilice imágenes JPG para fotografías y otras imágenes que tienen millones de colores. Utiliza un complejo algoritmo de compresión que le permite crear gráficos más pequeños al perder parte de la calidad de la imagen. Esto se denomina compresión "con pérdida" porque parte de la información de la imagen se pierde cuando se comprime la imagen.
El formato JPG no es adecuado para imágenes con texto, grandes bloques de color sólido y formas simples con bordes nítidos. Esto se debe a que cuando se comprime la imagen, el texto, el color o las líneas pueden aparecer borrosos, lo que resulta en una imagen que no es tan nítida como se guardaría en otro formato.
Las imágenes JPG se utilizan mejor para fotografías e imágenes que tienen muchos colores naturales.
Imágenes PNG
El formato PNG se desarrolló como un reemplazo para el formato GIF cuando parecía que las imágenes GIF estarían sujetas a una tarifa de regalías. Los gráficos PNG tienen una mejor tasa de compresión que las imágenes GIF, lo que resulta en imágenes más pequeñas que el mismo archivo guardado como un GIF. Los archivos PNG ofrecen transparencia alfa, lo que significa que puede tener áreas de sus imágenes que son totalmente transparentes o incluso que utilizan un rango de transparencia alfa. Por ejemplo, una sombra paralela utiliza un rango de efectos de transparencia y sería adecuada para un PNG (o puede que simplemente nos termine usando sombras CSS).
Las imágenes PNG, como los GIF, no se adaptan bien a las fotografías. Es posible evitar el problema de las bandas que afecta a las fotografías guardadas como archivos GIF con colores reales, pero esto puede resultar en imágenes muy grandes. Las imágenes PNG tampoco son compatibles con los teléfonos celulares más antiguos y los teléfonos con funciones.
Usamos PNG para cualquier archivo que requiera transparencia. También usamos PNG-8 para cualquier archivo que sea adecuado como GIF, utilizando este formato PNG en su lugar.
Imágenes SVG
SVG significa escalable de gráficos vectoriales. A diferencia de los formatos basados en ráster que se encuentran en JPG, GIF y PNG, estos archivos utilizan vectores para crear archivos muy pequeños que se pueden representar en cualquier tamaño sin pérdida de calidad o aumento en el tamaño del archivo. Se crean para ilustraciones como iconos e incluso logotipos.
Preparando Imágenes para Entrega Web
Independientemente del formato de imagen que utilice, y su sitio web está seguro de utilizar una cantidad de formatos diferentes en todas sus páginas, debe asegurarse de que todas las imágenes de ese sitio estén preparadas para su distribución web. Las imágenes demasiado grandes pueden hacer que un sitio se ejecute lentamente e impactar el rendimiento general. Para combatir esto, esas imágenes deben optimizarse para encontrar el equilibrio entre alta calidad y el menor tamaño de archivo posible en ese nivel de calidad.
Elegir el formato de imagen correcto es parte de la batalla, pero también asegurarse de haber preparado esos archivos es el siguiente paso en este importante proceso de entrega web.
Artículo original de Jennifer Kyrnin. Editado por Jeremy Girard.
