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.

TAMBIÉN TE INTERESA

GoPro-HERO11-Black-Mini

GoPro HERO11 Black Mini: características de esta pequeña gran cámara

Ya tenemos en las tiendas la nueva cámara GoPro HERO11 Black Mini. En un post anterior, dábamos a conocer los detalles de su hermana mayor y los nuevos lanzamientos de GoPro y ahora que tenemos ya la venta a esta pequeña gran joya, es menester hablar de ella por su calidad y versatilidad. Así estas

Razones para tener una web, te las explicamos

Razones para tener una página web, te las explicamos

O estás en internet o no estás. Así de fácil se puede resumir la necesidad de tener una página a nivel particular o en un negocio. Desde el punto de vista individual, es suficiente con tener perfiles activos en redes sociales, sin embargo en el caso de una empresa, la que sea, es indispensable contar

materiales-fabricación-aditiva

Más allá de las impresoras 3D: la fabricación aditiva

El elemento clave de la fabricación aditiva siempre ha sido la impresora 3D; la industria se ha construido sobre una base de diferentes tecnologías de impresión, cada una con sus propios puntos fuertes y débiles, capacidades y limitaciones, y aplicaciones más compatibles. En el último informe de IDTechEx ‘3D Printing and Additive Manufacturing 2023-2033: Technology

OPPO-Snapdragon-8-Gen-2

El chip Snapdragon 8 Gen 2 se estrenará en el próximo Find X de OPPO

OPPO ha participado en la Snapdragon Summit 2022 para presentar su colaboración con Qualcomm Technologies en materia en la tecnología Ray Tracing para dispositivos móviles. Las dos empresas, que llevan trabajando conjuntamente desde la primera fase de desarrollo del procesador de nueva generación, harán posible que los usuarios disfruten de la tecnología una ray tracing basada

e-bike-Bike-Ocasion

Black Friday: ¿buen momento para hacernos con una e-bike?

Sin duda, el Black Friday es una oportunidad para comprar muchos productos de tecnología entre los que cabría pensar en una e-bike. Este tipo de bicicletas tienen mucho componente tecnológico y han subido en ventas como la espuma desde principios de la pandemia, allá por marzo de 2020.   En este post nos sumergiremos como

reloj Haylou GST Lite

Haylou GST Lite, un reloj inteligente con un precio y rendimiento imbatibles

De todos los modelos de relojes inteligentes, encontramos uno, el Haylou GST Lite, que sorprende por su alto rendimiento, bajo precio y las muchas funciones que incorpora para nuestro día a día. Comparado con otros dispositivos similares, parece difícil encontrar uno reloj como este desde el punto de vista de su rendimiento y el precio.