Optimalisá imagen pa web i rendimentu

Resumen

Un manera pa hasi bo website mas lihé ta hasi e mas chikí. No ku letra diminuto, ma ku menos byte! Mas ku mitar di e peso di un website mediu ta bin di imagen. Ma hopi poko hende ta optimalisá nan imagen pa web i rendimentu. Ta ora pa wak kuantu byte bo por warda!

Teksto kompleto

Optimalisá bo website

Si bo optimalisá bo website, e ta karga mas lihé. Pasobra hopi hende ta prefer website lihé, motor di buska manera Google a kuminsá midi e velosidat di página pa determiná e posishon di bo website den e resultadonan di buskada.

Grandesa mediu di página

Maske hopi konstruktor di web ta fokus promé riba HTML i script, mayoria di e peso di un website mediu ta bin di imagen (Orígen: HttpArchive peso di página sèptèmber 2018).

Un optimalisashon efektivo di imagen por tin, dus, efekto inkreíbel riba e velosidat di bo website.

Kiko ta optimalisashon di imagen?

Un imagen digital ta manera un tábla di shaki, un rektángulo ku 8x8 kuadro blanku i pretu. Si bo warda e tábla di shakinan sin kompresé, bo lo skirbi e koló di kada kuadro individual ("kuadro un ta blanku, kuadro dos ta pretu, kuadro tres ta blanku, kuadro sinku ta pretu, etc"). E lo tuma 64 liña pa deskribi henter e tábla, maske eksakto esaki no ta hopi efisiente.

Optimalisá imagen ta buska manera mas efisiente pa deskribi e kolónan di un imagen. Bo por deskribi henter e tábla di shakinan den un sola liña di teksto: "alterná entre pretu i blanku, kuminsá ku blanku", òf asta mas efisiente: "repiti blanku, pretu". Ku imagen digital esaki yama kompreshon, e algoritmo ta purba identifiká sekuensia di kolónan ku ta repití.

Tin diferente algoritmo ku tur tin nan fortalesa i debilidat. Algun ta traha mihó ku potrèt (ku miyonnan di koló), miéntras otro ta traha mihó ku imagen ku hopi menos koló diferente (manera un slide di PowerPoint). Skohe e algoritmo korekto ta bo promé aselerashon di rendimentu.

Formato komun di imagen

• JPG ta un tipo di file di imagen hopi komun ku kompreshon efektivo pa imagen ku hopi koló diferente, manera potrèt. E formato aki ta eksistí for di 1992 i ta wòrdu sportá riba kasi tur aparato.
• GIF ta un otro tipo bieu di file di imagen ku a wòrdu desaroyá na 1987. E ta popular pasobra e ta sporta animashon. Na tèknika e ta hopi limitá na so 256 koló diferente pa imagen.
• PNG a wòrdu desaroyá na 1994 manera reemplaso pa GIF pa motibu di kontroversia tokante e algoritmo di kompreshon di GIF. E ta popular pasobra kasi tur aparato ta sporta e i PNG ta sporta miyonnan di koló, huntu ku transparensia. E ta pèrmití kompreshon sin pèrdida, ku ta garantisá teksto i liña nítido, loke ta hasi e formato aki perfekto pa gráfiko i logo.

Resien Google (webP) i Apple (HEIF) a introdusí formato nobo di imagen ku ta ofresé kompreshon ainda mihó kompará ku JPG, GIF i PNG. Pero hopi hende ainda no ta usa e formatonan aki.

Skohe e formato korekto di imagen

Kiko ta e mihó formato pa bo imagen ta depende di e kontenido real di bo imagen. No tin ningun regla universal ku ta determiná e mihó formato pa un imagen spesífiko. Bo ta mihó purba bo mes, wak kiko ta pasa ku e grandesa di file si bo warda bo imagen den diferente formato. Hopi programa di desktop ta ofresé e opshon pa skohe un formato ora bo skohe "Save as".

Bo por kuminsá ku JPG pa potrèt i PNG pa imagen ku tin menos koló, manera un logo, gráfiko òf slide di PowerPoint. Formato manera JPG ta ofresé diferente konfigurashon di kalidat di kompreshon ku ta afektá kalidat di imagen i grandesa di file. Un konfigurashon di kalidat mas abou ta redusí kalidat di imagen pa un file mas chikí; bo mester purba haña un bon balanse entre kalidat i grandesa.

Kompreshon ku pèrdida i sin pèrdida

Algoritmonan di kompreshon ku ta kambia kalidat pa grandesa di file ta yama algoritmo di kompreshon ku pèrdida. Di otro banda, algoritmo ku ta preservá e kalidat original di imagen ta yama algoritmo di kompreshon sin pèrdida.

Kon optimalisá imagen

Un biaha bo tin bo imagen JPG òf PNG, bo por optimalisá e dor di skohe e konfigurashon korekto pa e algoritmo di kompreshon. No preokupá bo, bo no mester hasi esaki manual: bo por usa software automátiko di optimalisashon pa haña e konfigurashon óptimo di kompreshon pa un imagen spesífiko.

Optimalisá imagen JPG

Si bo ta usa Photoshop bo por usa su funshon integrá Save for the web pa haña un imagen JPG ku ta rasonabel optimalisá.

Òf bo por usa un erramienta di liña di komando manera jpegoptim. E erramienta aki ta redusí file JPG dor di optimalisá e tábla interno di Huffman, ku ta mehorá efektivo e rendimentu di e algoritmo di kompreshon. Normal bo por spera un mehorashon di 10-15% sin pèrdida di kalidat di imagen.

Un otro manera pa optimalisá imagen JPG ta usa un optimalisadó online, manera TinyJPG òf ImageOptim.

Si bo ta usa WordPress bo por considerá usa un plugin ku ta hasi optimalisashon di imagen pa bo, manera Imagify di xtremerain.

Optimalisá imagen PNG

File PNG por wòrdu optimalisá ku Photoshop ku e funshon Save for the web. Pa optimalisá bo file PNG ainda mihó, bo por usa un app spesialisá, manera ImageAlpha pa Mac òf PNGGauntlet pa Windows.

Tin optimalisadó online disponibel pa file PNG, manera TinyPNG i Compressor.io.

Òf bo por usa programa di liña di komando manera optipng, pngcrush òf pngquant. Ta bale la pena pa bai un poko mas profundo den e erramientanan aki di PNG.

Prueba di optipng vs pngcrush vs pngquant

Pa mi trabou manera desaroyador di web mi ta integrá optimalisashon di imagen den sistema di manehá kontenido, ku ta hasi mas fásil pa mi klientenan pa tin nan imagen optimalisá outomátiko. Ora e kantidat di klientenan a krese hopi mi a topa ku problema di rendimentu.

Pa haña mas rendimentu mi a disidí pa prueba optipng, pngcrush i pngquant. Mi tabata spera di haña bon optimalisashon di imagen ku menos poder di prosesadó di e server. Esaki lo mehorá e rendimentu pa mi klientenan.

PACE-CME

Un di e klientenan ei ta PACE-CME, un website ku rekurso pa edukashon kardiovaskular pa dòkternan. E website aki ta kontené miles di slide di PowerPoint warda manera file PNG.

Pa prueba e rendimentu mi a usa un imagen spesial di prueba ku ta mas grandi i mas pisá ku un slide típiko di PowerPoint. E imagen di prueba aki ta un imagen di alta resolushon ku kontenido mesklá, ku ta konsistí parsialmente di potrèt, teksto i koló sólido.

Método

Mi a hasi e pruebanan riba un server Quad-core Intel XEON ku 8GB di ram. Pa kada erramienta di optimalisashon di PNG mi a usa tantu e konfigurashonnan mas ekstremo (pa wak kiko e por hasi ku e grandesa di file), i tambe su konfigurashon default (pa wak kuantu mas lihé e konfigurashon default ta, i kon nan resultado ta kompará ku e mihó konfigurashon di kompreshon).

Resultado

• imagen di prueba original 2897KB
• optipng ekstremo (-o7): 2510KB den 2 minüt 36 sekundo / default: 2536KB den 4,9 sekundo
• pngcrush ekstremo (-brute): 2510KB den 1 minüt 42 sekundo / default: 2531KB den 9,2 sekundo
• pngquant ekstremo (-s 1): 744KB den 5,2 sekundo / default: 746KB den 4,2 sekundo

E rendimentu di pngquant ta spantoso, e ta hopi mas lihé i na mes tempu e ta duna un grandesa di file hopi mas chikí. Esaki no ta magia, pasobra e ta usa un algoritmo di kompreshon diferente, ku pèrdida. Esaki ta nifiká ku imagen optimalisá dor di pngquant ta pèrdè un poko kalidat di imagen. Mi a kompará nan di serka i no por a nota e diferensia.

Konklushon

Optimalisá imagen pa web i rendimentu ta di berdat importante. Manera mi pruebanan a mustra, skohe e algoritmo korekto por hasi tur e diferensia.

Pa mi esaki a nifiká skohe pngquant, pero bo desishon por ta diferente dependé di e tipo di imagen ku bo ke optimalisá.

E lès prinsipal pa tuma for di e artíkulo di blog aki ta: tene kuidou di bo imagen. Bo website lo ta hopi mas lihé, i ken no ta stima un website lihé?