Cómo funciona el formato JPG

Existen múltiples formatos de imagen. Una imagen en su estado no comprimido se conoce como BMP (BitMap). Donde cada pixel es representado por un byte de un máximo de 256 colores. Es decir que la imagen es de 8 bits.

Con el avance de la tecnología hoy día, podemos representar imagenes de 16 bits > 2 bytes = 65,536 colores por pixel. O más, como 24 o 32 bits.

Una imagen BMP de 800x600 a 1 byte por pixel pesaría 480,000 bytes > 468.75KB!

Por esto existen los métodos de compresión de imagen, entre ellos JPG, donde gracias a un algoritmo se agrupan los colores por secciones de un mismo color o similares. Mientras mayor sea la compresión, mayor la cantidad de artefactos.

Los artefactos son representaciones inexactas de los archivos, ya que la información fué adulterada.

Una imagen puede ser comprimida, es decir, puede ser representada inexactamente y el ojo humano puede no notarlo. Pero un método de compresión no funcionaría para, por ejemplo el código en Js o un archivo ejecutable.

En algunos archivos cada bit de información debe ser exacto.

Imagen en .jpg

|

|

Imagen en .BMP (2 bytes por pixel)

|

Amo que las matemáticas estén en todos lados

Exportando BMP pesó 3,484,854 bytes
Exportando JPEG pesó 107,541 bytes
Exportando PNG pesó 552,669 bytes

Fui discipulo de Da Vinci, por las dudas. ✌✨

Portable Network Graphics (PNG) (siglas en inglés de Gráficos de Red Portátiles, pronunciadas “ping”) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.

https://es.wikipedia.org/wiki/Portable_Network_Graphics

1 Byte el número máximo que puede representar es 256, por ende solo tengo 256 colores, si quiero representar colores de 16 bits necesito 2 Bytes y si quiero representar colores ultra reales necesito 32 bits (4 Bytes

los JPG se utilizan con frecuencia para imágenes que son realistas y que se ven bien aunque el tamaño del archivo sea muy bajo; los GIF, que tanto se usan hoy en día, muestran imágenes animadas; los PNG, por su parte, tienen la habilidad de mantener la calidad al máximo siempre y soportan transparencias.

Los formatos de imágenes puede separarse en 2 categorías grandes: lossy y lossless -que son formatos comprimidos-, y losformatos no comprimidos. Estos últimos suelen tener la mayor cantidad de data y son bastante pesados, pero son la representación exacta de la imagen. El formato de imagen BMP es un tipo de formato de este tipo aunque también pueden haber BMP comprimidos.
Lossy vs. Lossless
Los formatos de imagen Lossy (algoritmo de compresión con pérdida) se usan con el objetivo de representar la información utilizando la menor cantidad de la misma, no representa los datos de manera exacta pero disminuye el tamaño de los mismos. Por lo que este algoritmo es ideal para guardar imágenes fotográficas que de otra manera ocuparían mucho espacio:JPGE (Joint Photographic Experts Group) es un claro ejemplo de imágenes “lossy”.
El formato JPGE usualmente no es el adecuado para ilustraciones, dibujos o texto, porque la compresión de la imagen suele generar artefactos. En estos casos la mejor alternativa es el uso de PNG (Portable Network Graphics), un formatoLossless (algoritmo de compresión sin pérdida). Este tipo de compresión al igual que el lossy buscar representar cierta cantidad de información ocupando un espacio menor, pero reconstruyendo los datos de manera exacta a los originales. Este formato es perfecto para aquellas imágenes que no se verían bien cuando se comprimen con pérdida, por supuesto como puedes imaginar este formato no es capaz de lograr una compresión tan alta como el lossy. Para concluir esta parte: Lossless significa que la imagen será más pequeña pero no a costas de perder calidad. Lossysignifica que la imagen será aún más pequeña pero con una disminución significativa de la calidad.
¿Cuál es la diferencia entre PNG, JPG y GIF?
La profundidad de color, el algoritmo de compresión y el soporte de transparencia.
PNG para todo
JPG sólo para almacenar un fichero final (usa compresión destructiva)
GIF sólo para web o cosas con poco color, como un logo

Encontre muy intersante este tema tanto que busque a detalle como se realizaba el algoritmo y encontre este video donde se explica a detalle como se realiza usando fundamentos matemáticos un poco avanzados, pero sobre todo muy buena teoria del color.
https://www.youtube.com/watch?v=Yj6a8Kefcmk&t=1s

imagen de 800px x 600px como Mapa de bit BMP
1 Byte por cada pixel
600px * 800px*
480,000 bytes
480Kb
0,48 MB

Pero como un byte son 256 bits si quisiera más colores necesitaria 2 o 3 bytes por pixel
Para representar màs

Algoritmo JPEG
crea zonas de color similar
Coordneadas cuadrados = 4 bytes = blanco
Coordenadas Asigne Gris = 4 bytes
De 1.9 MB pasa a 0,33 MB

problema de los limites
Artefacto JPG = ¿Que tanto puedo comprimir algo con algoritmos obteniendo su valor real?
Estos crean pequeños errores que el ojo humano no puede ver

PNG esta configurado para nunca perder calidad

Aplicación:

• Usar formato de archivos segun mis necesidades comprendiendo antes la logica y el algoritmo de cada tipo de extension de archivo.

Buenismo estaba esperando llegar a este tema en el curso, ahora entiendo porque las imagenes jpg pierden calidad, es un algoritmo de comprension que agrupa los colores y reduce los bytes.

Clase 25 – Cómo funciona el formato JPG

¿Qué representan cada uno de los cuadros de una imagen con formato BMP?

• Un Byte.

¿Cómo puedo saber el peso de una imagen con formato BMP?

• Multiplicando la dimensión de alto y ancho.
  Ejemplo:
  600 ancho
  800 alto
  800*600 = 480.000 Bytes o 480KB.

¿Cuántos Bytes necesito para representas colores de 16 y 32 bits?

• 16 bits = 2 Bytes.
• 32 bits = 4 Bytes.

¿De cuantos bytes sería un color de 32 bits en una imagen BMP?

• 4 Bytes.

¿Cómo funciona el formato JPG?

• Este formato lo que hace para comprimir el peso de una imagen es empezar a identificar zonas de color similar.

¿Por qué los JPG se degradan?

• Por el problema de los limites y el porcentaje de compresión que tengan la imagen.

¿Qué usa el formato JPG para saber en qué lugares de la imagen debe poner cierto color?

• Con las coordenadas.

¿Qué son los artefactos JPG?

• Es un factor de la área de la ingeniería llamada la teoría de la información y esta lo que nos ayuda es a ver que tanto podemos comprimir con operaciones matemáticas mientras podamos obtener el valor real.

¿Cuál es el problema del formato de compresión JPG?

• Que es especializado y no lo podemos usar en múltiples formatos de archivos.

¿Qué otro formatos de compresión de imágenes podemos encontrar?

• PNG

¿Con el formato PNG perdemos calidad en una imagen?

• No.

Hice el experimento en paint para ver la diferencia entre .bmp y .jpg.
Es interesante ver la forma en que el algoritmo tiene problemas de optimización en espacios reducidos.
En la foto pueden ver las diferencias entre estos dos archivos y compararlos.

Aqui les dejo un video muy interesanto sobre el tema

Cómo funciona el formato JPG
JPG es un algoritmo que crea zonas de color similar y donde este algoritmo encuentra zonas en las que los colores son los mismos simplemente repite el color esto ayuda a reducir el peso de la imagen ya que no se representa verdaderamente el color que es, sino que lo que hace es aproximar el color que identifica. JPG es un algoritmo de compresión por aproximación y en consecuencia este formato va creando una serie de errores, pero para el ojo humano no es posible detectarlo tan fácilmente.
Un artefacto JPG es lo que sucede cuando se comprime una imagen y se suele aprecias como una distorsión o una especia de desenfoque en la imagen, es decir hace que se vea mas pixelada entre mas se reduce el peso de la imagen.

Para entender a profundidad el algoritmo de compresión de JPG se requiere comprender el concepto de Transformada Discreta de Coseno.

La idea básica es “descomponer” en funciones cosenoidales de distinta creciente para almacenar sólo los coeficientes asignando mayor resolución a los que corresponden a frecuencias más altas.

Aclaro que la princesa en la imagen de Freddy es la princesa Leia por lo que veo en un crucero imperial !!

“Matemáticas hijo!!” Lease con voz de claudio xD

Este algoritmo explica las diferencias entre extensiones:

Nunca pense que se podria aplicar el limite al agrupamiento de colores. Muy buena explicacion!

Interesante como adobe photoshop encapsula información de mapa de bits, con vectores, material en tipografía y ahora es capaz de “pintar” videos.

Cómo funciona el formato jpg:
En un mapa de bits, cada uno de los pixeles es un byte: una imagen de 600*800 pesaría 480000 bytes. o 840 kb, en una imagen así (Donde cada pixel es un byte) solo tedriamos acceso a 256 colores, si queremos aumetar la cantidad de colores necesitamos asignar más memoria a cada pixel.
Entre más memoria, más peso.

Supongamos una imagen de 600*800 con 4 bytes por pixel.
Peso total: muy grande

Jpg: Busca zonas donde los colores se repita y los agrupa para solo guardar las zonas donde deben ser repetidos. Sin embargo, si las imagenes cuentan con muchos detalles, el algoritmo tendrá problemas para agrupar zonas lo que lo hará menos eficiente.
Peso total: Significativamente menor.

BMP cada pixel es un byte
Entre mas colores mas bytes por pixel
JPG agrupa zonas de color similar
Artefactos sistemas de compresión por aproximación
PNG

Ahora empiezo a entender como funcionan ciertos algoritmos de compresión. es increíble como aprendes.

Seria correcto pensar que el .jpg funciona como el .zip pero de manera natural? se comprime automáticamente de forma digital para asi poder reducir la imagen

dato curioso: la transformacion directa de los 480,000 Bytes a 480kB es incorrecta ya que 1kB es igual a 1024 Bytes. este es un error muy comun que suele pasar a todos jajajaja

Formato de imagen JPEG / JPG.
Formato de imagen .gif.
Formato de imagen PNG.
Formato de imagen .tiff / .tif.
Formato de imagen RAW.
Formato de imagen BMP.
Formato de archivo de imagen .psd.

Ah con que de ahi viene que la nes era de 8 bits la super nintendo era de 16 bits y la play station 1 era de 32 bits.

Gracias Freddy!

Freddy utilizas tus lentes para distraernos? XD

Matemáticas discretas aplicadas a procesamiento digital de imágenes.

Para aquellos que quieran comprender un poco mas lo que dijo Freddy en este video, pueden mirar estos complementos que encontre en YT, los cuales creo que ayudan bastante a comprender los conceptos.

Primer Video
Vegundo Video

Saludos!

Qué es mejor, ¿JPEG o BMP? -En inglés

El formato JPG, comprime las imagenes, utilizando coordenadas para áreas del mismo color, minimizando el uso de bytes. A diferencia de otros formatos como BMP, que pueden llegar a utilizar hasta 4 bytes por pixel para representar más colores y detalles, JPG, menora el peso de las imágenes en KB.

Princess Leia no bulto, lo ma duro de RD

Miren la foto del mont blanc de 365 gigapixels
https://www.in2white.com/

O sea lo que denominamos pixelacion de una foto es la constante aplicación de este algoritmo de compresión.

¿Hay algún premio por ver a Freddy en 1.5x?

increible!

¿Cómo se puede reconocer que una extensión corresponde a un formato de compresión?

las imagenes de la nasa pesan mas de lo que mi laptop puede almacenar jajajaja !!!

Esto si es magia! 🤣

Entendí esa referencia. 0:16

Que JPG es un algoritmo!!!

¿qué área es la encargada de hacer los cálculos de estas ecuaciones para las compresiones de las imágenes?

Empieza a complicarse el tema

La princesa Leia merece una mejor resolución, ajajaja.

entiendo los algoritmos de comprensión 😄

La princesa es leia de star wars

jpg lo que hace es aproximar áreas de color, si un color esta en áreas continuas solo se declara la zona y el color de esa zona, de esta forma se pueden tener imágenes que pesan mucho menos.

Entonces un .mp4 debe hacer lo mismo, agrupa cada cuadro, o un .mp3 por ejemplo estas son formas básicas de usar cada archivo para que ocupe menos espacio sea más eficiente para usar pero comprometiendo la calidad

Aprender y aprender con referencias de la cultura geek 😃

Existe alguna forma de reproducir videos de curso directo de smart tv samsung?.
Porque quiero ver curso desde este dispositivo y el video se queda pegado, no camina.

uuuuuu me intriga el algoritmo png

Se emplea la misma logica de comprime textos, es decir se crean “tablas de frecuencias” de areas de colores similares para reducir cantidad de bits utilizados para guardar la informacion

No sabía que existía el formato BMP. Pero que sencillo se hace con JPG.

He aquí una aplicación útil de los límites!

Nunca vi tal uso a los límites, interesanet

Muy interesante como los formatos de imagenes las comprimen, y de las diferentes formas y tecnicas que se utilizan para hacer que las imagenes pesen poco sin peeder mucha calidad.

No tenia ni idea que .JPG hiciera eso!!!

Una cámara no captura imágenes en un principio en un formato JPG? Es después de capturar la imagen que se comprime en dicho formato?

😮

Interesante pensar en .JPG como un sistema de compresión!

Nunca habría imaginado que la compresión en JPG es “irreversible”, contrario a la de PNG, y tampoco que el algoritmo de PNG estuviera relacionado con el de ZIP.

Wow, recuerdo que de pequeño en el colegio leí mapa de bits y creí que así se guardaban todas las imágenes. Luego veía JPG y me preguntaba por qué? no son lo mismo ? Esta clase lleno ese gran vacío que me olvidé que tenía

.

El formato BMP es un mapa en que cada cuadrito de la imagen es 1 byte, jpg es un algoritmo que crea agrupaciones de color, entre más compleja es una foto más va a pesar Hay algoritmos de compreción como PNG que estan diseñados para nunca perder calidad.

Gracias por la clase…

El formato JPG es un tipo de archivo de imagen que utiliza técnicas de compresión para reducir el tamaño del archivo. La compresión se realiza eliminando información redundante y simplificando la imagen. Esto hace que el archivo sea más fácil de almacenar y compartir en línea. Sin embargo, la compresión también puede afectar la calidad de la imagen, especialmente si se comprime demasiado. En general, el formato JPG es adecuado para fotografías y otras imágenes complejas con muchos detalles y tonos de color.

Para tener una calidad de 32 bit la imagen debe pesar casi 1.9 MB, así que podemos comprimir las imágenes y usar formatos como jpeg.

JPEG es un algoritmo que lo que hace es identificar coordenadas para agrupar áreas de color. De esta manera minimiza la utilización de bytes y logra que la imagen tenga un peso mucho menor

Hoy día veo que casi todo es PNG.

Esta compresión tiene que ver con cual es la forma optima de envíar información.
Pero primero ¿Qué es información?
En la teoría de la información de Shannon se entiende la información de un mensaje como el número de distinciones que tengo que hacer para identificar un mensaje (si les interesa cómo se puede conectar este concepto de información con la información en física, biología y psicología ¡Síganme!)

En el primer calculo que hace Freddy está utilizando la forma menos óptima de transmitir la información y por lo tanto la forma que te exige más distinciones, es decir pasa pixel por pixel preguntando ¿Qué color tiene este pixel?

Lo que hace el algoritmo es buscar que pixeles tienen colores parecidos, para agruparlos y de esa forma lo que antes podía tomarme 10 distinciones, ahora solo necesita 1 ¿De qué color es este grupo de pixeles?

Si se fijan, es posible reducir el número de distinciones sin necesariamente perder información, puesto que habrá pixeles que tienen el mismo color. Sin embargo para una mayor compresión es necesario tomar como mismo color a pixeles que tengan colores muy parecidos ¡Así ya no tenemos que distinguir entre ellos!

Seria conveniente que tambien mencionaran los mapas de bits y eps

Que extraño saludo esta haciendo esa princesa xd.

Ahora entiendo porque Platzi, te pide disminuir el tamaño de tu foto de perfil.

Los diferentes tipos de archivo de imagen, tienen diferentes pesos y diferente calidad, dependiendo de su formato. Asumamos que tenemos una foto de 600*800, si esto estuviera en un formato sin compresión como el formato .bmp pesaría 840KB (solo representando un color por pixel).

1 Bit representa como número máximo es el 256: Por lo tanto, en un .bmp tiene 256 colores y para determinar su tamaño se debe multiplicar el ancho por el alto de la imagen.

Para representar colores de 16 bits: Se necesitan 2 bytes.
Para representar colores (ultra-reales) de 32 bits: Se necesitan 4 bytes.

Nota: Sí, cada bite tiene 8 bits, entonces; 16 bits es igual a 2 bytes y 32 bits es igual a 4 bytes.

Para tener una calidad de 32 bit la imagen debe pesar casi 1.9 MB, así que podemos comprimir las imágenes y usar formatos como jpeg.

JPEG es un algoritmo que lo que hace es identificar coordenadas para agrupar áreas de color. De esta manera minimiza la utilización de bytes y logra que la imagen tenga un peso mucho menor

.

Interesante saber que JPG y el resto de formatos de imagen, son métodos de compresión de las misma y que cada método comprime las imágenes de acuerdo a algoritmos que segmentan la imagen, en varias coordenadas, haciendo que una imagen pese menos.

Muy claro la explicación de los archivos jpg.

Gracias MIMETYPE!

Muchas gracias a la comunidad que siempre comparte cosas muy interesantes para leer.

JPEG: Es un algoritmo que asigna coordenadas para asignar diferentes colores sin utilizar bytes , minimizando el uso de bytes.
Para saber el numero de Bytes en una imagen ejemplo, de 600 de ancho por 800 de alto se debe multiplicar 600x800 = 480, 000 bytes. donde cada pixel de la imagen es un bit, donde cada bit puede tener un numero maximo de 256.
los formatos mas utilizados en imagenes son el jpg y el png, el png es especial porque la imagen puede desminuir su tamano y no perder su calidad.

Debo confesar que me siento algo perdido con los kilo bytes 😦

Estoy impresionado que dependiendo de los formatos de las imagenes estan tengan una alta definicion, en caso de los jpg estas las veo un poco limitados. En cambio las png parecen ser las mejores debido a su resolucion.

En este video se explica mejor de una manera matematica https://youtu.be/_OF3LKJkYC8

Excelente!

FORMATO BMP
.
En un archivo de imagen en formato sin compresión BMP cada una de las posiciones es un Byte

width = X
height = y
ColorsBits = z

weight = (x * y) * z 

• Colores de 8 Bits = 1 Byte
• Colores de 16 Bits = 2 Bytes
• Colores de 32 Bits = 4 Bytes
  .

Lo que implica que las imágenes sean mucho mas pesadas.
.
FORMATO JPG
.
JPG es un algoritmo que crea zonas de color similar las identifica por medio de coordenadas.
.
Cuando las imágenes JPG se comprimen y pierden calidad esos elementos son conocidos como artefactos JPG. Un artefacto JPG es un factor de un area de la ingeniería conocido como la teoría de la información se basa en como comprimir información con ecuaciones matemáticas mientras se puede obtener el valor real.

😎