Diseño web responsive: Imágenes

Exportación y optimización de archivos PNG y GIF

¡Prueba gratis durante 10 días

nuestros 1246 cursos !

Prueba gratis Mostrar modalidades de suscripción
Descubriremos cuáles son las opciones más habituales a la hora de trabajar con archivos de imagen en formato bitmap cuando queremos exportarlos usando los formatos PNG y GIF, siendo los más comunes para trabajar con imágenes en web.
06:32

Transcripción

(H|ombre) Vamos a ver ahora cuales serían las opciones más comunes de exportación y optimización de archivos en formato bitmap. Como pueden ser los archivos en formato GIF y en formato PNG. Recordemos además que dentro de las opciones de la exportación en formato PNG, bueno, pues teníamos algunas opciones disponibles. Estoy usando photoshop, evidentemente, cada programa tendrá opciones más o menos similares, pueden ser un poquito diferentes donde estén ubicadas pero bueno grandes rasgos las opciones que vamos a ver aquí, deberían ser fácilmente exportables por así decirlo, dentro de otros programas diferentes que no fuesen photoshop. Actualmente a la hora de trabajar con este tipo de ficheros, bueno pues podemos hacerlo por ejemplo desde el cuadro de diálogo de archivo, guardar como, y aquí tenemos una serie de opciones, aquí tenemos, por ejemplo, el formato JPEG, el formato PNG, aunque no recomiendo usar este cuadro de diálogo para guardar este tipo de ficheros. Tenemos la opción de exportar, exportar como, que es uno de los últimos añadidos dentro de photoshop, el cuadro de diálogo de exportar como, que nos va a permitir además exportar múltiples imágenes a partir de una misma fuente, es decir, yo puedo añadir aquí diferentes opciones para poder exportar los archivos pero voy a centrarme en este caso dentro del formato, tengo la opción de exportarlo en formato GIF. Si me fijo, vamos a ver aquí la sombra que tenía originalmente, vemos este alo blanco alrededor y es que recordemos que el formato GIF es un formato limitado con una paleta de 256 colores y la transparencia que ofrece es muy limitada, no tenemos la capacidad de ofrecer diferentes grados de transparencia con tanto nivel de detalle como el que podríamos tener con un formato de PNG32. El formato PNG32 realmente es el formato que nosotros entendemos como 24 dentro de photoshop, pero se le añade un canal extra de 8 bits para poder tener todos esos valores de transparencia. Si nos fijamos, he escogido ahora el formato PNG, y a la hora de guardar el archivo me tengo que fijar en el tamaño, en formato GIF me ocuparía 42,3 KB. Selecciono el formato PNG, el tamaño es mucho mayor pero evidentemente estoy manteniendo de una manera mucho más fiel la transparencia que tenía, en este caso, en este objeto, con lo cual a mi no me valdría de nada guardar esta imagen en formato GIF, salvo que el fondo donde se fuese a colocar esta imagen fuese blanco, en ese caso no pasaría nada. Pero bueno, el formato PNG yo creo que es mucho más interesante en este caso, aunque evidentemente pese más. Tengo la opción de marcar la opción de archivo más pequeño de 8 bits que lo que consigue es optimizar el archivo PNG para que pese lo mínimo posible, en este caso del original que pesaba 97,3 KB, puedo pasar a un archivo de 35,5 KB que pesa incluso menos que el archivo GIF inicial. Tengo que fijarme, no obstante a la hora de guardar en estos formatos en los colores que tenga la imagen. En este caso como estamos jugando con una imagen de colores sólidos, de colores planos, bueno pues no estoy teniendo pérdida de información, pero si guardase, por ejemplo, una imagen con degradados o con más contenido a nivel de color probablemente tendría que fijarme en eso, no ser que vaya a tener pérdidas o diferencias muy grandes de color. Además del diálogo de exportar como, habrá otros programas en los que, bueno pues quizá nos encontremos cosas más parecidas como el cuadro que teníamos anteriormente en otras versiones de photoshop que es el de guardar para web. Aquí realmente estoy haciendo más o menos lo mismo porque de lo que se trata es de guardar la imagen y tengo, bueno pues, la opción de también escoger el formato GIF, que lo tendría aquí. Aquí podemos fijarnos que las opciones son diferentes, esto sí que es una de las cosas a la que actualmente encuentro un poco extrañas dentro de photoshop a la hora de usar el cuadro de diálogo de exportar como, y a la hora de usar el cuadro de guardar para web, bueno pues las opciones son ligeramente diferentes. En este caso para trabajar con GIFs dentro de photoshop, yo recomiendo el de guardar para web, porque nos va a dar mucho más control a la hora de poder ver la paleta de colores, de poder seleccionarlos si los queremos eliminar, si los queremos bloquear porque es un color que necesitemos, duplicarlos, etcétera, etcétera... tenemos muchísimas opciones más a la hora de poder trabajar con la paleta de color en concreto, si nos fijamos bueno, tenía la paleta de color en 8 colores, nos fijamos que hay cambios drásticos en el color que incluso en la sombra puedo ampliar hasta 256, que es la paleta máxima de colores dentro del formato GIF, aquí tendría el archivo de un peso similar al que tendría usando el cuadro de diálogo de exportar como. Y también tengo la opción de PNG8, que es la opción que tenemos dentro del formato PNG con transparencia de 1 bit, es decir, los pixeles pueden ser o transparentes o no lo son, que es éste pequeño pixel que vemos aquí transparente. O el formato PNG24, que en realidad aunque se llame PNG24 es PNG32, el 24 hace referencia a los bits de los que podemos incluir información en este caso y bueno pues añaden 8 más para lo que comentaba anteriormente en lo que se refiere a transparencia dentro del documento. Todo dependerá como ya digo del programa con el que estemos trabajando pero bueno, por norma habitual usaremos para estas imágenes en las que necesitemos transparencia de buena calidad, pues, el archivo PNG24 ya sea aquí o desde el otro cuadro de diálogo que eso ya dependerá del programa. GIF lo podemos usar, bueno pues, para casos más concretos o donde necesitemos algún tipo de animación y JPEG bueno pues, donde no necesitemos ningún tipo de transparencia o contenido, por ejemplo, a nivel fotográfico, usaríamos JPEG, dejaríamos las opciones que por defecto aparecen y podríamos escoger el grado de calidad que equivaldría al grado de compresión que queremos incluir dentro de la imagen.

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.