Los ejemplos comunes de tipos de imágenes en la web incluyen GIF, JPG, y PNG. Archivos SVG. Estos diferentes formatos ofrecen a los diseñadores web varias opciones para optimizar el atractivo visual de un sitio web.
Imágenes GIF
Utilice archivos GIF para imágenes que tengan una cantidad pequeña y fija 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 tamaños de archivo pequeños.
El formato GIF no es adecuado para imágenes fotográficas o imágenes con colores degradados. Debido a que el formato GIF tiene una cantidad limitada de colores, los degradados y las fotografías terminarán con bandas y pixelación cuando se guarden como un archivo GIF.
Imágenes JPG
Utilice imágenes JPG para fotografías y otras imágenes que tengan millones de colores. Utiliza un algoritmo de compresión complejo 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.
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 la imagen se comprime, el texto, el color o las líneas pueden difuminarse, lo que da como resultado una imagen que no es tan nítida como se guardaría en otro formato.
Imágenes PNG
El formato PNG se desarrolló como un reemplazo del 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 da como resultado imágenes más pequeñas que el mismo archivo guardado como GIF. Los archivos PNG ofrecen transparencia alfa, lo que significa que puede tener áreas de sus imágenes que sean completamente transparentes o incluso usar un rango de transparencia alfa. Por ejemplo, una sombra paralela usa una variedad de efectos de transparencia y sería adecuada para un PNG (o simplemente puede terminar usando sombras CSS en su lugar).
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 móviles más antiguos y los teléfonos con funciones básicas.
Imágenes SVG
SVG son las siglas de Scalable Vector Graphic. A diferencia de los formatos basados en raster que se encuentran en JPG, GIF y PNG, estos archivos usan vectores para crear archivos muy pequeños que se pueden renderizar 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.
Preparación de imágenes para entrega web
Independientemente del formato de imagen que utilice, asegúrese de que todas las imágenes de ese sitio preparado para la entrega web. Las imágenes demasiado grandes pueden hacer que un sitio se ejecute lentamente y afectar el rendimiento general. Para combatir esto, esas imágenes deben ser optimizadas para encontrar el equilibrio entre alta calidad y el menor tamaño de archivo posible en ese nivel de calidad.
Elegir el formato de imágenes 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.