Formatos de Imágenes para web - HTML5 básico - Capítulo 11 - Final


Último capítulo del curso básico html en el que aprenderás los diferentes formatos de imágenes para web. Si quieres seguir aprendiendo, puedes continuar con el curso de html5 avanzado.

Imágenes GIF

Este formato de imagen para la web se hizo muy popular a principios de los años 90. Al llegar el nuevo milenio flash le quitó gran parte de esa popularidad y pasó a ganar terreno (flash no es un formato de imagen).

Este formato de imagen ocupa muy poco, soporta imágenes estáticas y animaciones simples juntando unos cuantos frames y admite transparencias.

No todo son ventajas, su calidad deja bastante que desear, ya que cuenta con una pequeña paleta de hasta 256 colores, que dejan muy pocas posibilidades de color.

Aquí tienes un ejemplo, seguro que habrás visto, se siguen utilizando mucho.

internet

Imágenes JPG

Este formato de imagen para la web se utiliza principalmente para fotografías. Hay que decir, que en comparación a los gif, no hay color, ya que admite millones de colores.

Foto de una ciudad

Imágenes PNG

Este formato de imagen ocupa muy poco con gráficos. Es perfecto para todos los elementos del diseño web, ya que la mayoría, ocupan menos que con jpg. Dónde no es tan bueno es con las fotografías, ya que tiende a generar archivos más grandes que las jpg.
Algo muy interesante de este formato es que permite hacer unas transparencias perfectas, algo que con jpg no se puede hacer y con gif no quedan tan limpias.

Portátil

Imágenes SVG

SVG viene de Scalable Vector Graphics. Este formato da un gran salto y permite hasta crear plantillas web enteras con gráficos vectoriales.
Puedes descargarte la siguiente imagen. Es svg, así que podrás editarla y mover los elementos a tu antojo con un programa como Adobe Illustrator. Hay otras alternativas, por supuesto. Pregúntame si la necesitas.

Rama de árbol con pájaros y gatos

Imágenes WEBP

Un formato de imagen bastante reciente creado por Google que se creó con la intención de juntar todas las ventajas que tienen los otros formatos de imagen.

Por el momento no está súper extendido por la web, pero démosle tiempo.

Aquí tienes algunos ejemplos: ver ejemplos.


Y hasta aquí este pequeño curso, espero que te haya gustado y que te haya servido para tener una pequeña base y poder continuar a partir de aquí.

Si quieres continuar tu formación como desarrollador/a web conmigo, solo tienes que continuar por el curso de html avanzado y despúes si te atreves, tienes los cursos de CSS, JavaScript, etc.
Si tienes dudas sobre lo que estudiar ahora, no te lo pienses dos veces y déjame un comentario.


Ejercicios de html

24- ¿Qué formato o formatos de imagen utilizarías para crear una transparencia?

25- ¿Qué formato o formatos de imagen utilizarías para crear una galería de fotografías?

26- ¿Cuál de todos los formatos que te he enseñado es el más moderno?

27- ¿Qué formato utilizarías para mostrar un logo animado en una web?

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.