Diseño web responsive: Imágenes

Tipos de formatos de imagen actuales

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo estudiaremos los conceptos básicos sobre los formatos de imagen disponibles en la actualidad y que se han venido usando con mayor frecuencia hasta el momento. Cuáles son, sus características y para qué podemos usarlos.
07:45

Transcripción

(hombre) Antes de entrar en profundidad en conceptos más complejos de uso de imágenes e internet, creo que es importante que nos detengamos unos minutos para hacer un repaso rápido sobre las diferentes opciones principales que tenemos disponibles al día de hoy, en lo que se refiere a formatos de imagen. De nada vale que empecemos a hablar de imágenes adaptables o diseño responsive si no sabemos las bases que nos permiten decidir el formato en el que guardar determinada imagen y qué características ofrece cada uno de estos formatos. Lo primero es ver cuáles son los formatos más aceptados actualmente. Tenemos el formato GIF, el formato PNG de ocho bits, el formato PNG de 24 o 32 bits, formato JPEG y formato SVG. No están todos los que son, ni son todos los que están. Pero son los formatos más extendidos actualmente y con mejor soporte entre los diferentes navegadores. Podría haber incluido alguno más, pero seamos prácticos y centrémonos en lo importante. Veamos con detalle ahora cada uno de estos formatos mencionados. Empecemos, por ejemplo, con el formato GIF. Este formato ya lleva bastante tiempo entre nosotros y se usa principalmente porque soporta transparencia y soporta animación. Con esto me refiero a que una imagen en formato GIF puede presentar pixeles transparentes que dejen ver el contenido colocado por debajo de la imagen. Con animación me refiero a que el formato GIF permite contener diferentes fotogramas o frames y, de esta manera, reproducirlos de forma secuencial, dando sensación de movimiento y, por tanto, animación. Al llevar tanto tiempo entre nosotros, el formato GIF es un formato muy, muy compatible. Sin embargo, todo tiene una parte negativa. Y en este caso, la parte negativa es que ofrece una paleta de colores limitada y no es un formato vectorial. Por lo que a la hora de escalar imágenes en formato GIF, estaremos perdiendo mucha calidad. Con el formato PNG8, lo que tenemos a nuestra disposición es un formato que nos permite obtener imágenes con una transparencia de 1-bit. Es decir, podemos incluir pixeles transparentes dentro de los archivos, pero con no diferentes grados de transparencia. Es decir, o son transparentes o no lo son. Es un formato que no soporta animación, en este caso. Sí que es compatible con todos los navegadores. Lamentablemente también tenemos una paleta de colores bastante limitada. Y es un formato que tampoco ofrece contenido a nivel vectorial. Con lo que si escalamos imágenes en formato PNG8, bueno, pues también estaremos perdiendo calidad en la imagen, estaremos perdiendo nitidez. El formato PNG24 es una evolución del PNG8. Nos permite incluir transparencia alpha dentro de nuestros archivos. Y con eso me refiero a que tenemos mayor escala de transparencia dentro del archivo. Podemos tener pixeles que sean totalmente transparentes, que sean un diez por ciento transparentes, veinte por ciento transparentes, treinta. Es decir, tenemos una escala mucho más gradual de niveles de transparencia dentro de este archivo. Ofrece animación en un formato propio llamado APNG. No es que esté muy soportado este formato de animación. Y tradicionalmente, si queremos mostrar imágenes con cierto movimiento, pues se recurre más al formato GIF, pero bueno, siempre es bueno saber que tenemos la opción de poder incluir animación dentro de este tipo de ficheros. También es muy, muy compatible con todos los navegadores actuales. Lo bueno es que ofrece una paleta de millones de colores. Es decir, ofrece una paleta mucho más rica visualmente, en la que tenemos muchas más opciones a la hora de poder mostrar colores en nuestras imágenes. Y también es un formato de tipo bitmap, es decir, no es un formato vectorial. Tenemos el formato JPG, también dentro de los formatos de tipo bitmap, donde la imagen guardada se construye a partir de diferentes pixeles con diferentes valores de color, de tono, saturación, brillo, etcétera. El formato JPG no soporta transparencia, no soporta animación. Es uno de los formatos más extendidos. Con lo que ofrece compatibilidad con todos los navegadores. Y también ofrece una paleta de millones de colores. Por supuesto, al ser un formato de imagen de tipo bitmap, no es vectorial. El formato SVG soporta transparencia, soporta animación, soporta compatibilidad con todos los navegadores y es un formato vectorial, es decir, es uno de los formatos que se han introducido de manera reciente, por así decirlo, dentro de lo que es el uso en el mundo del diseño web. Y es muy empleado, bueno, pues por ejemplo, para logotipos o íconos, o imágenes sencillas que podamos construir, bueno, pues con este formato porque tiene un montón de ventajas ya que tiene transparencia, animación. Es un formato vectorial con lo que podemos escalar los contenidos. Podemos ver algunos ejemplos, simplemente abriendo el navegador, y bueno, en cualquier página web en la que entremos vamos a ver infinidad de ejemplos de imágenes en formato JPG, PNG, GIF, SVG. Yo tengo aquí algunos ejemplos. Por ejemplo, en esta cuenta que tengo creada en Dribble, lo que estamos viendo aquí, ahora mismo, es una imagen en formato GIF, porque aunque tenga una paleta limitada de colores, sí que en este caso, yo lo que necesitaba era mostrar una animación. Y bueno, dentro de todas las opciones de formatos de imagen que tenía disponibles, escogí el formato GIF. Como hemos dicho, también tenemos otros formatos, como por ejemplo, aquí estamos viendo una imagen estática en este caso. Vamos a verla completa. Aquí tengo una imagen en formato JPG. También tengo otro GIF, si no me equivoco. Y bueno, estos son formatos que no son vectoriales. Son formatos de tipo bitmap. Con lo que, si yo los escaláse dentro de Photoshop o mismamente voy a usar la opción de zoom del navegador, si me fijo, estoy perdiendo nitidez en lo que es la imagen. Si nos fijamos sobre todo en estas palabras aquí, en estas letras, estamos perdiendo nitidez porque estamos escalando la imagen. Habíamos dicho que el formato SVG es un formato vectorial, que ofrece animación, transparencia, compatibilidad con todos los navegadores. Y lo bueno de ser un formato vectorial es que, además de pesar bastante poco los archivos, podemos escalarlos sin ningún tipo de problema. Por ejemplo, estos íconos de aquí, este logo de aquí arriba, están guardados en formato SVG. Y si yo aumento el zoom. En este caso, vamos a aumentarlo. Si me fijo, no estoy perdiendo nada de calidad. No estoy perdiendo nitidez, no se están desenfocando para nada los límites de la imagen, que es lo que pasaba en el ejemplo anterior. Es un formato, bueno, pues muy utilizado, como justo decía ahora, para incluir logotipos, imágenes sencillas, iconos. Tendríamos que dejar, bueno, pues el formato JPEG y el formato PNG, pues para fotografías, imágenes en las que necesitamos un mayor uso del color. Las imágenes en formato GIF, bueno, pues si quisiéramos incluir animaciones. En cualquier caso, ya habiendo dado un repaso a los formatos más habituales de imágenes que podamos emplear dentro del diseño web, es el momento de seguir adelante.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.