Karl Ove Hufthammer

Brukarvenlige nettsidebilde

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.)

6 kommentarar

  1. Dette er en god idé, som er vel verdt å ta i betraktning når man skal optimalisere for langsomme linjer av alle typer. Det er imidlertid et problem sm bare blir større med denne bruken av bilder: Løsninger der man betaler pr. kilobyte.
    Jeg håper jo slike løsninger er på vei bort, men i mellomtiden ville det vært veldig kjekt hvis klientene faktisk stoppet nedlastingen etter 1/64, og ventet på beskjed før resten evt. ble lastet ned.
    Bare litt tankespinn, og på helt feil plass, egentlig 😉 Ellers tusen takk for en god og nyttig artikkel.

  2. Bildene blir litt større. Det vil si litt større enn PNG uten Adam-7? Men for grafikk, særlig grafikk uten gradienter, er nok GIF nokså mye mindre enn PNG?

    Er det noen god måte å simulere langsom load av bilder lokalt? (Det beste er naturligvis å uploade til en server i Ukraina eller på Færøyene.)

  3. Ja, Adam7-bilde optimert med OptiPNG vert litt større enn tilsvarande utan Adam7. Men merk at dei gjerne kan vera mindre enn PNG-bilda du får direkte ut av bildeprogrammet du brukar.
    Men nei, GIF er ikkje mindre enn PNG. PNG er alltid mindre enn GIF (kanskje med unntak av bittesmå bilde på eit par–tre pikslar, der filhovudet er større enn sjølve bildedataa). I tillegg kjem alle dei andre fordelane PNG har over GIF. Det er i dag ingen grunn til å bruka GIF i staden for PNG.

  4. Eg ser at det er sett spørjeteikn ved «gammakorreksjon» i PNG-bilæte. Kann henda er det ein grunn til å ikkje nytta PNG, sume gonger?

    Gamma i PNG har tidligare vore eit irriterande (men etter mi meining ikkje serlig stort) problem. Nyare versjonar av nettlesarar og bildeprogram har blitt flinkare, og problemet er no ikkje nokon grunn til å bruka andre bildeformat framfor PNG.
    Det største problemet er avanserte (gjerne gamle) bildeprogram som lagrar PNG-filer med (feilaktig) gammainformasjon. Å fjerna denne vil vanligvis vera ei fungerande løysing.

  5. Det er visst på Mac, i Safari føre OS X 10.4, at problemet er mest til stades … Eg er i grunnen samd i at då er det ikkje so mykje å festa seg ved :–)
    PS: når eg skulle leggja inn teksti mi, fekk eg ei feilmelding av di eg freista meg utan nokor postaddressa. Det var no greidt nog, men til vitring gjorde dette òg at grensesnittspråket skifte frå nynorsk til bokmål.

Legg til kommentar

E-postadressa vert ikkje synleg for andre. Obligatoriske felt er merkte med *.