Comprimir imágenes sin arruinar tu diseño

Cuan­do habla­mos de com­pri­mir imá­ge­nes, la mayo­ría de la gen­te pien­sa que el resul­ta­do será una foto cutre, borro­sa y lle­na de man­chas. Nada más lejos de la reali­dad. Con las herra­mien­tas y los cono­ci­mien­tos ade­cua­dos, es posi­ble redu­cir el peso de un archi­vo JPG o PNG de for­ma bru­tal sin que nadie note la dife­ren­cia. Y eso, para quien tra­ba­ja en dise­ño edi­to­rial o ges­tio­na con­te­ni­dos digi­ta­les, supo­ne un antes y un des­pués en la velo­ci­dad de car­ga, el alma­ce­na­mien­to y la expe­rien­cia de usuario.

El for­ma­to JPEG nació a prin­ci­pios de los años noven­ta gra­cias al Joint Pho­to­graphic Experts Group, un comi­té de exper­tos que desa­rro­lló un están­dar de com­pre­sión pen­sa­do espe­cí­fi­ca­men­te para foto­gra­fías. Su algo­rit­mo se basa en un prin­ci­pio fas­ci­nan­te que conec­ta la tec­no­lo­gía con la bio­lo­gía: el ojo humano es mucho más sen­si­ble a los cam­bios de lumi­no­si­dad que a los de color. Apro­ve­chan­do esa limi­ta­ción bio­ló­gi­ca, el JPEG eli­mi­na infor­ma­ción cro­má­ti­ca que nues­tro cere­bro ape­nas per­ci­be, logran­do redu­cir el tama­ño de los archi­vos de for­ma sig­ni­fi­ca­ti­va. Por su par­te, el PNG sur­gió algo des­pués, impul­sa­do por el World Wide Web Con­sor­tium, como una alter­na­ti­va libre al for­ma­to GIF que por aquel enton­ces esta­ba suje­to a licen­cia. A dife­ren­cia del JPEG, el PNG uti­li­za com­pre­sión sin pér­di­da, lo que lo con­vier­te en el for­ma­to ideal para grá­fi­cos pla­nos, logo­ti­pos e imá­ge­nes que nece­si­tan trans­pa­ren­cia median­te su canal alfa. Ele­gir entre uno y otro no es cues­tión de pre­fe­ren­cia per­so­nal, sino de enten­der qué tipo de ima­gen vas a mane­jar y cuál será su des­tino final.

JPG para fotos, PNG para gráficos: la regla de oro

Si hay una nor­ma que todo dise­ña­dor debe­ría tatuar­se en la reti­na es esta: usa JPG para foto­gra­fías y PNG para grá­fi­cos vec­to­ria­les ras­te­ri­za­dos, ico­nos y logo­ti­pos. El moti­vo es pura­men­te téc­ni­co y tie­ne que ver con cómo fun­cio­na cada algo­rit­mo de com­pre­sión. El algo­rit­mo JPEG está dise­ña­do para mane­jar millo­nes de colo­res y tran­si­cio­nes sua­ves entre tonos, algo pro­pio de las foto­gra­fías y las imá­ge­nes con tex­tu­ra. Cuan­do inten­tas guar­dar un grá­fi­co plano con gran­des áreas de color sóli­do en JPEG, el resul­ta­do es un archi­vo inne­ce­sa­ria­men­te pesa­do y con arte­fac­tos visi­bles en los bor­des, esas man­chas carac­te­rís­ti­cas que arrui­nan la niti­dez de cual­quier logotipo.

El PNG, en cam­bio, bri­lla pre­ci­sa­men­te en esas situa­cio­nes. Su com­pre­sión sin pér­di­da man­tie­ne los bor­des níti­dos y las áreas de color uni­for­me impe­ca­bles, gene­ran­do archi­vos sor­pren­den­te­men­te lige­ros cuan­do la ima­gen es sen­ci­lla. Sin embar­go, si guar­das una foto­gra­fía en PNG, pre­pá­ra­te para un archi­vo enor­me que cua­dru­pli­ca­rá el peso de su equi­va­len­te en JPEG sin apor­tar nin­gu­na ven­ta­ja visi­ble. Un grá­fi­co plano podría pesar ape­nas unos cuan­tos kiloby­tes en PNG, pero esa mis­ma ima­gen con con­te­ni­do foto­grá­fi­co se dis­pa­ra­ría has­ta varios megaby­tes. Pare­ce obvio, pero esta con­fu­sión entre for­ma­tos sigue sien­do uno de los erro­res más habi­tua­les en estu­dios de dise­ño y depar­ta­men­tos de comu­ni­ca­ción, don­de a menu­do se expor­ta todo en PNG «por si aca­so» sin pen­sar en las consecuencias.

La transformada del coseno: el corazón del JPEG

Para com­pren­der por qué el JPEG es tan efi­caz com­pri­mien­do foto­gra­fías, mere­ce la pena aso­mar­se al meca­nis­mo que hace posi­ble la magia. El algo­rit­mo divi­de la ima­gen en blo­ques de 8×8 píxe­les y apli­ca a cada uno la trans­for­ma­da de coseno dis­cre­ta, cono­ci­da como DCT por sus siglas en inglés. Esta ope­ra­ción mate­má­ti­ca, desa­rro­lla­da ori­gi­nal­men­te por Nasir Ahmed y cola­bo­ra­do­res en 1974, con­vier­te los valo­res de los píxe­les en coefi­cien­tes de fre­cuen­cia. Los coefi­cien­tes de baja fre­cuen­cia repre­sen­tan las varia­cio­nes gra­dua­les de tono y color, que son las que nues­tro ojo per­ci­be con más faci­li­dad. Los de alta fre­cuen­cia corres­pon­den a deta­lles minúscu­los y tran­si­cio­nes abrup­tas que el sis­te­ma visual humano tien­de a ignorar.

Al cuan­ti­zar estos coefi­cien­tes —es decir, al redon­dear y sim­pli­fi­car los valo­res de alta fre­cuen­cia—, el algo­rit­mo des­car­ta infor­ma­ción que resul­ta prác­ti­ca­men­te invi­si­ble para el espec­ta­dor. La gra­cia del asun­to está en que el gra­do de cuan­ti­za­ción es com­ple­ta­men­te ajus­ta­ble. En pro­gra­mas como Pho­toshop, cuan­do eli­ges un nivel de com­pre­sión entre 1 y 12, estás deci­dien­do cuán­ta infor­ma­ción de alta fre­cuen­cia se sacri­fi­ca en el pro­ce­so. Un nivel 8, por ejem­plo, sue­le ser el pun­to dul­ce don­de el archi­vo pesa una frac­ción del ori­gi­nal sin que nadie apre­cie la dife­ren­cia a sim­ple vis­ta. Es un equi­li­brio ele­gan­te entre mate­má­ti­cas y per­cep­ción huma­na que lle­va fun­cio­nan­do más de tres décadas.

El primer paso: redimensionar antes de comprimir

Antes de tocar nin­gún ajus­te de com­pre­sión, hay un paso pre­vio que muchos pro­fe­sio­na­les pasan por alto y que tie­ne un impac­to des­co­mu­nal en el peso del archi­vo final. Redu­cir las dimen­sio­nes de la ima­gen en píxe­les es, con dife­ren­cia, la for­ma más efec­ti­va de ali­ge­rar un archi­vo. Una foto­gra­fía de 6000×4000 píxe­les direc­ta­men­te saca­da de una cáma­ra moder­na pue­de pesar fácil­men­te 1,7 megaby­tes inclu­so en for­ma­to JPEG. Si el des­tino final de esa ima­gen es una colum­na de blog de 664 píxe­les de ancho, no tie­ne nin­gún sen­ti­do man­te­ner esas dimen­sio­nes titánicas.

Tenien­do en cuen­ta las pan­ta­llas de alta den­si­dad de píxe­les, que mues­tran el doble de reso­lu­ción, bas­ta­ría con redi­men­sio­nar la ima­gen a unos 1328 píxe­les de ancho. Solo con ese ajus­te, el peso podría bajar de 1,7 MB a unos 800 KB, una reduc­ción de más de la mitad sin haber toca­do un solo pará­me­tro de com­pre­sión. En el ámbi­to del dise­ño edi­to­rial digi­tal, este paso es toda­vía más crí­ti­co. Las publi­ca­cio­nes inter­ac­ti­vas y los PDF opti­mi­za­dos para pan­ta­lla no nece­si­tan imá­ge­nes a 300 ppp; con 72 o 96 ppp es más que sufi­cien­te para una visua­li­za­ción níti­da en cual­quier dis­po­si­ti­vo. En cam­bio, si el des­tino es la impre­sión off­set o digi­tal de alta cali­dad, enton­ces sí hay que man­te­ner los 300 dpi y las dimen­sio­nes ade­cua­das al tama­ño físi­co final. Saber dis­tin­guir entre ambos esce­na­rios y apli­car la reso­lu­ción correc­ta es lo que sepa­ra al pro­fe­sio­nal del aficionado.

Ajustar la compresión JPEG sin perder los nervios

Una vez que la ima­gen tie­ne las dimen­sio­nes correc­tas, lle­ga el momen­to de jugar con el nivel de com­pre­sión. Como ya hemos comen­ta­do, el JPEG per­mi­te ele­gir entre dis­tin­tos gra­dos que van del máxi­mo deta­lle al máxi­mo aho­rro de espa­cio. La ten­ta­ción de dejar­lo todo en cali­dad máxi­ma es com­pren­si­ble, sobre todo cuan­do uno ha inver­ti­do tiem­po en con­se­guir la foto per­fec­ta, pero resul­ta inne­ce­sa­ria en la gran mayo­ría de los casos. La dife­ren­cia visual entre un nivel 12 y un nivel 8 es prác­ti­ca­men­te imper­cep­ti­ble para el ojo humano en la mayo­ría de las fotografías.

Sin embar­go, la dife­ren­cia en peso es enor­me: siguien­do el ejem­plo ante­rior, aque­lla ima­gen de 800 KB a nivel 12 podría que­dar­se en ape­nas 200 KB a nivel 8. Habla­mos de una reduc­ción del 75% sin que nadie note nada raro. El tru­co está en no dejar­se lle­var y evi­tar bajar dema­sia­do. Por deba­jo del nivel 5 o 6, empie­zan a apa­re­cer los temi­dos arte­fac­tos de com­pre­sión: esos blo­ques y ban­das de color que dela­tan una opti­mi­za­ción dema­sia­do agre­si­va y que resul­tan espe­cial­men­te moles­tos en zonas de tran­si­ción sua­ve como cie­los o degra­da­dos. Tam­bién es impor­tan­te recor­dar que cada vez que abres, edi­tas y vuel­ves a guar­dar un JPEG, la com­pre­sión se apli­ca de nue­vo y la cali­dad se degra­da un poco más. Por eso, siem­pre con­vie­ne tra­ba­jar con el archi­vo ori­gi­nal o con una copia en for­ma­to sin pér­di­da como TIFF o PSD, y expor­tar a JPEG úni­ca­men­te al final del pro­ce­so editorial.

Herramientas de compresión: las aliadas del diseñador

Des­pués de redi­men­sio­nar y ajus­tar el nivel de com­pre­sión, toda­vía que­da mar­gen para expri­mir unos kiloby­tes más. Ahí es don­de entran las herra­mien­tas de com­pre­sión espe­cia­li­za­das, que apli­can algo­rit­mos pro­pie­ta­rios para opti­mi­zar el archi­vo sin alte­rar lo que el ojo per­ci­be. Tiny­PNG es pro­ba­ble­men­te la más cono­ci­da del sec­tor. A pesar del nom­bre, com­pri­me tan­to PNG como JPG y WebP, y su algo­rit­mo inte­li­gen­te ana­li­za cada ima­gen de for­ma indi­vi­dual para apli­car los ajus­tes ópti­mos auto­má­ti­ca­men­te. Es capaz de redu­cir el peso has­ta un 80% adi­cio­nal man­te­nien­do una apa­rien­cia prác­ti­ca­men­te idén­ti­ca al ori­gi­nal, y per­mi­te pro­ce­sar varias imá­ge­nes à la vez con un lími­te razo­na­ble en su ver­sión gratuita.

Kraken.io, por su par­te, está orien­ta­da a un uso más pro­fe­sio­nal y per­mi­te ele­gir entre com­pre­sión con pér­di­da o sin pér­di­da, dan­do el con­trol total al dise­ña­dor sobre el equi­li­brio entre cali­dad y tama­ño. Su tec­no­lo­gía es espe­cial­men­te apre­cia­da por fotó­gra­fos y admi­nis­tra­do­res de sitios web que bus­can la máxi­ma fide­li­dad visual. Squoosh, desa­rro­lla­da por Goo­gle Chro­me Labs, es otra opción fan­tás­ti­ca que mere­ce aten­ción espe­cial. Fun­cio­na direc­ta­men­te en el nave­ga­dor como una apli­ca­ción web pro­gre­si­va, todas las ope­ra­cio­nes se rea­li­zan en local sin subir nada à la nube —lo cual garan­ti­za la pri­va­ci­dad total—, y su inter­faz con vis­ta pre­via en tiem­po real per­mi­te com­pa­rar el antes y el des­pués con un des­li­za­dor inter­ac­ti­vo. Ade­más, sopor­ta for­ma­tos moder­nos como AVIF, MozJ­PEG, WebP y OxiPNG. Para quien pre­fie­ra tra­ba­jar des­de el escri­to­rio, Ima­geOp­tim en Mac y herra­mien­tas simi­la­res en Win­dows son opcio­nes exce­len­tes que apu­ran has­ta el últi­mo byte sin sacri­fi­car cali­dad visible.

Los metadatos EXIF: el peso que nadie ve

Hay un aspec­to que sue­le pasar com­ple­ta­men­te des­aper­ci­bi­do cuan­do se habla de opti­mi­za­ción de imá­ge­nes, y es el peso de los meta­da­tos. Cada foto­gra­fía toma­da con una cáma­ra digi­tal o un smartpho­ne lle­va incrus­ta­da una can­ti­dad con­si­de­ra­ble de infor­ma­ción invi­si­ble: mode­lo de cáma­ra, ajus­tes de expo­si­ción, velo­ci­dad de obtu­ra­ción, aper­tu­ra del dia­frag­ma, coor­de­na­das GPS, fecha y hora, e inclu­so una minia­tu­ra de la ima­gen ori­gi­nal en baja reso­lu­ción. Estos datos, alma­ce­na­dos en for­ma­to EXIF —siglas de Exchan­gea­ble Ima­ge File For­mat—, pue­den aña­dir entre 10 y 50 KB por ima­gen. Eso no pare­ce mucho has­ta que mul­ti­pli­cas esa cifra por dece­nas o cien­tos de imá­ge­nes en un sitio web o una publi­ca­ción digi­tal interactiva.

Eli­mi­nar los meta­da­tos EXIF no solo redu­ce el peso del archi­vo, sino que tam­bién pro­té­gé la pri­va­ci­dad del fotó­gra­fo o del clien­te, ya que las coor­de­na­das GPS pue­den reve­lar con pre­ci­sión de metros la ubi­ca­ción exac­ta don­de se tomó la foto. La mayo­ría de las herra­mien­tas de com­pre­sión que hemos men­cio­na­do ante­rior­men­te eli­mi­nan los meta­da­tos de for­ma auto­má­ti­ca duran­te el pro­ce­so, pero tam­bién es posi­ble hacer­lo manual­men­te con uti­li­da­des como Exif­Tool en línea de coman­dos o des­de las pro­pie­da­des del archi­vo en el explo­ra­dor de Win­dows. Aho­ra bien, hay un matiz impor­tan­te para fotó­gra­fos pro­fe­sio­na­les: muchos ban­cos de imá­ge­nes y agen­cias de stock recha­zan archi­vos cuyos datos EXIF han sido eli­mi­na­dos, por­que nece­si­tan esa infor­ma­ción para cata­lo­gar y veri­fi­car la auto­ría. Así que con­vie­ne con­ser­var siem­pre una copia del ori­gi­nal intac­ta antes de lim­piar los meta­da­tos de las ver­sio­nes optimizadas.

WebP y AVIF: el futuro ya está aquí

Aun­que JPG y PNG siguen sien­do los for­ma­tos domi­nan­tes y pro­ba­ble­men­te lo serán duran­te bas­tan­te tiem­po, mere­ce la pena cono­cer a los dos aspi­ran­tes que están ganan­do terreno a pasos agi­gan­ta­dos. WebP, desa­rro­lla­do por Goo­gle en 2010 a par­tir del códec de vídeo VP8, ofre­ce una com­pre­sión nota­ble­men­te supe­rior à la del JPEG: una ima­gen WebP con­tie­ne la mis­ma infor­ma­ción visual que su equi­va­len­te JPG pero ocu­pa entre un 30% y un 40% menos de espa­cio. Ade­más, admi­te trans­pa­ren­cia como el PNG y ani­ma­cio­nes como el GIF, lo que lo con­vier­te en un for­ma­to tre­men­da­men­te ver­sá­til para pro­yec­tos web.

AVIF, pre­sen­ta­do en 2019 por la Allian­ce for Open Media —un con­sor­cio que inclu­ye a gigan­tes como Net­flix, Goo­gle y Ama­zon—, va toda­vía un paso más allá. Basa­do en el códec de vídeo AV1, con­si­gue reduc­cio­nes de has­ta un 50% res­pec­to al JPEG con una cali­dad visual igual o supe­rior, y sopor­ta alto ran­go diná­mi­co para imá­ge­nes con som­bras y degra­da­dos com­ple­jos. Ambos for­ma­tos son ya com­pa­ti­bles con la inmen­sa mayo­ría de nave­ga­do­res moder­nos, inclu­yen­do Chro­me, Fire­fox, Edge y Safa­ri, aun­que la adop­ción de AVIF es algo menor que la de WebP en cier­tos con­tex­tos. La estra­te­gia más inte­li­gen­te para pro­yec­tos web actua­les pasa por ser­vir AVIF como pri­me­ra opción, con WebP como res­pal­do y JPEG como últi­mo recur­so para nave­ga­do­res anti­guos. Para pro­yec­tos edi­to­ria­les impre­sos, sin embar­go, estos for­ma­tos no apli­can: el TIFF y el PDF de alta reso­lu­ción siguen man­dan­do sin dis­cu­sión posible.

De 1,7 MB a 140 KB: la prueba del algodón

Vea­mos el efec­to acu­mu­la­do de todas estas téc­ni­cas con un ejem­plo con­cre­to y real que demues­tra has­ta dón­de se pue­de lle­gar. Par­ti­mos de una foto­gra­fía des­car­ga­da a 6000×4000 píxe­les con un peso de 1,7 MB. Tras redi­men­sio­nar­la a 1328×885 píxe­les para ajus­tar­la al ancho de una colum­na web tenien­do en cuen­ta las pan­ta­llas reti­na, el archi­vo baja a 800 KB. A con­ti­nua­ción, redu­ci­mos el nivel de com­pre­sión JPEG de 12 a 8, y el peso cae has­ta los 200 KB sin pér­di­da visual apre­cia­ble. Final­men­te, pasa­mos la ima­gen por una herra­mien­ta como Tiny­PNG, que la com­pri­me un 30% adi­cio­nal, deján­do­la en ape­nas 140 KB.

El resul­ta­do es una reduc­ción del 92% res­pec­to al archi­vo ori­gi­nal, y la dife­ren­cia visual es abso­lu­ta­men­te inapre­cia­ble inclu­so amplian­do la ima­gen al cien por cien. Este flu­jo de tra­ba­jo —redi­men­sio­nar, ajus­tar com­pre­sión, apli­car herra­mien­ta de opti­mi­za­ción— debe­ría con­ver­tir­se en un hábi­to auto­má­ti­co para cual­quier pro­fe­sio­nal del dise­ño que tra­ba­je con con­te­ni­do digi­tal. No se tra­ta solo de que las imá­ge­nes car­guen más rápi­do, que tam­bién. Se tra­ta de res­pe­tar a los usua­rios que nave­gan con cone­xio­nes limi­ta­das o des­de dis­po­si­ti­vos móvi­les con tari­fas de datos res­tric­ti­vas, de redu­cir cos­tes de alma­ce­na­mien­to y ancho de ban­da, y de ofre­cer una expe­rien­cia digi­tal ver­da­de­ra­men­te impe­ca­ble. Al final, la opti­mi­za­ción de imá­ge­nes es una de esas tareas invi­si­bles que mar­can la dife­ren­cia entre un tra­ba­jo correc­to y un tra­ba­jo exce­len­te. Y en un sec­tor don­de los deta­lles lo son todo, igno­rar­la es un lujo que nin­gún estu­dio de dise­ño debe­ría permitirse.

---

---

Referencias

• Ahmed, N., Nata­ra­jan, T. y Rao, K. R. (1974). Dis­cre­te cosi­ne trans­form. IEEE Transac­tions on Com­pu­ters, 23(1), 90–93. Artícu­lo fun­da­cio­nal que intro­du­ce la trans­for­ma­da de coseno dis­cre­ta (DCT), base mate­má­ti­ca de la com­pre­sión JPEG y refe­ren­cia obli­ga­da para enten­der cómo se des­car­ta infor­ma­ción casi imper­cep­ti­ble al ojo humano.
• Gon­za­lez, R. C. y Woods, R. E. (2018). Digi­tal ima­ge pro­ces­sing (4.ª ed.). Pear­son. Manual aca­dé­mi­co clá­si­co sobre pro­ce­sa­mien­to digi­tal de imá­ge­nes, con capí­tu­los com­ple­tos dedi­ca­dos a mode­los de com­pre­sión con y sin pér­di­da, están­da­res como JPEG y JPEG 2000 y aná­li­sis de cali­dad de imagen.
• López López, A. M. (2019). Dise­ño grá­fi­co digi­tal. Ana­ya Mul­ti­me­dia. Libro de refe­ren­cia en cas­te­llano para dise­ña­do­res, que conec­ta fun­da­men­tos de dise­ño grá­fi­co con prác­ti­cas actua­les de entorno digi­tal, inclu­yen­do sec­cio­nes sobre for­ma­tos de ima­gen, reso­lu­ción, opti­mi­za­ción para web y maque­ta­ción multipantalla.
• Rodrí­guez, H. (2009). Ima­gen digi­tal: con­cep­tos bási­cos (2.ª ed.). Autor-Edi­tor. Guía cla­ra y muy visual sobre los fun­da­men­tos de la ima­gen digi­tal —píxe­les, reso­lu­ción, for­ma­tos, com­pre­sión— pen­sa­da para fotó­gra­fos y dise­ña­do­res que nece­si­tan enten­der qué ocu­rre «por deba­jo» de sus archivos.
• Wein­man, L. (2003). Desig­ning web graphics 4. New Riders. Obra clá­si­ca del dise­ño web que abor­da la pre­pa­ra­ción de grá­fi­cos e imá­ge­nes para pan­ta­lla, con espe­cial énfa­sis en la elec­ción de for­ma­tos (GIF, JPEG, PNG), téc­ni­cas de reduc­ción de peso y estra­te­gias para mejo­rar el ren­di­mien­to de sitios y aplicaciones.