Formatos de Imágenes y su Uso en Desarrollo Web
Contenido del curso
Luis Alberto Ducuara Blandón
Me sirve mucho tener presente esta tabla en el proceso de aprendizaje, la comparto por si les sirve tenerla.
DANIEL SUAREZ
Muy buen aporte gracias :)
Esteban Casallas
q gran aporte, justo para la galería de cosas importantes !
Marianna Guedez
Jimmy Buriticá Londoño
Muy buena infografía.
David Solorzano
Gran aporte
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...
Jesus Velasco
Muchas gracias por los consejos no tenia idea!
Jesus Velasco
Lo haces a mano o hay alguna forma de hacer mediante automatizaciones?
Adriana Urrego
Team PlatziTipos 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.
sergio chambi
Gracias por tu gran aporte luz
Andrés David Loaiza Zamudio
Gracias chicuela ✌
Rony Porraz Vargas
Edixon javier Pabon Lizcano
Esta muy bonita tu infografia.
julio fierro
buena imagen...
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
Orlando Jose Altamiranda Piñango
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 ;)
Jorge Alberto Ruiz Jaimes
:):):):):):):):):)... y yo pensando al fin una suscripcion gratuita....
Jose Luis Barboza Gonzales
!diferences
Edixon javier Pabon Lizcano
Buen ejemplo.
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
Obell Moreno
Aporte de gran calidad, gracias!!.
mandy .
Esto es instagram
Christian Juan Tambo Coaquira
Lossy y Lossless (con perdida / sin perdida). Esto depende del formato de imagen.
Formatos:
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.
Luis Felipe Patiño Contreras
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.
Esteban Casallas
si, y este formato ayuda bastante para la web !
Alejandro Picado Brenes
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.
Gustavo Ulises Frias Castañeda
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.
Oswaldo Alonzo
Te dejo un articulo interesante, que te puede ayudar a comprender el formato webp. Formato Webp
John Cardenas
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!
Oswaldo Alonzo
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..
Tomás Giovanny González Romero
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>
Ydelbys Perez Duno
uufff Super Mega gracias, me enseñaste un nuevo elemento jejejejejej
<details> y <summary> GraciasTomás Giovanny González Romero
de nada!
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
Enrique Orozco Gaytán
He estado revisando esa página y está muy completa en cuanto a HTML y CSS. Excelente aporte.
Ivan E. Batista-Ochoa
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.
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. !comparativo entre dos imagenes una de jpg y otra con webp
Nicolas Anicelle
En la descripcion de los recursos, abajo de todo la comentan!!! igual, muy buen aporte por que un el video no lo dice!!!
Joel Dominguez Merino
Como aporte les dejo esta Web Unsplash Donde podrán encontrar imágenes para sus proyectos de practica :D
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
Guillermo Díaz
¡Muy cierto! Gracias por el aporte.
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.
Oscar Gustavo Acuña Sóstenes
muchas gracias
Nestor Quiroga Suárez 🧑🏼🚀
Les comparto mis apuntes de la clase: .
Edixon javier Pabon Lizcano
Buena infografia.
