Me sirve mucho tener presente esta tabla en el proceso de aprendizaje, la comparto por si les sirve tenerla.
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Tipos de imágenes
11/55Recursos
Aportes 228
Preguntas 23
Ordenar por:
Les recomiendo 2 páginas muy útiles para conseguir imágenes de muy buena calidad, en diferentes formatos.
.
Para Iconos: FlatIcon
Ahí van a encontrar miles de iconos de muy buena calidad y de lo que sea que busquen, siendo estos, gratuitos de uso. Además de que se pueden descargar en png, con diferentes resoluciones, o directamente en svg. También puedes editar los iconos directamente.
.
Para imágenes: Freepik
Aquí hay, tanto iconos, como ilustraciones completas, de mucha calidad, que se pueden descargar en png o psd. Igualmente son de uso libre.
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…
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.
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
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.
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í.
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.
De acuerdo a la compresión, Lossless / Lossy:
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>
Como aporte les dejo esta Web Unsplash Donde podrán encontrar imágenes para sus proyectos de practica 😄
Luego nos mandan los logos por Whatsapp y quieren que así los incluyamos en el proyecto 🤣.
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
Hablando de PNG me acordé de este meme :v
Este cuadro me pareció muy útil por la cantidad de detalles que aporta.
paleta de colores:
Les comparto mis apuntes de la clase:
.
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.
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.
📌 Las etiquetas multimedia permiten insertar imagen, video y sonido en HTML.
Recomiendo mucho este recurso, nos permite colocar imágenes en nuestros proyectos sin necesidad de descargarlas en nuestra carpeta local.
https://picsum.photos/
con esta herramienta pueden optimizar las imagenes png sin perder calidad
https://tinypng.com/
Se pronuncia GIF o GIF ? 🤔
Comparto mis notas para quienes les puedan servir 😉
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:
- GIF (Graphic Interchange Format): Son imágenes que ocupan 256 colores.
- 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.
- 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.
- 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:
-
Hola gente, les comparto estas dos herramientas prácticas para trabajar las imágenes:
Sitios web para descargar imágenes:
pngtree.com
stickpng.com
pixabay.com
freepngimg.com
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.
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
Les dejo una súper web para descargar imágenes de alta calidad sin derechos de autor. banco de imagenes
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:
Nadie:
Google imagenes:
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
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.
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!
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
soy yo o este curso es simplemente genial
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
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.
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.
Les recomiendo esta página para descargar imágenes y videos libres para sus proyectos, pueden descargar en diferentes resoluciones: Pexels
Excelente, desconocía esta información respecto a los Png
- 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.
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
¡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)
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.
Les dejo un link donde hablan del formato llamado Webp 💚
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
Les comparto un programa gratuito para trabajar con imagenes svg.
https://inkscape.org/es/
Tipos de imágenes
-
Lossy vs Lossless
Depende del formato que utilizemos -
Lossless
El formato no hace que perdamos la calidad de la imagen
Suelen ser pesadas
Gif (Graphics Interchange Format)
Png (Portable Network Graphics) -
Lossy
Se pierde la calidad
Mejor tiempo de carga
Jpg (Photoraphc Experts Group)
Svg (Scalable Vector Graphics)
Tipos de Imágenes:
-Lossy : Pierden calidad, son más pequeñas:
Jpg: Photographics Experts Grup
Svg: Scalable Vector Graphics, no se pixelea
-Lossless: Capturan todos los datos de su archivo original. No pierden calidad:
Gif: Graphics Interchange Format
Png 8: Portable Network Graphics
Png 24: Más colores
Tabla de imágenes para la web
Esta muy bueno hablar de todos estos temas
en pocos cursos de HTML enseñan este tema de imágenes
Lossy compression
Lossy compression or irreversible compression is the class of data encoding methods that uses inexact approximations and partial data discarding to represent the content. These techniques are used to reduce data size for storing, handling, and transmitting content.
- JPEG: It is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable trade-off between storage size and image quality.
https://en.wikipedia.org/wiki/Lossy_compression
Lossless compression
Lossless compression is a class of data compression algorithms that allows the original data to be perfectly reconstructed from the compressed data.
- GIF: The format supports up to 8 bits per pixel for each image, allowing a single image to reference its own palette of up to 256 different colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of up to 256 colors for each frame.
- PNG: It supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without an alpha channel for transparency), and full-color non-palette-based RGB or RGBA images.
- SVG: Scalable Vector Graphics is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation.
Etiquetas multimedia
Existen dos formatos para las imágenes
Lossy vs Lossless
Con pérdida / Sin pérdida
Existen dos tipos de imágenes , sin pérdida o con pérdida, esto depende de como el formato maneja las imágenes.
- El formato de imagen determinará si es una imagen con pérdida o sin pérdida.
- Si utilizamos imágenes muy pesadas, con menos pérdida, nuestra página web se va a abrir mas lento.
Lossless
Sin pérdida
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.
- No se pierde la calidad de la imagen, será grande y con la misma calidad
- Estas imágenes suelen ser pesadas
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ía el tamaño del archivo, aunque pueden reducir la calidad de su imagen.
Formatos
GIF - Lossless
- Suelen ser no tan pesadas debido a que manejan una gama de 256 colores
PNG 8 - Lossless
- El formato PNG 8 tiene un uso de colores de 256, casi siempre se utiliza para tener logotipos o iconos que puedan utilizar un transparente.
PNG 24 - Lossless
- Uso de colores ilimitado, mas de 256
JPG / JPEG - Lossy
- Formato para fotografía
- Maneja una gama de colores ilimitada
SVG - VECTOR / Lossless
- Es un formato muy ligero que nos puede generar iconos que estén hechos para escalar
- Este tipo de logotipos los vamos a utilizar en pantallas de retina / alta resolución.
Tipos de imagenes: lossy vs lossless.
Lossless son imágenes sin perdida de calidad, pero son imágenes pesadas.
Lossy son imágenes en las que suele bajar la calidad pero por lo mismo son menos pesadas y cargan más rápido en el navegador.
Siempre es mejor elegir imágenes que pueden perder calidad ya que el navegador las carga más rápido haciendo mejor la experiencia para el usuario.
Las imágenes gif son Lossless, estas imágenes ya no se pueden comprimir más.
Las imágenes PNG 8 es lossless, es un formato de imagen que tiene un uso de colores de 256 esa es su paleta de colores y casi siempre se usa para imágenes/iconos que puedan tener un transparente.
Los PNG son lossless.
JPG/JPEG - Lossy
Maneja una gama de colores ilimitada, estas imágenes se suelen usar en fotografía. Si comprimimos la imagen puede llegar a verse pixeleada.
SVG - Vector - Lossless
Este formato es muy ligero y nos puede ayudar a generar iconos/logotipos hechos para escalar, se usan más para pantallas de retina. Si hacemos grande una imágen SVG nunca vamos a encontrar los pixeles.
Los tipos de imágenes hay que tenerlos muy en cuenta, debido a que esto puede afectar el tiempo de carga de nuestra página web, y por lo tanto afectar la experiencia a los usuarios. Los tipos de imágenes se clasifican en Lossless (sin pérdida de calidad) y Lossy (con pérdida de calidad). Las tipo Lossless (como las de los formatos GIF, PNG 8, PNG 24 y SVG) no tienen perdida de calidad y por lo tanto suelen ser pesadas. Las tipo Lossy (como las de formato JPG/JPEG) son imágenes que poseen perdida de calidad, con un uso principalmente enfocado en la fotografía debido a que poseen una paleta con millones de colores.
*Tipos de imagenes
Lossy
Imagenes con perdida
Son imagenes de un formato que pierden la calidad de esta pero son menos pesadas y ayudan a cargar mas rapido en el navegador.
Lossless
Imahenes sin perdida
Son formatos sin perdida en la calidad de la imagen, sulen ser pesadas.
*formatos
GIF - Lossless (graphics interchange format)
Su tamano no se puede modificar
PNG 8 - Losless (Portable network graphics)
Se usa para logos con transparencia
limitado uso de colores
PNG 24 - Lossless
Uso de colores ilimitado
JPG / JPEG - Lossy
Es para fotografia escenarios con muchos colores y es mas liviano y optimo para la web.
SVG - Vector/ Lossless (Scable vector Graphics)
formato vector es muy ligero para iconos y logotivos, sus pixeles se adaptan gracias a un algoritmo que no permiten que su calidad se pierda.
JPG / JPEG
Es formato de fotografía que tiene un uso de gama de colores ilimitada.
PNG8
Tiene un formato de imagen que tiene un uso de colores de 256, esa su paleta de colores
11.-Tipos de imágenes
Lossy vs Lossless (con pérdida/sin pérdida)
Existen dos tipos de imágenes, con pérdida o sin pérdida, y esto depende de cómo el formato maneja las imágenes.
Como vamos a usar muchas imágenes cuando desarrollamos en web, si usamos imágenes muy pesadas (que no tienen mucha pérdida) nuestras páginas se abrirán muy lento dando una mala experiencia al usuario.
Por lo general, los archivos con pérdida son 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.
Lossless (sin pérdida)
Capturan todos los datos de su archivo original. No se pierde nada del archivo original, foto u 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 la imagen a su estado original. Son muy pesadas
- GIF -Graphic Interchange Format: Usan una gama de colores de 256 colores y ya no pueden tener perdida.
- PNG 8-Portable Network Graphics: Formato de imagen que tiene un uso de 256 colores, se usa para logotipos o iconos que puedan usar un transparente.
- PNG 24: Aquí hay un uso de colores ilimitado (+256). Puede haber imágenes con transparencia o sin. Es más pesado que los 2 anteriores.
- SVG Vector-Scalable Vector Graphics: Es un formato muy ligero que también puede generar iconos o logotipos hechos para escalar. Se usan más en pantallas de retina que multiplica los pixeles por mucho y la imagen crece pero no pierde calidad (no se pixelea). Si vamos a trabajar con diferentes pantallas de resoluciones es importante usar este tipo de imagen.
Lossy (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án el tamaño del archivo, aunque pueden reducir la calidad de su imagen.
- JPG/JPEG-Photographic Experts Group: Para fotografía, maneja una gama de colores ilimitada. Suelen ser enormes y al comprimirlas perdemos calidad pero pesará muy poco. Cuando vayamos a manejar más fotografías las pedimos en este formato. Solo nos encargamos de comprimirlas al tamaño ideal
Que buenos conceptos, realmente no sabía todo esto respecto a los archivos de imagen.
Dejo link de web para iconos SVG gratuitos:
https://tablericons.com/
Lossless: Imágenes sin pérdida. . Ejemplos: GIF, PNG-8 y PNG-24.
Lossy: Imágenes con pérdida. Ejemplos: JPG/JPEG
Aquí les comparto una pagina donde pueden descargar ilustraciones para sus paginas con diferentes formatos, también pueden cambiarle el color a las ilustraciones.
Link: https://undraw.co/illustrations
Muy importante esta tabla para complementar los requerimientos de archivos de imagen:
https://platzi.com/clases/2008-html-css/31084-tipos-de-imagenes/?time=544
Sería bueno aclarar que cuando se habla de JPG; es lo mismo que JPEG. JPEG es el nombre del formato, mientras que JPG es la extensión de los archivos de formato JPEG.
Wow, yo solo usaba estos distintos tipos de imagen adecuadamente viendo cual perdia mas calidad y cual no, pero no sabia que existian las clasificaciones de estos y si tenian una gama de colores limitadas o ilimitadas. Muchas gracias, aprendi algo muy valioso
Excelente!
- Lossy: Son imágenes que pierden calidad pero no son pesadas (Esto reduce el tiempo de carga en los navegadores)
- Lossless: Son imágenes sin perdida de calidad pero son pesadas. (Esto aumenta el tiempo de carga en los navegadores)
Muy bueno!
Lossless --> sin perdida, que capturan todos los datos de su archivo original, incluso cuando están comprimidos, quiere decir que siempre va a tener su máxima calidad, pero soy muy pesadas.
Algunos formatos lossless son…
- GIF.
- PNG-8
- PNG-24
- SVG --> muy liviana
Lossy --> Con perdida, se aproximan a su imagen original, cuando están comprimidos pierden calidad pero se reduce su peso.
Un formato lossy es…
- JPG - JPEG
Les dejo una web para comprimir imágenes. https://compressjpeg.com/es/
Muy útil información…!
Para descargar imágenes también pueden entrar a unsplash, se las recomiendo bastante junto con pixabay.
Hay 2 tipos de imágenes
Lossy → Con Pérdida. Son ideales para usar en linea y asi cargue más rápido nuestro navegador
- JPG - JPEG → Para Fotografía. Gama de colores ilimitada
Lossless → Sin pérdida.
- GIF → No se puede comprimir más
- PNG8 → Solo hay hasta 256 colores
- PNG24 → Hay más de 256 colores
- SVG → Formato Vector. Muy ligero. Iconos, logotipos escalables.
Resumen
- Logotipos: PNG o SVG
- Fotografías mas Visuales: JPG o GIF’s
- Fotografía que quieras quitarle un fondo: PNG 24
Super bien entendido
me sirve de mucho esa tabla de comparación de lossless gracias
Con photoshop ustedes pueden quitarle el fondo a cualquier imagen y después la guardan como png (esto se hace con la herramienta varita mágica). En cambio, con illustrator, ustedes pueden crear imágenes svg.
Pide un PNG 24, para fotografías que necesites manipular un poco.
En el formato se ocupan 256 colores, debido a que se maneja la transparencia
Para logos, está perfecto el PNG y SVG.
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...
Lossless puede llegar a ser pesada por lo general
Por el tema del peso tambien recomiendo que cuando sean ilustraciones o imagenes de origen vectorial tienen menor peso y mayor calidad en .PNG, JPG se debería usar básicamente solo para fotografías o mapas de bits.
Lossy (con perdida) vs Lossless (sin perdida)
la tabla ayuda mucho :0
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.