Los formatos de Imágenes para web con HTML

Ú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.

Formato de imagen para la web - 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.

Formato de imagen para la web - 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 estos.

Formato de imagen para la web - 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. Donde 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. Con gif si se pueden hacer, pero no quedan tan limpias o perfectas.

Formato de imagen para la web - 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 quieres alguna otra.

Formato de imagen para la web - 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, este formato 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, 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 y varios más que irán viniendo.
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í.