Hay una serie de formatos de imagen que se pueden utilizar en las páginas web. Algunos ejemplos comunes son GIF, JPG y PNG. Los archivos SVG también se utilizan comúnmente en los sitios web hoy en día, dando a los diseñadores web otra opción más para las imágenes en línea.
Índice de contenidos
Imágenes GIF
Utilice 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 utiliza en imágenes de color plano y texto, produce tamaños de archivo muy 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 un número limitado de colores, los degradados y las fotografías terminarán con anillamiento y pixelación cuando se guardan como un archivo GIF.
En pocas palabras, usted usaría GIFs sólo para imágenes simples con sólo unos pocos colores, pero también podría usar PNGs para eso (más sobre eso en breve).
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 la imagen.
El formato JPG no es adecuado para imágenes con texto, bloques grandes 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 puede resultar en una imagen que no es tan nítida como si se hubiera guardado en otro formato.
Las imágenes JPG se utilizan mejor para fotografías e imágenes que tienen muchos, muchos colores naturales.
Imágenes PNG
El formato PNG se desarrolló en sustitución del formato GIF cuando parecía que las imágenes GIF estarían sujetas a un canon. Los gráficos PNG tienen un mejor índice de compresión que las imágenes GIF, lo que resulta en 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 son totalmente transparentes o incluso utilizar una serie de transparencias alfa. Por ejemplo, una sombra de caída utiliza una serie de efectos de transparencia y sería adecuado para un PNG (o puede que sólo nos termine usando sombras CSS en su lugar).
Las imágenes PNG, al igual que los GIF, no se adaptan bien a las fotografías. Es posible evitar el problema de anillado que afecta a las fotografías guardadas como archivos GIF usando colores verdaderos, pero esto puede resultar en imágenes muy grandes. Las imágenes PNG tampoco son bien soportadas por los teléfonos celulares más antiguos y los teléfonos con funciones.
Utilizamos PNG para cualquier archivo que requiera transparencia. También utilizamos PNG-8 para cualquier archivo que sea adecuado como GIF, utilizando en su lugar este formato PNG.
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 utilizan vectores para crear archivos muy pequeños que se pueden renderizar a cualquier tamaño sin pérdida de calidad ni aumento del tamaño del archivo. Están creados para ilustraciones como iconos e incluso logotipos.
Preparación de imágenes para la entrega en la Web
Independientemente del formato de imagen que utilice, y de que su sitio web utilice una serie de formatos diferentes en todas sus páginas, debe asegurarse de que todas las imágenes de ese sitio estén preparadas para su entrega a través de la 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 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 correcto de las imágenes 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.
Original de Jennifer Kyrnin. Editado por Jeremy Girard.
