Kuvan mitat näytöllä mitataan pikseleissä: leveys ja korkeus.

Kuvan laatu määräytyy vähemmän konkreettisten tekijöiden - koostumuksen, mielialan, tyylin ja sisällön perusteella. Mutta mikään ei ole väliä, jos ihmiset kärsivät kärsimättömästi tiedostojen lataamisesta.

Web-kuvat muuttuvat tiedostokokoon pakattuna. Pienemmät tiedostot latautuvat nopeammin, mikä parantaa selailukokemusta.

Mutta selkeät kuvat tekevät paremmasta kokemuksesta. Kuinka paljon - ja millaisen pakkauksen pitäisi hakea? Onko olemassa vaihtoehtoja näille sotkuisille kompromisseille?

Tässä tarkastelemme yllättäviä tosiasioita web-kuvatiedostojen valmistelusta .

Sivut latautuvat nopeasti, mikä on tärkeää kävijöiden huomion säilyttämiselle. He ovat heikkoja ihmisiä näistä käyttäjistä, helposti pettyneitä, jos he eivät saa välitöntä tulosta. Kun he napsauttavat linkkiä, he haluavat kohteen heti.

Yksi verkkosivujen suurimmista pullonkauloista on kuvien koko ja määrä. Ilmeinen ratkaisu on käytä vähemmän kuvia . Mutta muut tekniikat voivat auttaa meitä saamaan kaiken irti jokaisesta kuvapisteestä.

Pikselit ovat tietoja

Vanha klisee, jonka kuva on tuhannen sanan arvoinen, on totta. Ajattele pikseliä (lyhyt "kuvaelementti") tiedon yksikkönä.

Enemmän pikseleitä tarkoittaa enemmän tietoja, jotka vaikuttavat kuvan katseluun ja resamplingiin. Aivan kuten useammat sanat voivat tehdä kappaleen kuvailevampaa, useampi pikseli voi tehdä kuvan informatiivisemmaksi. (Tietenkin oikeiden sanojen käyttäminen johtaa parempaan kappaleeseen, aivan kuten oikeiden pikseleiden käyttäminen johtaa parempaan kuvaan.)

kaavio siitä, kuinka vähemmän kuvapisteitä kerrotaan vähemmän tarinaa

Photo courtesy of Jan Busby .

Pienet kuvat eivät vie vain vähemmän tilaa - he kertovat vähemmän tarinaa. Yllä, sama kuva kolmessa eri koossa muuttuu asteittain vaikeammin "lukea".

Suurin kuva osoittaa selvästi mallin silmäripset, hampaat ja hiusnauhat. Keskikokoinen valokuva menettää nämä yksityiskohdat. Kuinka kauan ne ripset ovat? Hän hymyilee? On vaikea kertoa. Pienin valokuva muistuttaa edelleen henkilöä, mutta vain hieman mielikuvitusta. Kuva ihmiskasvosta alle 400 pikseliä on yleensä tuntematon.

Vaikka pieniä kuvia on vaikeampi nähdä, niiden koko ei aina ole ongelma. Yksinkertaisilla viesteillä yksinkertaiset kuvakkeet eivät tarvitse useita pikseleitä. Monta pikseliä saatetaan tarvita henkilön muotokuvan esittämiseen: heidän ilmaisunsa, ominaisuutensa, vaatteensa ja taustansa. Mutta pienoiskuva linkki seuraavaan muotokuvaan sarjassa on vain yksi asia sanottavaa.

Kysymys kuuluu, mikä on vähiten pikseleitä, joita tarvitaan kommunikointiin. "Napsauta tätä nähdäksesi seuraavan kuvan"?

kaavio siitä, kuinka ylimääräisiä pikseleitä ei tarvita

Ylhäällä jokainen nuoli viestii "Seuraava". Grafiikat A ja B ovat molemmat hyvin luettavia ja välittävät saman viestin, mutta graafinen A käyttää neljä kertaa niin monta pikseliä kuin sama.

Toisessa päädyssä graafinen E ei ole nuoli niin harmaaksi kuin mustaksi. Sillä ei ole riittäviä pikseleitä (eli tarpeeksi tietoa), jotta se olisi tunnistettava muoto.

Jos grafiikka A ja B käyttävät tarpeellisempia pikseleitä ja E ei pysty kommunikoimaan, grafiikka C ja D ovat juuri tarpeeksi pikseleitä, jotka osoittavat oikealle osoittavaa muotoa. Kuusikymmentäneljä pikseliä vain tuskin riittää luomaan nuolen muotoa (tai pelaamaan Space Invadersia).

Tavoitteena kuvan koon määrittämisessä on sen vuoksi tarpeeksi suuri tiedostokoon kertoa tarina ja tarpeeksi pieni ladata nopeasti.

Ihanteellisen tiedostokoon löytäminen

Monet tekijät vaikuttavat lukemiseen (tai kuvapisteissä ilmaistujen tietojen selkeys): kontrasti, aihe, valokuvaaja tai taiteilijan kokemus, valaistus, yksityiskohta, taustamelu ja käytettävissä oleva tila sivulla. Nämä kaikki määrittävät, kuinka pieni tai suuri kuva pitäisi olla.

kuva, jossa näytetään missä laatu ja tiedostoko täyttävät

Loppujen lopuksi oikean kuvan koko valitseminen on tuomiopuhelu. Mutta pakkaaminen on enemmän kuin kuvanvaihdon ja tiedostokoon välinen kompromissi. Ymmärtää, miten erilaiset pakkaustyöt voivat vaikuttaa kuvasi valmisteluun.

Teknisesti digitaalinen kuva on joukko pikseleitä, jotka on järjestetty ruutuun, jota kutsutaan bitmapiksi. Suorassa pakkaamattomassa bittikartassa jokaisella pikselillä on oma kuvaus: pikseli # 1 on tietty sekoitus punaista, vihreää ja sinistä; pikseli # 2 on erilainen sekoitus; ja niin edelleen.

Pakkausalgoritmit rekonstruoivat bittikartan käyttäen vähemmän tietoa kuvaamaan sama määrä pikseleitä. Useimmat verkossa olevat kuvat kuuluvat yhteen kahdesta puristustyypistä: JPG tai LZW (Lempel-Ziv-Welch, jonka nimi on sen keksijät).

LZW-osoitteet sekä kuvanlaatu että tiedoston koko

GIF ja 8-bittiset PNG- kuvat käyttävät LZW-pakkausta tiedoston koon minimoimiseksi. LZW ryhmittelee identtiset värit kuviossa riviä kohden.

Tässä tiedostossa on tarkka luettelo jokaisesta väristä. Sen sijaan, että tallennat punaisten, vihreiden ja sinisten arvot kuhunkin vierekkäiseen pikseliviivaan, tämä väripaletti sallii tiedoston kutsun "värille # 1".

kaavio, joka osoittaa, kuinka LZW-pakkaus säästää tilaa

Edellä, LZW-pakkaus määrittää värit peräkkäin 15 pikseliä. Ilman LZW-pakkausta jokainen pikseli tarvitsisi omat väritiedot. Redundantti tieto lisää tiedoston kokoa. Mutta LZW on tehokas vain, kun rivillä on useita peräkkäisiä samanlaisia ​​värejä.

kaavio siitä, miten LZW-pakkausta käytetään tehokkaammin

Yllä olevassa kuvapisteiden yläryhmässä on useita keskeytyksiä. Puristusalgoritmi ei voi ylittää kahta tai kolmea pikseliä ilman uuden värisarjan luomista. Koska jokainen ryhmä on tallennettava tiedostoon, GIF- ja PNG-tiedostoissa luodaan kahdeksan tietuetta.

Toinen ryhmä on paljon parempi: vain neljä ryhmää samanaikaisia ​​värejä tarkoittaa puolet niin monta tietuetta GIF- tai PNG-tiedostossa.

Tämän seurauksena GIF-puristus toimii paremmin vaakatasossa kuin pystysuunnassa. Jos sinulla on valintasi, tee tiedot horisontaalisesti. Tämä on tärkeämpää kuin koko ulottuvuus: kapea kuva vaakasuuntaisilla raidoilla pyrkii pakottamaan paremmin kuin laaja kuva pystysuorilla raidoilla. LZW-puristuksella nämä tiedot lasketaan.

kaavio siitä, miten LZW-puristus käsittelee kahta raidallisesta kuvaa

Yllä, säästäminen GIF: ssä tekee suuren eron, kun kuvaa käännetään 90 °: vaakasuuntaiset raidat vaativat vain 16% pystysuuntaisista raidoista vaadituista tavuista.

LZW: n sanotaan olevan "häviötön", koska muoto itse ei muuta kuvaa. JPG on erilainen.

JPG-klusterit ovat monimutkaisia ​​yksityiskohtia

JPG toimii parhaiten eläville valokuville, koska se on suunniteltu. Tämä pakkaussuunnitelma kokoaa pikseleitä ryhmiin, jotka ovat noin 8 × 8, sekoittamalla värejä hieman.

Lisää pakkaamista tarkoittaa, että pikselit 64-pikselin kudoksessa muuttuvat samankaltaisiksi. Sitten JPG yrittää yhdistää neljä 8x8 pikselin ryhmää toisiinsa. Sitten se ryhmittelee nämä ryhmät toiseen 2 × 2: ään, ja niin edelleen. Tätä tekniikkaa kutsutaan "lossy" -tiedostoksi, koska se tuo muutoksia tiedostoon.

Muutoksia, joita JPG-pakkaus tuo kuviin, kutsutaan esineiksi. Luonnollisesti useampia esineitä tekevät paremmasta pakkauksesta, mutta heikommasta kuvanlaadusta.

esimerkki JPG-esineistä, jotka rikkovat kunnon maisemakuvan

Yllä, JPG tallennettu 0%, tai koko pakkaus, tekee sen clumpy esineitä ilmeinen. Kovat reunat ja terävä kontrasti ovat JPG: n ensimmäiset merkit. Esimerkiksi vuoren reunalla pilviä vastaan ​​menettää tarkennuksen, ja oikea varjo "hyppää" lähimpään kätevään 8 × 8 -kokoonpanon reunaan.

Onneksi useimmat valokuvat säilyttävät tarpeeksi tietoa ongelman minimoimiseksi. Ihmiset ovat hyviä tunnistamaan muodot, vaikka muodot hieman vääristyvät.

Photoshopin 19% temppu

Tässä on vinkki Photoshop-käyttäjille: Photoshopin "Save for Web" -ominaisuudella on kaksi osaa, jotka vaihtavat yhtäkkiä pakkausta. Kuva → Tallenna Webille voit valita pakkauksen määrän prosentteina: 0% on pienin tiedostokoko, 100% korkein. Laatu- ja tiedostokoon ero on huomattavampi 19-20%.

infographic, joka osoittaa, kuinka Photoshop pakkaa alle 19%

Huomaa äkillinen pudotus tiedostokokoon yllä olevassa kuvassa. Jos kuvan laatu ei ole sinulle tärkeämpää kuin latausaika, pakkaus enintään 19% saavuttaa parhaan mahdollisen laadun pienimmälle koolle. Mutta jos kuvan laatu on tärkeämpää, tallentaminen JPG: llä vähintään 20 prosentilla saa pienimmän koon parhaan laadun mukaan. Löydät samanlaisen pisteen noin 30: sta 32 prosenttiin, vaikkakin vähemmän rajua.

Eroja tässä 100 × 100 kuvassa ovat vain muutamia tavuja. Mutta säästöt lisääntyvät, varsinkin suuremmissa valokuvissa.

CSS Sprites

Tiedostojen on oltava kaikkien palvelimelta pyydettäviä web-sivujen kuvia. Nämä pyynnöt antavat palvelimelle lisätyötä. Jos sinulla on esimerkiksi useita pieniä kuvakuvakkeita - joilla on samanlainen väripaletti, CSS-spritit voivat parantaa latausaikaa.

CSS sprite on yksittäinen tiedosto, joka sisältää monia kuvia siinä. Käyttämällä width , height ja background-position CSS: n ominaisuudet, voit tehdä viipaleita tiedostosta div, linkit ja muut HTML-elementit. Joten yksi tiedosto täyttää useita rooleja sivulla. Hyöty? Vain yksi tiedosto ladattavaksi. Haitta? Se vaatii vähän suunnittelua.

Lisää jotain täällä

Vahvistettu

Peruuttaa

Anteeksi pääsyn estetty

Seuraava sivu

Muokkaa kuvaa

Käynnistää

Vihreä merkki


Edellä olevat kuvakkeet (ja tässä virkkeessä olevat) tulevat vain yhdestä tiedostosta: CSS sprite -esimerkki . CSS tuo kuvan ja sen mitat a , mutta jokainen elementti on asetettava uudelleen paikalleen sopivaksi. Käyttämällä :hover näennäisvalitsin tekee matemasta ponnistelun arvoista, koska spritit voivat parantaa yhteyksiä ja muita elementtejä hiirellä. Kokeile alla:

Kuten näette, samassa kuvassa on kaksi tilaa neljästä kuvakkeesta. Ainoa temppu on valmistaa graafinen tiedosto etukäteen ja kuvata kunkin kuvakkeen koordinaatit.

näyte CSS sprite kahdeksalla kuvakkeella

("Silk" kuvakkeet kohteliaasti FamFamFam .)

Tämän kirjoittamisen jälkeen molemmat Yahoo! ja Amazon käytä sprittejä usein ladatuille navigointikartoille.

Oikean tiedostokoon valitseminen

Kuvan jokainen pikseli ei ole kriittinen, mutta suunnittelijan laiminlyönti tiedostokokoa kasvattaa usein sivun kuvien määrää.

Kuva, joka voi olla 5% pienempi, ei ole huolta. Kaksi kuvaa ei ole paljon enemmän huolta. Mutta entä viisi kuvaa? Kymmenen? Missä vaiheessa suunnittelija alkaa olla huolissaan kuvan pakkaamisesta? Jokaisella on erilainen kynnys. Jotkut eivät välitä lainkaan.

Huolestuttavaa on vaikea tehdä, kun muutama ekstra kilotavua ei ole seurauksia. Kompressoinnin huomiotta jättäminen on kuitenkin vähitellen vakavampi ongelma, joka hidastaa sivustoja ja ajaa kävijöitä pitkällä aikavälillä.


Kirjoittanut yksinomaan Webdesigner Depot - Ben Gremillion . Ben on freelance-web-suunnittelija, joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.

Mitä tekniikoita käytät, jotta saat kaiken irti verkkokuvastasi? Kuinka todennäköistä on, että käytät aikaa ylimääräisten tavujen ajamiseen? Jaa ajatuksesi alla oleviin kommentteihin.