Contenido del curso
Formatos de Imágenes y su Uso en Desarrollo Web
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.
Tipos de imágenes para web
Lossless (sin pérdida):
Lossy (con pérdida):
Formatos de imagen para web
Aporte creado por: Luz Urrego, Christian Tambo, Luis Ducuara
Luis Alberto Ducuara Blandón
Estudiante
DANIEL SUAREZ
Estudiante
Esteban Casallas
Estudiante
Marianna Guedez
Estudiante
Jimmy Buriticá Londoño
Estudiante
David Solorzano
Estudiante
Gonzalo Vidal
Estudiante
Jesus Velasco
EstudianteJesus Velasco
Estudiante
Adriana Urrego
Team Platzi
sergio chambi
Estudiante
Andrés David Loaiza Zamudio
Estudiante
Rony Porraz Vargas
Estudiante
Edixon javier Pabon Lizcano
Estudiante
julio fierro
Estudiante
Railly Hugo
Estudiante
Orlando Jose Altamiranda Piñango
Estudiante
Jorge Alberto Ruiz Jaimes
Estudiante
Jose Barboza
EstudianteEdixon javier Pabon Lizcano
Estudiante
NATHALIE GABRIELA RIVAS MARTINEZ
Estudiante
Obell Moreno
Estudiante
mandy .
Estudiante
Christian Juan Tambo Coaquira
Estudiante
Esteban Toro Aristizabal
Estudiante
Joel alexander
Estudiante
Luis Felipe Patiño Contreras
EstudianteEsteban Casallas
Estudiante
Alejandro Picado Brenes
Estudiante
Gustavo Ulises Frias Castañeda
Estudiante
Oswaldo Alonzo
Estudiante
John Cardenas
EstudianteOswaldo Alonzo
Estudiante
Tomás Giovanny González Romero
Estudiante
Ydelbys Perez Duno
EstudianteTomás Giovanny González Romero
Estudiante
Ivan E. Batista-Ochoa
Estudiante
Enrique Orozco Gaytán
EstudianteIvan E. Batista-Ochoa
Estudiante
Juan Ludwing-Bryam Alfaro Gonzales
Estudiante
Nicolas Anicelle
Estudiante
Joel Dominguez Merino
Estudiante
Enrique Moreno
Estudiante
Guillermo Díaz
Estudiante
Alejandro Pérez Jacobo
Estudiante
Oscar Gustavo Acuña Sóstenes
Estudiante
Nestor Quiroga Suárez 🧑🏼🚀
EstudianteEdixon javier Pabon Lizcano
EstudianteMe sirve mucho tener presente esta tabla en el proceso de aprendizaje, la comparto por si les sirve tenerla.
Muy buen aporte gracias :)
q gran aporte, justo para la galería de cosas importantes !
Muy buena infografía.
Gran aporte
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...
Muchas gracias por los consejos no tenia idea!
Lo haces a mano o hay alguna forma de hacer mediante automatizaciones?
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.
Gracias por tu gran aporte luz
Gracias chicuela ✌
Esta muy bonita tu infografia.
buena imagen...
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
Sí es lo que creo.. Un recopilatorio bastante bueno de logos de empresas en formato svg. --> Porno total.. :) Gracias, eso ahorra mucho perder tiempo buscando en Google logos de buena calidad ;)
:):):):):):):):):)... y yo pensando al fin una suscripcion gratuita....
!diferences
Buen ejemplo.
Cómo aporte les comparto una publicación que realicé hace un tiempo sobre los formatos de imágenes más comunes, pueden verla
Aporte de gran calidad, gracias!!.
Esto es instagram
Lossy y Lossless (con perdida / sin perdida). Esto depende del formato de imagen.
Formatos:
Hablando de PNG me acordé de este meme :v
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.
Tengo una lap viejita con la versión CS6 de Photoshop y no los abre. No se si en una versión más reciente funcione.
si, y este formato ayuda bastante para la web !
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.
En mi anterior trabajo, yo intente de varias formas convertir varias imágenes a formato webp pero nunca tuve éxito se veían mal, ya que como era una pagina de ecommerce queríamos lograr un funcionamiento más rápido de la página y no pesaran las muchas imágenes que subiamos.
Te dejo un articulo interesante, que te puede ayudar a comprender el formato webp. Formato Webp
Hola Valitogt
Gracias por el aporte :D, los próximos te recomiendo hacerlos en la sección de aportes y no de preguntas para que más estudiantes del curso los puedan ver
Saludos!
ho! lo siento, quisé responder a la pregunta que habían echo sobre el formato webp, sin embargo creo que me confundí de ubicación al publicarlo..
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> <h2>Tipos de imágenes</h2> <h3>Lossless</h3> <ol> <li> <details> <summary>Gif - Graphics Interchange Format</summary> <h4>Paleta</h4> <p>Máximo 256 colores</p> <h4>Uso</h4> <ol> <li>Animaciones simples</li> <li>Gráficos con colores planos</li> <br /> </ol> </details> </li> <li> <details> <summary>Png8 - Portable network graphic</summary> <h4>Paleta</h4> <p>Máximo 256 colores</p> <h4>Uso</h4> <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> <h4>Paleta</h4> <p>Colores ilimitados</p> <h4>Uso</h4> <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> <h4>Paleta</h4> <p>Colores ilimitados</p> <h4>Uso</h4> <ol> <li>Gráficos / logotipos para la web</li> <li>Retina / pantallas de alta resolución</li> </ol> </details> </li> </ol> <h3>Lossy</h3> <ol> <li> <details> <summary>Jpg - Joint photographic experts group</summary> <h4>Paleta</h4> <p>Millones de colores</p> <h4>Uso</h4> <ol> <li>Imágenes fijas</li> <li>Fotografía</li> <br /> </ol> </details> </li> </ol> </body> </html>
uufff Super Mega gracias, me enseñaste un nuevo elemento jejejejejej
<details> y <summary> Graciasde nada!
Por acá les dejo un enlace para que amplíen la información con respecto a los tipos de imágenes
He estado revisando esa página y está muy completa en cuanto a HTML y CSS. Excelente aporte.
Así es @enriqueorozcog. En realidad, no solo uno encuentra información sobre el tipo de imágenes, sino que, como tu mencionas s, es una página bastante completa en cuanto HTML y CSS. Además es bastante clara para entender conceptos.
Espero que te se útil el recurso y que los demás que pasen por acá lo puedan aprovechar.
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. !comparativo entre dos imagenes una de jpg y otra con webp
En la descripcion de los recursos, abajo de todo la comentan!!! igual, muy buen aporte por que un el video no lo dice!!!
Como aporte les dejo esta Web Unsplash Donde podrán encontrar imágenes para sus proyectos de practica :D
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
¡Muy cierto! Gracias por el aporte.
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.
muchas gracias
Les comparto mis apuntes de la clase: .
Buena infografia.
