Keskiverto nettisurffailija ei jaksa odottaa sivun latautumista edes kymmentä sekuntia. Jos selain parin sekunnin odottelun jälkeen ammottaa vielä tyhjyyttään, moni käyttäjä vaihtaa oitis sivua. Miten on omien kotisivujesi laita? Maaliskuun MikroBitissä (MB 3/2003, sivut 60-65) kävimme läpi laihdutuskikat, joilla puristat myös paljon kuvia sisältävät nettisivut nopeiksi. Tältä sivulta saat apuohjelmat ja lisää ohjeita nettisivujen optimointiin.
Optimointityökalut
Optimointityökaluilla voit pakata kuvasi tehokkaammin ja tiivistää html-koodisi mahdollisimman pieneen pakettiin.
XAT tarjoaa useita toimivia kuvanpakkaajia, muun muassa JPEG Optimizerin, jolla voit määrätä, miten haluat kuvaasi pakata. Toimiva ratkaisu. Uudemmalla Image Optimizerilla voit pakata samaan tapaan myös gif- ja png-kuvia. Sivuilta voit kopioida kokeiluversiot ohjelmista. Shareware, 39 tai 29 euroa.
WebGraphics Optimizer tiivistää kuvia, niin että nettisivut latautuvat nopeammin. Ohjelma tukee 38 eri tiedostomuotoa.
Advanced GIF Optimizer 3.1 pakkaa gif-kuvasi helposti ja nopeasti. Saatavilla on 15 päivän kokeiluversio, jossa on kuuden kuvan yhtäaikainen pakkausrajoitus.
Kopioi tiedosto Apajalta
GIF Optimizer 1.0 karsii gif-kuvatiedostoista turhan tiedon vaikuttamatta kuitenkaan kuvan ulkonäköön. Tiedostojen koko voi pudota kymmeniä prosentteja, jolloin ne vievät huomattavasti vähemmän tilaa ja kaistanleveyttä eli latautuvat nopeammin netistä. Shareware, $29,95.
Kopioi tiedosto Apajalta
Advanced HTML Optimizer tiivistää html-koodiasi muun muassa poistamalla turhuudet ja lyhentämällä pitkiä html-komentoja. Ohjelma tiivistää koodin muutamalle riville, mutta osaa jättää oikeat osat rivitetyiksi. Shareware, kokeiluversio.
VSE Web Site Turbo on Advanced HTML Optimizerin kaltainen, html-koodia tiivistävä ohjelma Macintosh-koneille. Kokeiluversio.
Absolute GIF optimizer lupaa pienentää myös gif-kuvien kokoa laadusta tinkimättä. Shareware, kokeiluversio.
JPEG Wizard pakkaa jpeg- tai gif-kuvasi uudelleen suoraan netissä! Ilmainen, toimiva nettidemo.
Paint Shop Pro 7 on hyvä ja edullinen kuvankäsittelyohjelma, jonka mukana tulee jpeg-optimoija. Löydät siihen ohjeet osoitteesta www.jasc.com/tutorials/nieuwenstein/jpegoptimizer.asp.
GIMP on täysin ilmainen kuvankäsittelyohjelma
Linuxille ja Windowsille. Ohjelma on erinomainen vaihtoehto
kalliille kaupallisille ohjelmille. GIMPillä on laaja
käyttäjäkunta ja sitä kehitetään jatkuvasti.
Css-taulukkokikka
Kuten lehtijutussa mainittiin, taulukoiden latautumista voi nopeuttaa laittamalla taulukon määrittelyyn css-komennon "table-layout:fixed". Alla esimerkkilistaus taulukosta, jossa määrettä on käytetty.
<TABLE STYLE="table-layout: fixed" WIDTH="350">
<TR HEIGHT="20">
<TD WIDTH="100">Sisältöä...</TD>
<TD WIDTH="150">Suurempaa sisältöä...</TD>
<TD WIDTH="100">Taas sisältöä.</TD>
</TR>
<TABLE>
|
Tämä temppu toimii vain silloin, kun taulukon sisällä oleva tavara todella mahtuu määriteltyyn kokoon. Jos näin ei ole, taulukko joudutaan käsittelemään uudelleen ja kaikki määreestä saatava hyöty menetetään.
Microsoft's Developers Networkistä löydät esimerkin siitä, miten määre vaikuttaa taulukon latautumisnopeuteen. Vasemmalla on määritelty taulukko, oikealla perinteisellä tavalla tehty. Jos et huomaa eroa nopeudessa, tyhjennä välimuistisi ja yritä uudelleen. Voit myös painaa näppäimistön Shift- tai Ctrl-näppäin pohjassa selaimen Päivitä-painikettta (englanninkielisessa selaimessa Reload).
Lisää css-tyyleistä
Jos kotisivusi tuntuu vielä näidenkin kikkojen jälkeen hitaalta, kannattaa tarkastella sivun varsinaista html-koodia. Koodistasi löytyy todennäköisesti runsaasti samanlaisina toistuvia font-komentoja. Näiden korvaaminen css-tiedostolla pienentää sivuasi ja tekee siitä nopeamman ja helpommin päivitettävän.
Tyyleistä löydät lisää tietoa MikroBitin css-jutusta numerosta 2/2003, jonka nettijatkoista löydät css-oppaita ja ohjeita, joilla pääset sukeltamaan tyylien maailmaan.
Esimerkkikuvat
Alla lehdessä kerrottujen pakkausmenetelmien esittelykuvia.
Vaaka: 664 tavua |
Pysty: 1,26 kt |
Tässä sama 16-värinen gif-kuva ensin vaakatasossa ja sitten käännettynä 90 astetta vastapäivään. Vaakaviivoja sisältävä kuva on kooltaan alle puolet pystyviivoja sisältävästä. Tämä johtuu gif-kuvan pakkaustekniikasta, joka toimii tehokkaammin vaakasuorille kuvioille.
Jpg-kuvat soveltuvat erinomaisesti valokuvapakkaukseen. Alla pari linkkiä kuviin, jotka on pakattu eri tekniikoilla. Tutki kuvia tarkasti, niin huomaat erot. Todellinen ero tulee kuitenkin tiedostokoossa, jpg-pakattu valokuva on vain murto-osia muiden kuvamuotojen pakkauksesta. Kuva on kooltaan 460 x 345 kuvapistettä, alkuperäinen tiff-kuva oli pakkaamattomana noin 620 kilotavua.
Huomaa erityisesti gif-kuvan rakeisuus. Png on kuvanlaadultaan parempi, mutta tiedostokoko on valtava jpg:iin verrattuna, eikä ihmissilmä juurikaan näe eroa kuvien välillä.
Hiukan suuremmalla pakkausasteella JPEGin hävittävä pakkausmetodi tulee paremmin esiin. Alla yksityiskohta png-tiedostosta ja vastaavasti jpg-tiedostosta.
Vasemmalla png-kuva, jossa ei ole havaittavissa pakkausta ja oikealla jpeg-kuva, jossa varsinkin kukan terälehtien ympärillä on nähtävissä jpeg-pakkauksen aiheuttamia neliömuodostelmia.
Png-kuvien tuki on Internet Explorerissa vasta aluillaan. Se on harmi, koska png:stä on tulossa erinomainen kuvamuoto. Alla pari esimerkkiä osoitteesta www.libpng.org/pub/png/pngs-img.html.
Vasemmalla Internet Explorerin näkemys 256-värisen png-kuvan osittaisesta läpinäkyvyydestä ja oikealla sama kuva Mozilla 1.3a:lla. Alla hiukan räikeämpi esimerkki. Vasemmalla Internet Explorerin näkemys kirsikkapuusta ja oikealla Mozillan.
Lisätietoja png:stä löydät osoitteesta www.libpng.org/pub/png/.
Lisää tutkittavaa
Gif-kuvamuodon vastustajat ovat välillä melko fanaattisia. Täällä muutama perustelu sille, miksi gif-kuvat pitäisi unohtaa.
burnallgifs.org
Png-kuvamuodon viralliset sivut. Täältä löytyy vastaus jokaiseen kysymykseen, joka sinulla on png-formaatista.
www.libpng.org/pub/png/
Png:tä tukevat selaimet löydät tästä osoitteesta.
www.libpng.org/pub/png/pngapbr.html
Suomalaisen Lasse Kärkkäisen ylläpitämillä sivuilla näytetään esimerkein miten ja missä selaimissa png-kuvat oikeasti toimivat, sekä kerrotaan png-kuvien ominaisuuksista. Linkkien ja hyödyllisten ohjelmistovinkkien lisäksi sivuilla käsitellään myös useita muita aiheita, kuten ohjelmointi- ja rakenteluasiaa.
iki.fi/trn/?pics
takaisin
