Me sirve mucho tener presente esta tabla en el proceso de aprendizaje, la comparto por si les sirve tenerla.
Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es FullStack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Las imágenes representan una pieza fundamental al momento de mostrar contenido para web. Aquí conoceremos los principales tipos de imágenes web y sus formatos.
Aporte creado por: Luz Urrego, Christian Tambo, Luis Ducuara
Aportes 285
Preguntas 31
Me sirve mucho tener presente esta tabla en el proceso de aprendizaje, la comparto por si les sirve tenerla.
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.
Formatos:
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.
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>
De acuerdo a la compresión, Lossless / Lossy:
Como aporte les dejo esta Web Unsplash Donde podrán encontrar imágenes para sus proyectos de practica 😄
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.
Por acá les dejo un enlace para que amplíen la información con respecto a los tipos de imágenes
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
Les comparto mis apuntes de la clase:
.
Luego nos mandan los logos por Whatsapp y quieren que así los incluyamos en el proyecto 🤣.
soy yo o este curso es simplemente genial
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
paleta de colores:
Este cuadro me pareció muy útil por la cantidad de detalles que aporta.
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/
Hola gente, les comparto estas dos herramientas prácticas para trabajar las imágenes:
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!
Sitios web para descargar imágenes:
pngtree.com
stickpng.com
pixabay.com
freepngimg.com
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.
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.
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
📌 Las etiquetas multimedia permiten insertar imagen, video y sonido en HTML.
Leí el aporte de los compañeros y recopilé lo más útil
Iconos
Imagenes
Colores
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
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.
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.
Se pronuncia GIF o GIF ? 🤔
Comparto mis notas para quienes les puedan servir 😉
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:
En resumen:
Me gusta que este curso tenga apuntes, todos los cursos deberían ser así
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.
Les dejo mis notas utilizando lo aprendido hasta ahora.
Mucho éxito a todos!
Hola people vengo hacerles una recomendaciones de dos paginas super buenas que utilizo para el diseño
La primera
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
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.
les comparto una pagina para que descarguen gratis imagenes de calidad para sus proyectos web https://unsplash.com/
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/
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.
Lossy: Pierde calidad, pero cargan más rápido en el navegador.
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
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
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/
PROTIP: Recomiendo encarecidamente **comprimir **sus imagenes ya sean png o jpg al **formato webp **
(este formato reduce drasticamente el tamaño y cosecuentemente los tiempos de carga y no se pixelea)
–en internet existen varias alternativas online que realizan esta compresión de manera rápida y fácil
Acostumbro a emplear vectores. Muuuy versátiles
explicación de tipos de imágenes
JPEG
Extensión de archivo: .JPG o .JPEG
“JPEG” significa: “Joint Photographic Experts Group”.
Formato de datos de 16 bits
Puede mostrar millones de colores
Utiliza un algoritmo de compresión muy complejo
Sirve para reducir el tamaño del archivo
Deje que los detalles de la imagen se “olviden” y luego rellenar cuando se despliega
El ojo humano no ve detalle de color, así como lo hace con detalles luminosos u oscuros, por lo que algunos detalles de color pueden ser sacrificados para ahorrar espacio de archivos.
60-75% de compresión es generalmente óptimo para uso en sitio web.
Se utiliza cuando el tamaño de archivo es más importante que la calidad
Es el formato de archivo estándar de las cámaras digitales y páginas web.
Compatible en muchas plataformas (PC y Mac), y otros programas (navegadores web y editores de imágenes).
Reduce el tamaño de archivo hasta en un 15% más sin perder calidad.
Útil para las páginas web, especialmente Facebook, pues pueden cargar más rápido.
En diseño web los tamaños de archivo más pequeños significan menos espacio de almacenamiento y carga más rápida.
Mejor uso en:
Sólo imágenes fijas
Imágenes del mundo real como fotos
Colorido Complejo
El sombreado de luz y oscuridad
GIF
Extensión de archivo: .GIF
“GIF” es sinónimo de “Formato de intercambio de gráficos”
Utiliza 256 colores indexados
Utiliza tramado, un proceso en el que dos colores de píxeles se combinan para hacer uno y así reducir el número de colores necesarios.
Un color puede ser elegido para ser transparente.
Puede ser entrelazado
La carga progresiva muestra una versión de baja calidad en primer lugar y luego se añade más detalle.
Puede ser animada
Utiliza la compresión sin pérdidas
La compresión no pierde ningún dato.
Mejor uso en:
Gráficos web con pocos colores
Iconos pequeños
Animaciones
Imágenes simples
Dibujos de línea
Bordes de un color
Dibujos animados simples
PNG
Extensión de archivo: PNG
“PNG” es sinónimo de “Portable Network Graphics”
La compresión es sin pérdidas, por lo que no hay pérdida de datos.
PNG – 8
Muy similar a GIF
256 colores y 1 bit de transparencia
Los archivos PNG-8 son aún más pequeños que los archivos GIF
PNG-24
24 bits de color, similar a JPEG
Puede incluir más de 16 millones de colores
La compresión sin pérdidas significa archivos más grandes que el formato JPEG
Mejor uso en:
Imágenes Web, tales como logotipos que impliquen transparencia y decoloración.
Imágenes en el medio del proceso de edición.
Las imágenes complejas, como fotografías, si es que el tamaño del archivo no es un problema.
Información resumida de esta clase
#EstudiantesDePlatzi
Existen etiquetas para formato imagen o video, es decir, etiquetas multimedia
Tenemos 2 tipos de clasificación para las imágenes. Imágenes con perdida e imágenes sin perdida
Formatos sin perdida: En la imagen no se pierde calidad y son de mayor peso
Formato con perdida: En la imagen se pierde calidad y son de menor peso
La velocidad de carga es importante
Gif = Graphics Interchange Format, sin perdida
PNG6 = Portable Network Graphics, sin perdida
JPG/JPEG = Photographic Experts Group, con perdida
SVG = Scalable Vetor Graphics, sin perdida
Hoy he entenido muchas cosas. 😅
Cuando una imagen se ve borrosa y no es por un zoom, se dice que tiene artefactos de compresión y no que está pixelada, porque si una imagen está pixelada, quiere decir que tiene pixeles, entonces prácticamente todas las imágenes están pixelada. Lo dejo como dato curioso que a veces ayuda a iniciar platicas jaja
TIPOS DE IMÁGENES PARA WEB:
LOSSLESS (SIN PERDIDA):
Los formatos de imagen sin perdida capturan todos los datos de su archivo original.
LOSSY (CON PERDIDA)
Los archivos de tipo Lossy son mucho más livianos que los archivos de tipo Lossless, por lo que son ideales para usar en sitios en donde el tamaño del archivo y la velocidad de descarga son importante.
Se aproxima a una imagen original.
Podría reducir la cantidad de colores en su imagen.
Por consiguiente puede reducir su tamaño, lo que mejora el tiempo de carga de la página, pero pierde su calidad.
¡Wow! Súper interesante. Soy diseñadora gráfica y siempre utilicé diferentes formatos de imágenes acorde a la necesidad que deba cubrir para algún proyecto, sabiendo las diferencias básicas entre un formato y otro, pero hasta hoy es que veo a tal detalle las teorías que había detrás.
Muy buena la info para contruir una pagina web.
Gracias
Recuerdo una vez que en las primeras páginas web, se usaban mucho el formato BMP para las imágenes, pero no eran recomendables precisamente porque eran muy pesadas y eso bajaba mucho mas las conexiones de internet en aquel entonces.
Bien saber en que casos usuarlos…
AQUI LES DEJO EL CURSO EN PDF :
https://drive.google.com/file/d/1CK2z_ZWb2eti9SQcQ_pqihdZxKhHzZ8L/view?usp=sharing
El lector curioso ya sabrá por donde van los tiros:
Se trata de primero elegir el formato correcto de imagen para cada uso.
Segundo, reducir su tamaño en Kilobytes hasta el punto donde no se note ruido, pixeles o una mala calidad en la imagen comprimida.
Me sorprende el nivel de conocimientos que tienens Diego y la profundidad con la que se explican los temas muchas felicidades¡¡¡ aun que hubo un pequeño detalle que no estoy de acuerdo con la parte del svg, en los vectores no existen pixeles, son solo números que conforman coordenadas para crear formas, pero ese ya es un tema más para diseño voy encantado con las clases y con la profundidad con la que explicas los temas. Saludos¡¡
Interesante los formatos de imágenes!!!1
JPG
PNG 24
PNG 24
GIF
PNG 8
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.
Esto es importante, porque cuando usamos muchas imágenes, y si éstas son pesadas, es decir que no tienen mucha pérdida, las páginas se abrirán más lentamente y se dará una mala experiencia a los usuarios.
Dato curioso. El PNG 24, se refiere a 24bits (3 bytes). Entendiendo que cada bit numero de bit representa un color diferente, el PNG 24 tiene la posibilidad de tener (si no hice mal el calculo) 16.673.408 colores.
Para la comparacion tenemos su otro formato PNG 8, que solo tiene 256 colores.
El ojo humano puede distinguir hasta 10 millones de colores (entre tonalidades y primarios)
El promedio de vida de las personas son 2.207 millones de SEGUNDOS.
Si pasaramos los 70 años sin comer, sin dormir, sin hacer absolutamente mas nada que nombrar colores, tardariamos 132 segundos en nombrar cada uno de los colores del formato PNG 24, y tendria palabras que contengan mas de 20 letras (claro, eso si aprendemos a diferenciar cada color, porque el cambio seria tan minusculo que seria dificil de percibir hasta con maquinas especializadas)
SALUDOS!
ETIQUETAS MULTIMEDIA
TIPOS DE IMAGENES
Dependiendo del formato de las imágenes, existen 2 tipos de clasificación para las imágenes
Lossy “con perdida de calidad”
Lossless “sin perdida de calidad”
Las imágenes muy grandes, que no tienen “perdida de calidad” Lossless hacen que el sitio WEB tarde mas tiempo en abrirse y esto afecta la UX.
Lossy
Los formatos de imagen “con perdida de calidad” se aproximan a la imagen original. Por ejemplo, una imagen Lossy “con perdida de calidad” podría reducir la cantidad de colores en la imagen o analizar la imagen en búsqueda de datos innecesarios. Esto reduciría el tamaño del archivo, aunque puede reducir la calidad de la imagen.
JPG / JEPG (Join Photographic Experts Group)
SVG (Scalable Vector Graphics)
Lossless
Los formatos de imagen “sin perdida de calidad” capturan todos los datos de el archivo original. No se pierde nada del archivo original, foto o obra de arte, de ahi el termino “sin perdida de calidad”. El archivo puede aun estar comprimido, pero todos los formatos sin perdida podrían reconstruir la imagen a su estado original.
GIF (Graphics Interchance Format)
PNG 8 (Portable Network Graphics 256 Colors)
PNG 24 (Portable Network Graphics 16.000.000 Colors)
Para los que tengan interés sobre:
¿Por qué dice “Renderizar la página”?
Es el procedimiento que realiza el Motor de renderizado (Browser engine) para presentar (“dibujar” o “pintar”) la página.
SVG
SVG es un formato de Gráfico vectorial (Vector graphics) (como su nombre lo indica)
SVG usa XML, por ende, se puede modificar desde un editor de texto (o también, que es lo más común, se modifica desde un Editor de gráficos vectoriales).
Puede usar SGV Edit para crear sus propios archivos SGV para su web.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.