Karl Ove Hufthammer

Brukarvenlige nettsidebilde

17. May 2005 (oppdatert 17. mai 2005)

Bilde på nettsider tar lang tid å lasta ned, og me vil derfor gjera bildefilene minst mulig. (Nokre av oss brukar framleis modemsamband, og mobilbaserte nettlesarar er på full fart inn!) Løysinga er sjølvsagt komprimering, som gjer at bilda tar mindre plass, med held same, eller nær same, kvalitet. Men overraskande nok er det ofte meir brukarvenlig å gjera filene litt større. Grunnen er ein lite kjend funksjon i PNG-standarden.

Men la oss først kort sjå nærare på sjølve problemet. Store bildefiler gjer ofte at det tar lenger tid før brukaren kan komma i gang med å bruka nettsida. Alternativ tekst på bilda hjelper litt, og komprimering hjelper veldig, men sjølv med sterk komprimering vert bildefilene for store. Problemet er uansett størst for ikkjefotografiske bilde, der me må (bør) nytta tapsfri komprimering – i praksis PNG-formatet.

Løysinga

Løysinga finn me overraskande nok djupt inne i PNG-spesifikasjonen: Adam7-linjering. Dette er ein teknikk som gjer at brukaren får sjå ein (lågoppløyselig) versjon av bildet allereie når berre 1/64 er lasta ned. Bildet vert so gradvis forbetra etter at 1/32, 1/16, 1/8, 1/4, 1/2 og resten av bildet kjem. Det er altso i alt 7 steg, derav namnet («Adam» er oppfinnaren av metoden, Adam M. Costello). Slik ser det ut:

[Bilde av dei sju stega i Adam7-linjering, ved bruk av enkel oppskalering. Bildet viser nokre farga glas, og motivet er klart synleg allereie i først steg.]

Nokre fordelar:

Naturlig nok har teknikken òg ulemper – eller – faktisk berre éi ulempa: Filene blir litt større. Ikkje mykje, berre litt. Fordelane oppveger klart!

I praksis

Korleis ser so resultatet ut? Vel, det kjem litt an på nettlesaren du brukar. Standarden gjer det nemlig mulig å vera litt smart. La oss sjå nærare på den første av dei sju stega: Her vil kvart bildepunkt tilsvara 64 bildepunkt frå heile bildet. Ein kan då visa kvart punkt 8 gongar so breitt og 8 gongar so høgt, og då få ei lågoppløyselig utgåva av fullbildet. Men ein kan òg vera litt smartare. Viss me veit at eitt punkt er kvitt, og eitt litt bortanforer svart, kan me då gjetta at det i midten kanskje er omtrent grått. Mjuke overgangar på korte avstandar er vanligare enn sylskarpe kantar! Ved hjelp av slike avanserte oppskaleringsmetodar kan me få eit mykje betre resultat. Her er den naive metoden:

[Bilde av dei sju stega i Adam7-linjering, ved bruk av enkel oppskalering. Bildet viser nokre farga glas, og motivet er klart synleg allereie i først steg.]

Resultatet vart absolutt akseptabelt. Men her er den litt smartare metoden:

[Bilde av dei sju stega i Adam7-linjering, ved bruk av avansert oppskalering. Bildet viser nokre farga glas, og motivet er klart synleg allereie i først steg.]

Varierande resultat

Adam7 fungerer naturlig nok dårligast på bilde med mange små detaljar, men på typiske navigasjonselement, som piler og store overskrifter, vert motivet gjerne lesbart allereie på første eller andre gjennomgang. Då er det altso snakk om ein reduksjon til ein trettitodel av nedlastingstida før sida kan brukast!

Her er eit eksempel på ei blanding av bilde og tekst:

[Bilde av dei sju stega i Adam7-linjering, ved bruk av enkel oppskalering. Bildet viser ein fjesing og eit hjerta, med teksten «Kjærleik».] Bilde av dei sju stega i Adam7-linjering, ved bruk av avansert oppskalering. Bildet viser ein fjesing og eit hjerta, med teksten «Kjærleik».

Overskrifter er vanligvis større, og fungerer betre enn i dette eksempelet. La oss til slutt kosta på oss endå eit eksempel, eit med store flater. Her fungerer Adam7 fint alt frå første steg:

[Bilde av dei sju stega i Adam7-linjering, ved bruk av enkel oppskalering. Bildet viser ein firkløver.] Bilde av dei sju stega i Adam7-linjering, ved bruk av avansert oppskalering. Bildet viser ein firkløver.

Korleis laga Adam7-bilde

Den aller beste måten å laga PNG-bilde med Adam7 på, er å bruka programmet OptiPNG:

optipng -i1 -o7 *.png

Det er valet -i1 som slår på Adam7-linjering, men det er òg verdt å ta med -o7. OptiPNG er nemlig hovudsaklig utvikla for å redusera størrelsen på PNG-bilde, ved å prøva å komprimera dei på ulike måtar. Valet -o7 seier at (nesten) alle mulige komprimeringsmåtar skal prøvast. So godt som alle bildeprogram er dårlige til å lagra PNG-bilde, og OptiPNG vil ofte redusera størrelsen på filene dramatisk (20 % til 50 %). (Merk at det er ingen som helst tap i bildekvalitet.)

Støtta i nettlesarar

Adam7-linjering er støtta i alle nettlesarar som støttar PNG, men langt frå optimalt. So vidt eg kan sjå brukar dei alle den naive skaleringsmetoden, med unntak av Internet Explorer, som er endå verre, og rett og slett viser svart bakgrunn for dei linjene som ikkje er lasta ned. Men den naive metoden er fullt ut akseptabel, so det er iallfall ingen tekniske grunnar til ikkje å gå over til Adam7.

(Bilda i denne artikkelen brukar ikkje Adam7, av openberre grunnar.)

Emne: Programvare

[Abonner på kommentarar til artikkelen]

Kommentarar

Legg til kommentar





Du kan bruka dei vanligaste elementa og attributta i HTML. Avsnitt lagar du med vanlige linjeskift. Eg kan komma til å gjera typografiske og ortografiske endringar i innlegg (men vil aldri endra sjølve innhaldet), samt fjerna upassande innlegg.

Skriven av Karl Ove Hufthammer og driven med WordPress. Du kan abonnera på innleggs-RSS eller kommentar-RSS.