Tipos de imágenes

Me sirve mucho tener presente esta tabla en el proceso de aprendizaje, la comparto por si les sirve tenerla.

GueDevz

JPG vs PNG vs GIF #infografia #infographic #design - TICs y Formación.jpg

Gonzalo Vidal

Supongo que el profe tocará luego este tema pero si no, para no tener una pag. web tan pesada con imágenes, yo suelo subir mis imágenes a imgur.com y en vez de llamarlar tipo <img src=“images/imagenGonza” >
le coloco:

<img src="https://i.imgur.com/ZLWEEG4.jpg">

Aparte otro motivo de hacer eso es si lo quieres subir a un repositorio tipo GitHub ya que las imágenes son archivos binarios y es una mala práctica subir este tipo de archivos allí.

Otra forma de hacerlo es a través de un CDN (Content Delivery Network) pero aún no llego a ese tema…

Adriana Urrego

Platzi Team

Tipos de imágenes:

Lossless (sin pérdida):

Capturan todos los datos del archivo original.
No se pierde nada del archivo original.
Puede comprimirse, pero podrá reconstruir su imagen al estado original

Lossy (con pérdida):

Se aproximan a su imagen original.
Podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de datos innecesarios.
Por consiguiente puede reducir su tamaño, lo que mejora el tiempo de carga de la página, pero pierde su calidad.

Los archivos tipo lossy son mucho más livianos que los archivos tipo lossless, por lo que son ideales para usar en sitios en donde el tamaño del archivo y la velocidad de descarga son importantes.

Rony Porraz Vargas

Azul Personalidad de Emprendedores Negocio Infografía.jpg

Railly Hugo

Por si necesitan el logo en SVG de algun lenguaje, framework o empresa relacionada al software: https://svgporn.com/
PD: No es lo que creen :v

Jose Barboza

NATHALIE GABRIELA RIVAS MARTINEZ

Cómo aporte les comparto una publicación que realicé hace un tiempo sobre los formatos de imágenes más comunes, pueden verla aquí.

Christian Juan Tambo Coaquira

Lossy y Lossless (con perdida / sin perdida). Esto depende del formato de imagen.

Lossless.- Son formatos sin pérdida, la calidad de imagen no se cambia, las imágenes suelen ser pesadas.
Lossy.- Perder la calidad, pero se mejora el tamaño y la carga en el navegador.
Las imágenes que pierden calidad llegan a ser más pequeñas pero se cargan más rápido.

Formatos:

GIF (Graphics Interchange Format): Formato de imagen sin pérdida, no se puede comprimir
PNG 8 (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores de 256, se utiliza para logotipos e iconos para la página.
PNG 24 (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores ilimitados, alta calidad, si intentamos comprimir no ayudará demasiado por la gran cantidad de colores.
JPG / JPEG Photographic Experts Group: Formato de imagen con pérdida, perdemos calidad a la hora de comprimirlas, pero llegan a ser óptimas para la carga en la página web.
SVG - Vector (Scalable Vector Graphics): Formato de imagen muy ligero sin pérdida, con svg no perdemos calidad ya que esta compuesta por vectores.

Esteban Toro Aristizabal

Hablando de PNG me acordé de este meme :v

Joel alexander

Falto mencionar webP
Es un formato de imagen reciernte desarrollado por google ,El formato les permite a los usuarios guardar una imagen en cualquier formato sin pérdidas o casi sin pérdidas.

Alejandro Picado Brenes

developers.google.com el webp es un formato que brinda compresión superior, leyendo indica:

las imágenes webp lossless son 26% más pequeñas que png.
las imágenes webp lossy son entre 25-34% más pequeñas que JPEG
ambas soportan transparencia agregando solo 22% bytes adicionales.
Algo interesante es que es soportado nativamente por varios navegadores como google chrome, firefox, edge y opera.

tomasggrdev

Un resumen en HTML :3

<!DOCTYPE html>
<!--El lang nos permite definir el lenguaje de la página para el navegador-->
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Ésta página te mostrará fotos de gatos" />
    <!--Esto mostrará una pequeña descripción a la hora de buscar la página en un navegador-->
    <meta name="robots" content="index,follow" />
    <!--Damos autorización al navegador para ser más visibles en la web -->
    <title>Frontend Platzi</title>
    <!--Muestra el titulo de nuestra página en la ventana del navegador-->
    <meta name="viewport" content="width=devide-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Tipos de imágenes</h1>
    <h2>Lossless</h2>
    <ol>
      <li>
        <details>
          <summary>Gif - Graphics Interchange Format</summary>
          <h3>Paleta</h3>
          <p>Máximo 256 colores</p>
          <h3>Uso</h3>
          <ol>
            <li>Animaciones simples</li>
            <li>Gráficos con colores planos</li>
            <br />
          </ol>
        </details>
      </li>
      <li>
        <details>
          <summary>Png8 - Portable network graphic</summary>
          <h3>Paleta</h3>
          <p>Máximo 256 colores</p>
          <h3>Uso</h3>
          <ol>
            <li>Uso de transparencia</li>
            <li>Sin animación</li>
            <li>Ideal para iconos</li>
          </ol>
        </details>
      </li>
      <li>
        <details>
          <summary>Png24 - Portable network graphic</summary>
          <h3>Paleta</h3>
          <p>Colores ilimitados</p>
          <h3>Uso</h3>
          <ol>
            <li>Similar a PNG-8</li>
            <li>Maneja imágenes fijas de más colores y transparencia</li>
          </ol>
        </details>
      </li>

      <li>
        <details>
          <summary>SVG - Scalable vector graphics</summary>
          <h3>Paleta</h3>
          <p>Colores ilimitados</p>
          <h3>Uso</h3>
          <ol>
            <li>Gráficos / logotipos para la web</li>
            <li>Retina / pantallas de alta resolución</li>
          </ol>
        </details>
      </li>
    </ol>
    <h2>Lossy</h2>
    <ol>
      <li>
        <details>
          <summary>Jpg - Joint photographic experts group</summary>
          <h3>Paleta</h3>
          <p>Millones de colores</p>
          <h3>Uso</h3>
          <ol>
            <li>Imágenes fijas</li>
            <li>Fotografía</li>
            <br />
          </ol>
        </details>
      </li>
    </ol>
  </body>
</html>

Ivan E. Batista-Ochoa

Por acá les dejo un enlace para que amplíen la información con respecto a los tipos de imágenes

Juan Ludwing-Bryam Alfaro Gonzales

Me gustaría añadir diciendo que existe otro formato de imagen que tiene lo mejor de los 3 mundos (JPG,PNG y GIF) y es tan bueno en velocidad de carga, como en tamaño de compresión. se llama WEBP, lo bueno es que actualmente es compatible con todos los navegadores, sería bueno comentar eso, ya que si tu web tiene muchas imagenes ayuda a mejorar la velocidad de carga y así mejorar el user experience.

https://www.xataka.com/basics/asi-es-webp-el-formato-que-pesa-un-64-menos-que-un-gif

Joel Dominguez Merino

Como aporte les dejo esta Web Unsplash Donde podrán encontrar imágenes para sus proyectos de practica 😄

Enrique Moreno

Falto incluir WebP que es un formato gráfico en forma de contenedor, que sustenta tanto compresión con pérdida como sin ella. Lo está desarrollando Google. Wikipedia

Alejandro Pérez Jacobo

Hola, les comparto algunas páginas de imágenes y gifs:

FlatIcon: Ahí hay una gran variedad de íconos y lo bueno es que varios de ellos te deja editarlos en la misma página para cambiarles el color
Icons8: Tambien hay mucha variedad y te genera una línea de código de html para que lo incrustes de frente en tu proyecto
Notion Icons: No tiene gran variedad y todos los íconos son el blanco y negro lo cual los hace ver más elegantes
Coolors: Una gran alternativa para generar paletas de colores, tiene una interfaz muy amigable y cuando exportas tus paletas te las manda con todos sus códigos en HEX, RGB y CMYK
Giphy: Una muy buena página para obtener gifs y tambien tiene la opción para darte la línea de codigo ya hecha para pegar en tu proyecto.

Espero les sirva.

Nestor Quiroga Suárez 🧑🏼‍🚀

Les comparto mis apuntes de la clase:
.

Esteban Daniel Espinoza Ayquipa

Israel Castro

Luego nos mandan los logos por Whatsapp y quieren que así los incluyamos en el proyecto 🤣.

Juan Esteban Gutierrez Ramirez

soy yo o este curso es simplemente genial

Mauricio Coronado

Recomiendo mucho este recurso, nos permite colocar imágenes en nuestros proyectos sin necesidad de descargarlas en nuestra carpeta local.
https://picsum.photos/

Javier Alvarez Tarazona

Sitios web para descargar imágenes:
pngtree.com
stickpng.com
pixabay.com
freepngimg.com

Pablo Perez

con esta herramienta pueden optimizar las imagenes png sin perder calidad
https://tinypng.com/

juan manuel alvarado pallares

paleta de colores:

Tomás André Peñaloza Avilés

Hola Amigos!
Les traigo un aporte de la web del Futuro 🤖😁

Existe un tercer formato de imagen que ha estado ganando popularidad desde el 2010 y para Marzo del 2021 ya tiene soporte del 93% de los web browsers a nivel mundial.
.
WebP es un formato de imagen moderno desarrollado por Google que soporta ambas compresiones Lossy y Lossless. Es aprox. 25% más ligera que JPEG o PNG, soporta animaciones y fondos con transparencia. Ayuda a los developers a contruir una web de mayor velocidad, calidad y rendimiento.
.
Acá tiene la información oficial y acá encuentran unos consejos para su uso y aplicación. Espero les sea útil!

Mateo Josué Moreira Arias

Este cuadro me pareció muy útil por la cantidad de detalles que aporta.

Juan Diego Giraldo Salazar

FFigueroa

Hola gente, les comparto estas dos herramientas prácticas para trabajar las imágenes:

Canvas
Remove Background

David Castro

Actualmente, el formato de imagen más recomendado para la web es (.webp). El cual es un formato gráfico en forma de contenedor que sustenta tanto compresión con pérdida como sin ella. Está desarrollando Google.

Enrique Orozco Gaytán

Carlos Ramos

#Clase 11 - Tipos de imágenes

¿Qué tipos de imágenes existen?

Lossy (Con pérdida).
Lossless (Sin pérdida).

¿Cuál es la razón por la qué dividimos las imágenes en Lossy y Lossless?

Por el manejo que le da cada formato a la imagen.

¿Por qué es importante que un desarrollador web aprenda sobre los diferentes tipos de imágenes que hay?

En esta área de la programación se usan muchas imágenes.
Porque debemos de saber en qué casos se debe usar un formato de imagen, para que la página cargue rápido y el usuario no tenga una mala experiencia.

¿Cuáles son las características de una imagen lossless?

Capturan todos los datos del archivo.
No perdemos nada del archivo original.
Se puede reconstruir la imagen a pesar de que esta haya sido comprimida.
Son imágenes pesadas, debido a la no pérdida de calidad.

¿Cuáles son las características de una imagen lossy?

Se aproxima a la imagen original.
Se puede reducir la cantidad de colores de la imagen y/o analizar la imagen en busca de datos innecesarios.
Podemos reducir su tamaño para mejorar el tiempo de carga de una página web, pero perdemos calidad de imagen.
Son imágenes livianas por lo que son útiles a la hora de implementarlas en proyectos web en los que la velocidad de carga es importante.

¿Qué formatos de imágenes lossless existen?

GIF.
PNG 8.
PNG 24.
SVG.

¿Qué significan las siglas GIF?

Graphics interchange Format.

¿Cuáles son las características de una imagen GIF?

Tienen un máximo de 256 colores
Son animaciones simples.
Son gráficos con colores planos.
No se pueden comprimir.

¿Qué significan las siglas PNG?

Portable Network Graphics.

¿Cuáles son las características de una imagen PNG 8?

Tienen un máximo de 256 colores.
Tienen transparencia.
No tienen animación.
Son ideales para iconos y logotipos.
No se gana mucho si la comprimimos.

¿Cuál es la forma que tienen los elementos en la web?

Cuadrados.

¿Cuáles son las características de una imagen PNG 24?

Tiene colores ilimitados.
Tiene transparencia.
No se gana mucho si la comprimimos.
Es más pesado que un GIF y un PNG 8.
Comúnmente es usado en imágenes fijas.

¿Qué significan las siglas SVG?

Scalable Vector Graphics.

¿Cuáles son las características de una imagen SVG?

Tiene colores ilimitados.
Usado para gráficos/logotipos para la web
Especializado para pantallas de retina y de alta resolución.
Se pueden crear en Photoshop e Illustrator.
Es un formato ligero.
Podemos escalar su tamaño debido al algoritmo matemático.

¿Qué formato lossy podemos usar en la web?

JPG/JPEG.

¿Qué significan las siglas JPG?

Photographics Expert Group.

¿Cuáles son las características de una imagen JPG?

Tiene millones de colores
Si la comprimimos perdemos calidad de imagen
Usado comúnmente en fotografía.
Su peso es poco lo cual la hace óptima para la web.

Ikal

Nadie:
Google imagenes:

juan manuel alvarado pallares

Pachas Jenifer

Angel Fernando Quiroz Campos

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

En la práctica sólo solemos usar PNG, JPG y SVG

Aunque existe una amplia lista de tipos y formatos soportados por los navegadores.

user_deleted_1572741

📌 Las etiquetas multimedia permiten insertar imagen, video y sonido en HTML.

user_deleted_4356145

Hay dos tipos de imágenes, las que se les pierde la calidad y a las que no.

Lossless: No pierden calidad, pero en general son más pesadas
- GIF
- PNG-8
- SVG - Vector/Lossless
Lossy: pierden calidad pero cargan más rápido en el navegador
- JPG
- JPEG

Iván Alejandro Carrasco Rito

les comparto una pagina para que descarguen gratis imagenes de calidad para sus proyectos web https://unsplash.com/

javier nicolas nieto

juan manuel alvarado pallares

Adrian Gutierrez Ramirez

Que buena explicación, de los cursos que he visto en Platzi es de los pocos que se toma el tiempo de hacer este comparativo y explicación, buenos conceptos los de Lossy y Lossless

Juan Carlos Ortiz Romero

La Solución: Redimensionar las Imágenes para su uso en Páginas Web. Como norma general, en DespachoTres aconsejamos a nuestros clientes la utilización de imágenes de hasta 1000 píxeles de ancho y que tengan un peso inferior a 100Kb. … Todas ellas tienen una resolución de 1000 x 750 píxeles y un tamaño de 100kb.

Juan Carlos Ortiz Romero

En términos generales, el peso ideal de tus fotografías está por debajo de los 200KB. Cómo conseguirlo: Redimensiona tus fotografías a un máximo 2048px de ancho (o 1024px). Comprime la imagen, conservando un 60-80% de calidad.

Ramon Rodriguez Solar

Se pronuncia GIF o GIF ? 🤔

Anthony González (@ThonnyGeek)

Comparto mis notas para quienes les puedan servir 😉

Ivan Ezequiel Mazzalay

Tipos de Imágenes

Loosy y Lossless

Tenemos dos tipos de Imágenes según el tipo de formato de imágenes se utilizan. Estas según su tamaño tendrán impacto en el tiempo de carga de las páginas web que se estén desarrollando pudiendo generar malas experiencias de usuario, por lo tanto es un factor muy importante a tener en cuenta.
- Loosy: Es un formato de imágenes con pérdidas, la imagen resultante se aproxima a la imagen real. Para lograr la reducción del tamaño de la imagen se puede reducir la cantidad de colores o se puede eliminar redundancia. Esta reducción de tamaño genera un disminución del tiempo de carga las páginas web.
  
  Dentro de este tipo de imágenes tenemos el formato JPG/JPEG. Se utiliza con las fotografías y se utilizan en desarrollo web cuando no se trabaja ni con íconos ni con logotipos.
- Losseless: Capturan todos los datos de un archivo original, foto u obra de arte, de ahí el término sin pérdidas. El archivo aún puede estar comprimido, pero todos los formatos sin pérdida podrán reconstruir la imagen al estado original.
  
  Dentro de los formatos Lossless tenemos:
  1. GIF (Graphic Interchange Format): Son imágenes que ocupan 256 colores.
  2. PNG-8 (Portable Network Graphics): Es un formato de 256 colores con trasparencias. Se utilizan generalmente para generar iconos y logotipos. Se utilizan siempre que necesitemos una imagen que tenga una transparencia.
  3. PNG-24: Tiene mucha cantidad de colores que la PNG-8 pero también utiliza transparencias. Se utiliza cuando se desea trabajar con imágenes para modificar el fondo.
  4. SGV-Vector (Scalable Vector Graphics): Formato de imagen de tipo vector. Se utilizan generalmente para generar logotipos que se van a escalar en distintos formatos. Generalmente se utilizan para pantallas Retina que utilizan mucha mayor cantidad de pixeles. Si se agranda la imagen nunca se verán los píxeles ya que un algoritmo matemático se encarga de escalarla.
En resumen:

table_for_diferent_images-42fdf349-a492-4ff5-afbd-1f437c804e4a.jpg.png

Alfonso Neil Jimenez Casallas

hace 4 meses

esta es tal vez una de las clases más importantes del curso

Juan Orejuela

![](https://static.platzi.com/media/user_upload/image-334b41c2-5675-4727-9627-7cacb604ad31.jpg)

Brandon Arley Santiesteban Pabón

![](https://static.platzi.com/media/user_upload/image-51a80dfb-768d-4b6e-a4fa-84a89d86d776.jpg) Estuvo dificil el quiz...

Shakira Derteano

Les comparto este video donde puedes optimizar para web cualquier imagen para web. Es la mejor forma de hacerlo y tú decides cuánto debe pesar las imágenes: <https://www.youtube.com/watch?v=07jX5vl9MOw>

DANIELA PARDIÑAZ

con un link que te lleva a tomar la decisión de la mejor latita

Lista del super - Google Chrome 13_07_2023 03_56_47 p. m..png

Lista del super - Google Chrome 13_07_2023 03_56_54 p. m..png

Ricardo Cuauro

Les recomiendo mucho la web lenguajehtml.com de Manz. Tiene muy buena documentación sobre este lenguaje y todo explicado de una manera sencilla y dinámica.

Screenshot

Juan Felipe Angarita Lopez

Jorge Francisco Vuelvas Lomeli

Tipos de imágenes

Lossy vs Lossless

Imágenes con pérdida o sin pérdida
Esto depende de cómo el formato maneja las imágenes

Lossless

No se pierde la calidad de la imagen
Suelen ser pesadas

Lossy

Mejora el tamaño de la imagen
Menos pesadas
Cargan más rápido en el navegador

Las que tienen pérdida son más pequeñas que las que no tienen pérdida

Formatos:

GIF-Lossless
PNG 8 - Lossless (logotipos o íconos)
PNG 24 - Lossless (uso de color ilimitado)
JPG/JPEG - Lossy (Son imágenes enormes)
SVG-Vector - Lossless (Pantallas de retina no se pixelea)

Marwan El Ouarti Mellado

<img scr=“CHAD./GIGA_CHAD.jpeg”

Lucas Aldana

Acostumbro a emplear vectores. Muuuy versátiles

María Alejandra Paz Arce

Photoshop no es para manejar vectores :p

Alexander Josueph Mendoza Rodriguez

Tipos de imagenes

¿Que tipo de imagenes existen?
¿Que formato necesito según el uso?

Existen dos tipos de clasificaciones para las imagenes

Lossy: Con perdedida de datos
Lossless: Sin perdida de datos

Se busca el formato según la sección especifica que estemos desarrollando.

Lossless

Se carácterizan por:

Sin perdida
No pierde calidad
Se pueden comprimir sin perder calidad

Lossy

Son:

Pierden calidad
Mejora tiempo de carga en el navegador

Por lo general los archivos con pérdida son mucho más pequeños que los archivos sin perdida, lo que nos hace ideales para usar en la linea donde el tamaño del archivo y la velocidad son vitales.

Formatos de imagen

GIF → Lossles → Carga lenta
PNG-8 → Lossless → 256 Colores
PNG-24 → Lossless → Infinitos colores
JPG/JPEG → Lossy → Carga rápida
SVG → Lossless → Vector → Ligero

Esteban Casallas

siempre me encontraba eso del png -# y no tenia idea de q trataba, q gran aporte el de este curso !

Karen Andrea Gomez Gutierrez

https://www.pexels.com/es-es/

Les recomiendo este sitio para descargar imágenes profesionales de alta calidad para sus paginas web, (tiene opción de que tamaño la deseas descargar) siempre la uso, espero les sirva.

Arelys Viloria

Me gusta que este curso tenga apuntes, todos los cursos deberían ser así

Abidan Triguero Calle

RESUMEN CLASE 11:
TIPOS DE IMAGENES

I.- LOSSLESS (sin pérdida)

Capturan todos los datos del archivo original.
No se pierde nada del archivo original.

II.- LOSSY (con pérdida)

Se aproximan a su imagen original.
Podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de datos innecesarios.
Por consiguiente puede reducir su tamaño, lo que mejora el tiempo de carga de la página, pero pierde su calidad.
Los archivos tipo lossy son mucho más livianos que los archivos tipo lossless, por lo que son ideales para usar en sitios en donde el tamaño del archivo y la velocidad de descarga son importantes.

Clase11 Imagen1_tablaDiferenciaImagenes.png

German Andres Perez

Les dejo mis notas utilizando lo aprendido hasta ahora.

Mucho éxito a todos!

Yeremy Bonilla

Consejo: Cuando busque imaganes para editar y usar en sus paginas web, Utilicen las que no tengas derechos de autor, para practicar, les dejo unas pagina:

Pixabay:

Pexels:

Luis Hernandez

Hola people vengo hacerles una recomendaciones de dos paginas super buenas que utilizo para el diseño

La primera

Fernando Emilio Díaz López

En mi opinion, prefiero usar png o formatos lossless, valoro mas que una imagen tarde 1 segundo mas en cargar, que ver una imagen pixeleada o poco nitida

En mis proyectos seguramente usare imagenes lossless

Anggi Vanesa Pallares Solis

Alex hernandez mitre

WebP es un formato de archivo de imagen de Google que proporciona compresión con pérdida de información (como JPEG) y transparencia (como PNG), pero puede ofrecer mejor compresión que estos otros dos formatos. Las imágenes WebP con pérdidas se admiten en Android 4.0 (nivel de API 14) y versiones posteriores, mientras que las imágenes WebP transparentes y sin pérdidas se admiten en Android 4.3 (nivel de API 18) y versiones posteriores.

Jhonny Lincol Quispe Navarro

Yo uso esta pagina para las imágenes, se los recomiendo
el peso de estos es mínimo.
https://pixabay.com/es/

Y si quieren comprimarlas aun mas, esta esta pagina
https://tinypng.com/

Juan Camilo Jiménez Bernal

Les dejo una súper web para descargar imágenes de alta calidad sin derechos de autor. banco de imagenes

Ikal

TE FALTO EL FORMATO WEBP,
es un formato lossless pero ocupa muy poco en comparación del resto de formatos lossless!!!
Es un archivo nuevo de google:

Esta imagen era un webp pero tuve convertirla a png para poder subirla, pero mira la diferencia de tamaños:

Santiago Valencia Valencia

siempre me preguntaba por que cuando subía imágenes a el estado, a Facebook se veía con menos calidad, creo que con esta información todo queda claro jeje

Sebastian Ignacio Infante Contreras

Tipos de imágenes

Lossless: Imágenes sin pérdida
Lossy: Imágenes con pérdida.
Lossless: No pierden calidad, son pesadas.
- GIF (Graphics Interchange Format). Animado. 256 colores
- PNG8 (Portable Network Graphics). Logos y transparencia. 256 colores
- PNG 24 (Portable Network Graphics). Logos y transparencia. Colores ilimitados
- Vector / Lossles
  -SVG (Scalable Vector Graphics). Muy ligero. Queda mejor en pantallas de retina. Son vectores.
Lossy: Pierde calidad, pero cargan más rápido en el navegador.
- JPG/JPEG (Photographic Experts Group) Optimo para la web, ya que pesan poco.

José Alberto Ramírez Quiroz

Imágenes para el sito web (Lossy vs Lossless – Con perdida / Sin perdida)
La importancia de el formato de la imagen

Lossles – Sin perdida
Este tipo de formato mantiene todo el contenido de datos del archivo original
Lossy – Con perdida
Son imágenes que permiten sacrificar la imagen para obtener un archivo con la menor cantidad de datos posibles es decir una compresión que permite la aceleración en la carga de nuestro sitio web

Sebastian Vizcarra

Notas
Etiquetas multimedia
Si tiene un subtítulo

Lossy vs Lossless
(Con pérdida / Sin pérdida)

Existen dos tipos de imágenes, sin pérdida o con pérdida, y esto depende de cómo el formato maneja las imágenes.

El formato de imagen que utilicemos va determinar si es con pérdida o sin ella.
Esto es importante ya que utilizamos muchas imágenes en el desarrollo web, si utilizamos imágenes muy pesadas (que quiere decir que no tienen mucha pérdida) nuestra página va ir muy lento y le daremos muy mala experiencia a los usuarios.

Lossles
(Sin pérdida)

Los formatos de imagen sin pérdida capturan todos los datos de un archivo original. No se pierde nada del archivo original, foto o obra de arte, de ahí el término “sin pérdida”. El archivo aún puede estar comprimido, pero todos los formatos sin pérdida podrán reconstruir su imagen a su estado original.

Lossy
(Con pérdida)

Los formatos de imagen con pérdida se aproximan a su imagen original. Por ejemplo, una imagen con pérdida podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de datos innecesarios. Estos reducirá el tamaño del archivo, aunque pueden reducir la calidad de su imagen.

Por lo general, los archivos con pérdida son mucho más pequeños que los archivos sin pérdida, lo que los hace ideales para usar en línea donde el tamaño del archivo y la velocidad de descarga son vitales.

¿Qué formatos existen?

Gif - Lossless
(Graphics Interchange Format)

PNG 8 - Lossless (256 colores)
(Portable Network Graphics)

PNG 24 - Lossless (más de 265 colores y más pesado que los otros dos)

JPG/JPEG - Lossy = Formato para fotografía
(Photographic Experts Group)

SVG - Vector/Lossless
(Scalable Vector Graphics)
Este formato es uno muy ligero que crea logotipos que están hechos para escalar, se utilizan más para pantallas de retina que multiplica los pixeles de retina por mucho y la imagen crece pero no pierde la calidad. Nunca se encuentrar los pixeles de color.

Juan Daniel Diaz Jaramillo

Tipos de Imágenes

Lossy vs Lossless: Con pérdida / Sin pérdida

Existen dos tipos de imágenes, sin pérdida o con pérdida, y esto depende de cómo el formato maneja las imágenes.
Lossless: los formatos de imagen “sin pérdida” capturan todos los datos de su archivo original. No se pierde nada del archivo original, foto o obra de arte, de ahí el término “sin pérdida”. El archivo aún puede estar comprimido, pero todos los formatos sin pérdida podrán reconstruir su imagen a su estado original.
Lossy: los formatos de imagen con pérdida se aproximan a su imagen original. Por ejemplo, una imagen con pérdida podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de datos innecesarios. Esto reducirá el tamaño del archivo, aunque pueden reducir la calidad de su imagen. Por lo general, los archivos con pérdida son mucho más pequeños de los archivos sin pérdida, lo que les hace ideales para usar en línea donde el tamaño del archivo y la velocidad de descarga son vitales.
GIF-Lossless: Max. 256 colores : Animaciones simples, gráficos con colores planos
PNG 8-Lossless: Max 256 colores: Uso de transparencia, sin animación, ideal para íconos.
PNG 24-Lossless: Colores ilimitados: Similiar a PNG 8, maneja imágenes fijas de más colores y transparencia.
JPG/JPEG -Lossy: millones de colores: imágenes fijas, fotografía.
SVG - Vector-Lossless: Colores ilimitados: gráficos/logotipos para web, retina/pantallas de alta resolución.

Pedro Moreno

Les recomiendo esta página para descargar imágenes y videos libres para sus proyectos, pueden descargar en diferentes resoluciones: Pexels

Carmen Álvarez M.

Excelente, desconocía esta información respecto a los Png

Pablo Aquino

Imágenes Lossless, sin perdida, capturan todos los datos el archivo original, no perdemos calidad, pero la carga de imágenes es más lenta.
Imágenes Lossy, con perdida, perdemos un poco la calidad de la imagen, pero mejoramos la velocidad de carga de las imágenes.
GIF (Graphic Interchange Format) Lossless
PNG 8(Portable Network Graphic), Lossless, paleta de 256 colores, iconos, logotipos.
PNG 24(Portable Network Graphic), Lossless, paleta de +256 fotografías.
JPG, JPEG (Photographic Experts Group) Lossy, fotografías.
SVG (Scalable Graphics Vector) Vector Lossless, Iconos y logotipos muy ligeros. ideal cuando se va usar distintos tipo de pantallas.

juan manuel alvarado pallares

Resultado de imagen para lossy vs lossless
El término lossless hace referencia a la compresión sin pérdida, mientras que lossy significa compresión con pérdida. Ambas técnicas se utilizan para reducir el tamaño de los ficheros, pero como es obvio, se consigue una mayor compresión (un menor tamaño de fichero) en las compresiones lossy

Lubin Leonardo Rodríguez Montaño

¡Hola!

Quiero compartirles que he visto que en muchísimos sitios web están utilizando un formato denominado WebP, (que, aun cuando no está en el video, me parecería importante que lo conozcamos 😄 )
**Aquí **anexo información de este formato (Estándar de Google, para optimización de tamaño)

Anfernee Valera

Estos son mis apuntes, espero a alguien les apoye.
Modulo imágenes

Tipos de imágenes: las imágenes se clasifican en dos tipos:

Lossless(sin pérdida):Estas imágenes a pesar de estar optimizadas son imágenes que su formato no permite que pierdan información y por ende tienen mejor calidad pero pesan más. Ejemplo de formato:
Gif(Grafical interchange formar)posee una gama de colores de 256 colores y no se pueden perder más información de su formato.

PNG(Portable Network Graphics): Son imágenes con una gama de colores de y transparencia, ésta permite que su contenedor caja, pueda volverse transparente y solo verse la imagen del producto.
PNG 8, es el formato donde su gama de colores llega hasta 256 colores.
Png 24. Tiene una gama de colores ilimitados haciéndolo que pese más.

SVG - Vector(Scalable Vector Graphics): Formato usado para logotipos y pantallas de alta resolución que se volverán escalables, se puede hacer más grande y gracias a un algoritmo matemático los píxeles se reubicaran y mantendrán la composición.

Lossy(con perdida): son imágenes que pueden perder información innecesario o reducir su calidad en colores para así reducir el tamaño de su archivo y ser adaptable a algún entorno. Ejemplo de formato:
JPG/JPEG(Photographic experts group): Formato perfecto para fotografías, su gama de colores es ilimitada,pero al momento de comprimirla pierde calidad e información y esto puede hacer que se vea mas pixelada.

Jhanpiere Montes

Les dejo un link donde hablan del formato llamado Webp 💚

Óscar Andrés Ugarte De La Fuente

Lossles:
-GIF
-PNG 8, 256 colores. Usado usualmente para logos. Tiene transparente
-PNG 24, mas de 256 colores

Lossy:
JPG, usado para fotografía
SVG (formato vector), muy ligero para generar iconos o logotipos hechos para escalar. Tiene un algoritmo matemático que se encarga de crecer la imagen y relocalizar los pixeles. Con un svg nunca perdemos calidad

Todo esto lo anote antes de ver la imagen de al final, una disculpa jajajaj

diegoad29

Les comparto un programa gratuito para trabajar con imagenes svg.
https://inkscape.org/es/

Adriana Marcela Rivas Celipura

hace 12 días

al principio me costó ir entendiendo pero basta con pausar, leer e ir repitiendo la clase para encontrar el cendero en medio del bosque, jeje, muchas gracias!

JHON FREDDY TAVERA BLANDON

hace 3 meses

**Según el Contenido Visual** **Fotografías:** Imágenes capturadas con cámaras digitales o dispositivos móviles. Usualmente en formato **JPEG** o **PNG**. **Ilustraciones Vectoriales:** Dibujos creados con herramientas como Adobe Illustrator o Inkscape. Escalables sin pérdida de calidad. Formato común: **SVG**. **Gráficos y Diagramas:** Gráficos de barras, líneas, tortas, etc. Formatos: **PNG**, **SVG**, **JPEG**. **Imágenes con Transparencia:** Logotipos o imágenes con fondos transparentes. Formato común: **PNG** o **SVG**. **Imágenes Animadas:** Secuencias de fotogramas para crear movimiento. Formato común: **GIF** o **WEBP**. **Texturas y Patrones:** Diseños repetitivos usados como fondos o en 3D. Formatos: **JPEG**, **PNG**, **WEBP**. **Imágenes para Impresión:** Alta resolución, ideales para material impreso. Formatos: **TIFF**, **BMP**, **PDF**. **Miniaturas (Thumbnails):** Versiones pequeñas de imágenes para vistas previas. Formatos: **JPEG**, **PNG**.

Alfonso Neil Jimenez Casallas

hace 4 meses

les comparto una referencia a la codificación Huffman, muy utilizada en compresión de datos y de imágenes <https://es.wikipedia.org/wiki/Codificaci%C3%B3n_Huffman>

Roberto Guzmán

hace 5 meses

Esta tabla les puede ayudar un poco en el proceso ![](https://static.platzi.com/media/user_upload/image-e64d9c9e-9629-486a-9a65-fb89307bc6f6.jpg)

Luis Ángel Morales Hernández

hace 6 meses

Para mejorar el flujo de trabajo entre desarrolladores y diseñadores en cuanto al uso de diferentes tipos de imágenes, es crucial establecer buenas prácticas de comunicación y elección de formatos, así como optimizar los procesos de colaboración. 1. Definir qué tipos de imágenes se usarán para cada propósito ayuda a estandarizar el trabajo y a evitar errores. 2. Optimizar las imágenes mejora el rendimiento de la página web.

Eduardo Guzmán

hace 10 meses

Una característica de los SVG es que se pueden editar :)

César Nehomar Laya Trujillo

Muy detallado este curso

excelentes formatos

Juan Felipe Angarita Lopez

lo logre

Juan Felipe Angarita Lopez

PNG (Portable Network Graphics):

Ventajas: Admite transparencia, lo que significa que puede tener áreas transparentes en la imagen. Es adecuado para imágenes con texto, gráficos y elementos con bordes nítidos.
Desventajas: Los archivos PNG pueden ser más grandes que los JPEG, especialmente para imágenes complejas.

Juan Camilo Salazar Hernandez

Brajan Velasquez Sarmiento

Formatos:

Lossless
Formato de imágenes sin perdida, esto quiere decir que la calidad es completa en toda su resolución

Lossy
Imágenes con perdida de calidad, se usa mucho, ya que a simple vista no se nota la diferencia cuando hablamos de portadas, iconos.

Lossless FORMATOS
GIF: Gama de 256 Colores
PNG 8: Gama de 256 Colores / Fondos transparentes
PNG 24. Gama de superiores colores mas de 256, fondos realistas y mayores colores.
SVG-VECTOR: formato con poco peso pero con buena calidad, nunca se pierde calidad. - gama de colores ilimitada

Lossy
JPG/JPEG: Gama de colores ilimitada
(Si se renderiza da menos peso, pero con cautela y calidad porque pierde calidad.)

Para recordar: cada proyecto web tiene sus imagenes, es nuestro debes como futuros diseñadores web, ver que calidad de imagen debemos de usar, ejemplo no pondremos en un carrusel de imagenes imagenes png-24, o en un icono un png-24 de 1080p

Juan Felipe Angarita Lopez