Responsiiviset komponentit: kuvat

14 touko 2013 • Teknologia ja digitaalinen kehitys

Olen jo aiemmin käsittellyt responsiivisen designin perusperiaatteet, navigaation ja taulukot. Tällä kertaa vuorossa ovat responsiiviset kuvat. Responsiivisen designin perusperiaatteisiin kuuluu <img>-elementille määritettävä max-width: 100% arvo. Tämän ansiosta kuva skaalautuu mukavasti eri kokoisille näytöille. Ratkaisuna tämä toimii oivasti, mutta ei kuitenkaan ole optimaalinen.

Adaptive Images

Miksei ratkaisu sitten ole optimaalinen? Siksi koska kaiken kokoisille näytöille tarjotaan saman kokoinen kuva, jonka leveys määrittyy lopulta CSS:n avulla. Tämä tarkoittaa sitä, että esimerkiksi pienillä mobiilinäytöillä kuvasta saatetaan ladata aivan liian iso kuva, joka sitten skaalautuu max-width -säännön perusteella oikeaan kokoon. Isojen kuvien lataaminen taas erityisesti hitailla nettiyhteyksillä on hermoja raastavaa. Tämän takia kannattaakin miettiä, voisiko asialle tehdä jotakin. Tästä kohtaa kuvaan astuu Adaptive Images ratkaisu, jonka avulla kuvat saa optimoitua eri kokoisille näytöille.

Adaptive Images toimii hyvin yksinkertaisella periaatteella. Ratkaisu tunnistaa käyttäjän näytön koon ja tämän perusteella skaalaa sopivan kokoiset kuvat käyttäjän näytölle. Skaalattavat kuvat totta kai välimuistitetaan niin, ettei niitä tarvitse joka kerta luoda uudestaan.

Muut ratkaisut

Erilaisia ratkaisutapoja responsiivisiin kuviin on useita kymmeniä. Miksi sitten käyn läpi vain Adaptive Images ratkaisua? Koska se on tällä hetkellä mielestäni käyttökelpoisin ratkaisu. Monet muut ratkaisut ovat idealtaan mukavia, mutta niissä on useimmiten erilaisia kommervenkkejä, joiden myötä ratkaisu monimutkaistaa joko koodarin työtä tai erityisesti sisällönhallinnasta vastaavan työtä.

Monet muut ratkaisut tukeutuvat esimerkiksi siihen, että kuvan <img>-elementille pitää lisätä attribuutteja, joita ei normaalisti kuville anneta. Sisällönhallintajärjestelmää käytettäessä tämä tarkoittaa esimerkiksi sitä, että kyseinen attribuutti pitäisi lähes aina lisätä käsin editorin HTML-näkymässä. Käyttäjät haluavat välttää HTML-editoria viimeiseen saakka, eikä se ole mikään ihme, jos HTML ei ole yhtään tuttua. Tämän myötä käytettävien tekniikoiden joukosta tippuu jo hyvin suuri osa pois (ks. kohta Special markup) kun ajatellaan käytettävyyttä. Adaptive Images sen sijaan toimii niin ettei käyttäjän tarvitse miettiä koko kuva-asiaa ollenkaan. Sen kun lisää kuvan editorin kautta ja ratkaisu hoitaa kaiken muun automaattisesti. Esimerkiksi käytettävällä sisällönhallintajärjestelmällä ei ole mitään merkitystä.

Asennus

Mikä parasta Adaptive Images ratkaisun voi ottaa käyttöön myös olemassa olevilla sivustoilla ilman että esimerkiksi kuvien HTML-koodiin tarvitsee tehdä jotakin muutoksia. Ratkaisu hyödyntää PHP-skriptiä, joka hoitaa kuvien skaalauksen. Tämän myötä palvelimelta tulee löytyä PHP 5.x ja PHP-GD-kirjasto. PHP-GD tulee yleensä PHP:n mukana. Tämän lisäksi Apacheen tai Nginx web-palvelimeen tulee asettaa uudelleenohjaus, joka ohjaa kuvat kyseiseen PHP-skriptiin.
Esimerkiksi Apachessa

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

Tai Nginx:ssä

rewrite \.(?:jpe?g|gif|png)$ adaptive-images.php;

Jos haluaa ottaa myös huomioon tarkat retina-näytöt, tällöin sivuston-osaan tulisi laittaa seuraava JavaScript määritys ennen mitään muita JavaScript määrityksiä. Seuraava määritys kirjoitetaan yhteen, mutta se on jaettu useammalle riville,jotta selain pystyy pienillä näytöillä rivittämään koodiesimerkin oikein.

document.cookie='resolution='
+Math.max(screen.width,screen.height)
+("devicePixelRatio" in window ? ","
+devicePixelRatio : ",1")+'; path=/';

Itse advanced-images.php skriptissä on alussa muutamia konfiguroitavia arvoja. Resolutions kohtaan tulisi laittaa kaikki CSS:ssä määritetyt breakpointit. Breakpointteja ovat siis kohdat, joihin on määritetty omat media query säännöt. Tämän lisäksi cache_path -muuttujaan tulisi määrittää hakemisto, johon välimuistitettavat kuvat tallennetaan. Näiden lisäksi on vielä mahdollista määrittää skaalattavan kuvan laatu (jpeg_quality), käytetäänkö kuvia skaalatessa kuvan terävöitystä (sharpen), päivitetäänkö kuvat automaattisesti, jos alkuperäinen on muuttunut (watch_cache) ja kuinka pitkäksi aikaa kuva välimuistitetaan selaimen toimesta (browser_cache).

Mitä sitten kun yllä olevat on tehty? Sitten testataan, toimiiko homma. Tämä onnistuu helpoiten menemällä sivulle mobiililaitteella ja katsomalla ilmestyykö välimuistihakemistoon uusia tiedostoja. Jos ei ilmesty niin sitten joku on vikana, tai ladatulla sivulla ei ollut kuvia, joita olisi tarvinnut skaalata. Kannattaa huomioida, että skripti tarkkailee nimenomaan näytön kokoa. Jos siis selaimen kokoa pienentää esim. työpöytäkoneella, tällä ei ole mitään vaikutusta, koska selaimen koko ei vaikuta skriptin toimintaan.

Rajoitukset

Kuvatussa ratkaisussa on muutamia rajoituksia. Ensinnäkin skripti on tehty PHP:lla. Sitä ei ole muilla kielillä saatavilla ainakaan toistaiseksi. Tämä pakottaa siis asentamaan PHP:n palvelimelle, vaikka kaikki muut järjestelmät ja sovellukset eivät välttämättä PHP:ta tarvitsisikaan.

Kuvien hakeminen tapahtuu tässä tapauksessa aina PHP:n kautta. Tämä vie enemmän resursseja palvelimelta kuin se, jos kuvat tarjottaisiin suoraan ilman PHP:ta. Jos siis liikennettä on paljon, tällöin ratkaisun käyttäminen saattaa vaatia lisätehoja ympäristöltä. Ratkaisu ei myöskään toimi ollenkaan, jos käytössä on CDN (Content delivery network), joka tarjoilee sivuston staattisen sisällön.

Tulevaisuus näyttää, miten responsiivisten kuvien ratkaisut kehittyvät. Adaptive Images tuskin tulee olemaan muutaman vuoden päästä enää paras ratkaisu, mutta tällä hetkellä se tarjoaa parhaimman paketin erityisesti käytettävyyden näkökulmasta. Adaptive Images ratkaisun skriptin voi ladata ilmaiseksi joko sen kotisivuilta tai GitHubista.
Photo.

Jaa artikkeli