Diseño web responsive: Imágenes

Qué es la compresión en imágenes

¡Prueba gratis durante 10 días

nuestros 1198 cursos !

Prueba gratis Mostrar modalidades de suscripción
Analizaremos en qué consiste realmente la compresión de imágenes y por qué debemos tenerla en cuenta a la hora de preparar las imágenes que usaremos en nuestros diseños digitales, teniendo en cuenta en qué formatos está presente y en cuáles no.
06:28

Transcripción

A la hora de escoger algunos de los formatos de imagen disponibles, como por ejemplo, el formato GIF, el formato PNG, o el formato JPG, nos interesa entender qué es lo que significa la compresión en imágenes y porqué es tan importante. No nos vamos a poner extensivamente técnicos, ni vamos a estudiar algoritmos extraños, vamos simplemente a ver el concepto de manera sencilla. Lo primero que tenemos que entender es que las imágenes ocupan gran parte del porcentaje de ancho de banda de una página web, puesto que son gran parte de los elementos mostrados en la misma. Por ello, debemos ser eficientes y escoger bien el formato en que guardamos nuestras imágenes para poder controlar el peso del archivo y optimizarlo de la mejor forma posible. Pero no es por gusto, sino porque nuestras imágenes necesitan pesar poco. Si pesan poco, la web cargará con mayor velocidad y por tanto, estaremos mejorando evidentemente la experiencia de los usuarios que visiten nuestra página. Piensa además en los usuarios que accedan desde dispositivos móviles o con conexiones de mala calidad. Si la web tarda mucho en cargar, bye bye. A grandes rasgos nos encontramos dos tipos principales de compresión, la compresión lossy o con pérdida, es aquella en la que perdemos de manera permanente información de la imagen y con información me refiero principalmente a pixels que es de lo que se compone una imagen JPG al fin y al cabo. Cuanto mayor sea la compresión, mayor va a ser la pérdida de información. Este tipo de compresión es la ampliada en archivos como por ejemplo el formato JPG. Vamos a verlo en Photoshop que es lo que tengo abierto. Tengo una fotografía y lo que voy a hacer es dirigirme a Archivo Exportar y voy a Guardar para Web. Tengo aquí el cuadro de diálogo de Guardar para Web, Tengo el formato JPG escogido y lo que voy a hacer es un poco de zum para ver mejor el detalle. Si nos fijamos tenemos diferentes opciones para modificar la calidad de guardado del archivo, y recordemos que estamos hablando de que el formato JPEG o JPG es un formato que incluye compresión lossy, es decir, una pérdida de información a nivel permanente. Esto ¿qué quiere decir? Si por ejemplo, yo guardo la imagen a una calidad alta, muy alta, baja o mediana, por un lado, primero lo que voy a hacer es perder información a nivel de pixel. Si nos fijamos acaba de bajar mucho la calidad, vamos a ponerla en máxima para ver la diferencia nuevamente. Aquí tenemos cómo sería la imagen con el granulado propio de la fotografía original, pero si lo ponemos a calidad súper baja bueno, pues estamos viendo cómo aparecen artefactos visuales. Lo que ocurriría si yo guardo esta imagen con calidad baja, con calidad mediana, con calidad alta, realmente en el formato JPG, incluso con la calidad máxima, si volviese a abrir esa imagen y la volviese a guardar en JPG, si la guardase, la volviese a abrir, la volviese a guardar, es decir, si estuviese abriendo y guardando de manera continua, de manera secuencial esa imagen, finalmente tendría una imagen que no se parece en nada a la imagen original, y esto es así por la pérdida de información permanente que incluye la compresión lossy incluida dentro del formato JPG. Yo habitualmente, si queréis un consejo, aunque depende del tamaño de la imagen, lo que me fijo es mucho en el peso del archivo porque lo tenemos justo aquí abajo, en la zona inferior izquierda, en función de la calidad con la que guardemos la imagen, bueno, pues el archivo va a pesar más o menos. Yo suelo jugar con una calidad entre el 75 y 85, pero como ya digo, influye mucho también el lugar donde se va a mostrar la imagen. El segundo tipo de compresión, es la compresión "sin pérdida" o compresión lossless. La información es comprimida mediante algoritmos también que se fijan en el número de colores empleados en la imagen, que es lo que básicamente definirá el peso del archivo. Este tipo de compresión la podemos encontrar en formatos como el SVG, PNG, GIF y tengo que añadir un obstante que la compresión funciona de manera ligeramente diferente a los archivos SVG porque son un formato de archivo vectorial donde no se guarda la información a nivel de cada uno de los pixeles que compone la imagen, sino que, bueno, se guarda la información de manera completamente diferente y optimizada. Debemos tener en cuenta que el uso de este tipo de compresión, con este tipo de fichero, como por ejemplo el formato GIF, bueno, pues podemos decidir cuántos colores tiene la imagen en que vamos a guardar, y como el peso del archivo vendrá definido por ellos, bueno, pues a menor número de colores menor peso del archivo. Lo podemos mostrar también nuevamente dirigiéndonos a Photoshop, aprovechando que tengo el cuadro de diálogo abierto, lo que voy a hacer es modificar el formato el formato de archivo en el que quiero guardar y poder escoger por ejemplo: GIF. Si nos fijamos ya está cambiando el aspecto de la imagen y esto es así porque recordemos que el formato GIF tenía una paleta de colores limitada, lo mismo ocurría con el formato PNG8. Aquí tenemos la tabla de colores que nosotros tenemos disponibles. Recordemos que tanto PNG8 como GIF pues nos permitía guardar imágenes con una paleta de color hasta 256 colores diferentes. Lo bueno es que estos formatos, como decía anteriormente, podemos escoger el número de colores y por tanto incidir directamente en el peso del archivo. Evidentemente lo que tenemos que hacer es buscar un equilibrio entre el acabado visual y el peso del archivo. De nada sirve que guardemos una imagen con dos o con cuatro colores si la imagen pierde totalmente su sentido. En el fondo, de lo que se trata es entender qué te ofrece cada formato, manejar correctamente el programa de diseño con que estemos habituados a trabajar y saber las posibilidades de guardado y exportación que tenemos a nuestra disposición, ya sea en formatos con compresión o sin ella.

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.
 
Formadores:
Fecha de publicación:25/10/2016
Duración:1:54 horas (24 Videos)

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.