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

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

excavadora

La nueva tecnología que está llegando a las máquinas de construcción

Se calcula que las máquinas de construcción generan unas 400 Mt de emisiones de CO2 al año, lo que supone alrededor del 1,1% de las emisiones mundiales de CO2 . Por tanto, la descarbonización de las máquinas móviles no de carretera será un factor importante en los esfuerzos por limitar el cambio climático global. Con

acceder-a-snapchar-web

Snapchat se estrena en la web y testea con la realidad aumentada

Snapchat ha anunciado novedades a lo largo de estos últimos días. La más mediática es que ahora la popular aplicación de mensajería variopinta también estará disponible en la web. En un principio, el servicio solo estará disponible en este canal para los suscriptores de Snapchat+ en Estados Unidos, Reino Unido, Canadá, Australia y Nueva Zelanda.

oppo-chamions-League

OPPO, una marca de Champions League

OPPO jugará la Champions League la temporada que viene y otra adicional. La marca de dispositivos ha anunciado un patrocinio muy importante que le aportará una gran visibilidad en los próximos meses. Concretamente, el acuerdo firmado con la UEFA incluye la presencia de la marca en las competiciones de la Champions, la Supercopa, las finales

nuevo-Nothing-Phone

Nothing Phone (1): llega el teléfono más rompedor de los últimos tiempos

El mercado de la telefonía necesitaba un soplo de aire fresco como el que representa Nothing Phone (1). La compañía liderada por el que fuera fundador de One Plus acaba de anunciar un nuevo smartphone que promete ser el más rompedor del momento. Los consumidores nos habíamos acostumbrado a ciertos estándares de diseño tanto en

ecommerce

¿Vendes en Amazon? Sácale todo el partido al Amazon Prime Day

Se viene el gran evento mundial del año para Amazon y, por ende, el ecommerce. Los próximos 12 y 13 de julio llegan las rebajas más exclusivas para los clientes del marketplace. El Amazon Prime Day es el momento que muchos compradores esperan para adquirir productos de todo tipo a un precio reducido. Pero más