Comprensión de los tipos de imágenes y cómo utilizarlas en los sitios web

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
Comprensión de los tipos de imágenes y cómo utilizarlas en los sitios web

Comprensión de los tipos de imágenes y cómo utilizarlas en los sitios web

VALORACIÓN DEL ARTÍCULO:
5/5


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.

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.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio