¿En que formato tengo que guardar las imágenes para WEB? Parte #1

Llevo ya varios años trabajando como diseñadora, pero más años todavía que estoy metida en el mundo de la comunicación visual, desde que empecé a estudiar Bellas Artes, allá en septiembre de 2005. Hay conceptos que ya se me han quedado tan grabados que a la hora de aplicarlos ya no pienso en ellos, no los razono, directamente los intuyo o hago en modo piloto automático.

Entonces cuando alguien, con toda la inocencia del mundo me dice que le envíe un logo en .jpeg para imprimirlo en gran formato, se me ponen los pelos de punta, me salen los ojos de las órbitas y me quedo 1 minuto sin capacidad de hablar. Después del shock pero viene el momento de calma y de pensamiento lógico que me hace entender que la pobre persona no tiene la culpa de hacerme esta petición tan absurda. Ella no tiene porque saber esto si lo que ha estudiado es economía, o ADE.

Aún así creo que hoy en día, todos nos movemos en internet, y tengamos la formación que tengamos, puede que en algún momento nos entren las ganas de montar un blog. Y de repente nos entran dudas existenciales que nunca pensaríamos tener:

¿Qué diferencias hay entre JPEG y PNG?

¿Porqué no puedo subir un PDF como imagen de portada?

¿Qué quiere decir eso de logo en formato vectorial?

Y seguramente un sin fin mas de preguntas parecidas, ¿verdad?

Bueno, justamente por eso he decidido empezar con una sección de preguntas diseñeriles para solucionar estas dudas y así hacerte la vida más fácil a ti que estás empezando a moverte por internet y los blogs, y de repente tienes que convertirte en un diseñador.

Hay muchos formatos para guardar, transferir y enviar imágenes. Pero me centraré en los más comunes y los dividiré en dos grupos: formatos para web y formatos para impresión. Es una división un poco simplona, porque veremos que algún formato que está en el grupo «web» también podrá imprimirse, y viceversa. Pero sirve para que los que no estén familiarizados con estos conceptos se hagan una idea general y entiendan las diferencias básicas. Como el post da para mucho, hoy solo me centraré en el primer grupo.

Formatos para web: JPEG, GIF, PNG

JPEG

El JPEG es el rey de los formatos de las imágenes digitales. Hoy en día es considerado el estándar para poder guardar, enviar y crear imágenes y fotografías. Se puede generar con cualquier cámara de foto y es compatible con todos los sistemas operativos (Mac, Windows, Linux). Es ideal para usarlo en la web ya que es un tipo de formato de compresión con pérdida. Esto quiere decir que el tipo de compresión hace que se pierda mucha información de la imagen, haciéndola así más ligera. Pero al soportar más de 16 millones de colores (24 bits) hace que en una fotografía es casi imposible de apreciar la compresión. Pero en una imagen que tenga tipografías, logos, o en general grandes manchas de color uniformes sí que se nota. Se aprecian grandes zonas píxeladas alrededor de los bordes de las tipografías. Con estos ejemplos es más fácil entender el concepto.

En esta imagen veremos la misma fotografía con 2 compresiones distintas. En la primera se ha mantenido el 100% de la información, mientras que en la segunda sólo queda el 20%. Hay una diferencia en la calidad, pero es verdaderamente difícil distinguirla.

Sin embargo si guardamos una imagen que tenga manchas de colores uniformes, si se notaría muy facilmente la pérdida de información en todos los bordes.

Entonces cuando usar el JPEG?

– Para guardar todas tus fotografías para que ocupen menos espacio en tu disco duro.

– Para compartir fotografías en tu blog y redes sociales.

– Para imprimir tus fotografías (si lo has guardado con la máxima calidad)

Cuando NO usar el JPEG?

– Para crear tu logo y subirlo a tu blog. No tendrá transparencias y se verá muy píxelado.

– Para crear animaciones. El JPEG no soporta animaciones.

– Para crear un documento de texto y compartirlo en tu blog o enviarlo por correo. Se verá muy mal.

 

GIF

El GIF es el antiguo rey de los formatos de imágenes digitales. Solo soporta 8 bits y 256 colores, con lo cual no se mantiene mucha calidad en la imagen. Pero, a diferencia del JPEG soporta transparencias y animaciones. Tuvo una época de declive, y casi estuvo a punto de morir cuando se inventó el PNG (después hablaré de ello), porque es un formato con mucha más calidad que permite transparencias. Pero hoy en día el GIF ha vuelto a estar en pleno auge, gracias al boom de las animaciones cortas y repetidas. Seguro que las habrás visto en más de un blog.

No es que antes no existiesen, sólo que ahora están en pleno auge, y para mi, ¡son super divertidas! Te puedes pasar horas en Giphy buscando animaciones de todo tipo, ¡y no aburrirte nunca!

Seguro que ahora te estarás preguntando, ¿Entonces se puede usar este formato para todas las imágenes digitales? Pues para fotografías es mejor evitar guardar este formato, porque se perdería muchísima información. Mira el ejemplo, y fíjate en las nubes. Se notan ya grandes manchas de color y mucha perdida de detalle.

 

Cuando usar el GIF?

– para crear un video corto o banner animado

– para crear una imagen con transparencia (aunque no te lo recomiendo)

Cuando NO usar el GIF?

– para guardar fotografías. Se pierde mucha calidad.

– para guardar tu logo y subirlo a tu blog. Aunque soporte transparencias, no se vería en todo su esplendor.

 

PNG

El PNG es el formato que tiene lo mejor del JPEG y del GIF. O sea permite guardar los archivos con mucha calidad e informaciones y ademas te permite usar transparencias. Es un formato que tiene una forma de compresión «sin pérdida». Por esta razón es el formato ideal para guardar imágenes con gráficos, logotipos, tipografías y manchas de colores uniformes en general, porque se verá perfectamente nítido. Fíjate en el ejemplo.

 

Pero, al no tener casi pérdida de información, no es recomendable guardar en este formato las fotografías, ya que pesarían mucho, incluso más que un JPEG.

Cuando usar el PNG?

– para guardar tu logo y subirlo a tu blog. Te permitirá guardarlo con transparencia y con suficiente detalle para que se vea perfectamente.

– para guardar imágenes con gráficos y tipografías. Por ejemplo la portada de mi post, al tener tipografías es mejor que esté en PNG para que se siga leyendo bien y sin píxeles alrededor.

Cuando NO usar el PNG?

– para guardar tus fotografías, porque pesarían mucho.

– para crear animaciones. Este formato no las soporta.

 

Y hasta aquí el post de hoy. Espero que te haya sido de utilidad y que te haya solucionado unas cuantas duda. En el post de la semana que viene hablaré del otro grupo de formatos para impresión: PDF, TIFF, vectores (SVG y EPS)

Me gustaría saber que otras dudas diseñeriles tengas a la hora de trabajar en tu blog. Me ayudarían mucho a entender tus problemas y me inspirarían para crear otros posts de este tipo! Te espero en los comentarios!