Sopivat kuvakoot verkkosivuille

Selvitä oman asettelusi tarvitsema kuvakoko

Selvitä sivulla olevan kuva-alueen leveys koko selainikkunan leveyden sijaan. Aloita teeman tai kuvalohkon suosittelemista mitoista. Jos niitä ei ole saatavilla, tarkista kuvan näyttöleveys selaimen tarkastelutyökalulla tai pyydä sivuston ylläpitäjää selvittämään se puhelimella ja tietokoneella. Huomioi myös mahdollinen suurempi galleria- tai zoomausnäkymä.

Kun kuva näkyy 720 pikseliä leveänä, vertaa 720 ja 1440 pikseliä leveitä versioita. Suurempi versio voi näyttää terävämmältä tarkalla näytöllä, mutta arvioi, ovatko lisäyksityiskohdat suuremman tiedoston arvoisia. Käytä riittävän suurta alkuperäistä: 900 pikselin kuvan suurentaminen 1440 pikseliin ei palauta puuttuvia yksityiskohtia.

Valitse kokeiltavat kuvakoot käyttökohteen mukaan

2400 pikseliä leveä kansikuva ei ole automaattisesti oikea jokaiselle kävijälle. Puhelin voi tarvita pienemmän version tai eri rajauksen. Tuotteen zoomaus voi puolestaan tarvita tavallista tuotekorttia suuremman, erikseen ladattavan kuvan.

Erota pikselit tiedostokoosta

Kuvan mitat kertovat sen leveyden ja korkeuden pikseleinä, esimerkiksi 1200 × 800. Tiedostokoko kertoo, kuinka paljon tilaa kuva vie, esimerkiksi 200 kt tai 2 Mt. Samankokoiset kuvat voivat tuottaa hyvin erikokoisia tiedostoja yksityiskohtien, kuvamuodon ja pakkauksen vuoksi.

CSS-pikseli on kuvan sivulla näkyvän koon mittayksikkö. Tiheäpikselisellä näytöllä yksi CSS-pikseli voi käyttää useita näytön fyysisiä pikseleitä. Siksi terävä kuva saattaa tarvita enemmän kuvapikseleitä kuin sen sivulla näkyvä leveys.

Aloita asettelusta. 600 CSS-pikselin levyisenä näkyvä kuva ei yleensä tarvitse samaa lähdettä kuin suuren työpöytänäytön täyttävä kuva. Tiheäpikselinen näyttö voi hyötyä CSS-leveyttä suuremmasta pikselimäärästä. Arvioi, onko lisätarkkuudesta hyötyä suhteessa suurempaan tiedostokokoon.

Pidä kuvasuhde tarkoituksenmukaisena

Pidä koonmuutostyökalussa kuvasuhteen lukitus päällä ja syötä 3000 × 2000 pikselin alkuperäiselle leveydeksi 1200 pikseliä. Korkeudeksi tulee automaattisesti 800. Molempia mittoja ei tarvitse laskea ja syöttää itse. Tarkista, että kasvot ja ympyrät säilyttävät muotonsa.

Jos leveästä kuvasta tarvitaan neliö, rajaa sen sijaan että litistäisit. Käytä rajaustyökalua ja pidä kohde pienelläkin näytöllä näkyvällä alueella. Suurentaminen ei luo yksityiskohtia, joita alkuperäinen ei sisältänyt.

Tarjoa asettelun tarvitsemat kokoversiot

Sivun koodissa voidaan tarjota useita kuvakokoja, joista selain valitsee sopivan. Leveyteen perustuvat srcset ja sizes kuvaavat saatavilla olevat leveydet ja näyttötilan; ne eivät luo kuvatiedostoja. Toteutusesimerkkejä on MDN:n responsiivisten kuvien oppaassa.

Tarkista, luoko julkaisujärjestelmäsi eri kuvakoot ja lisääkö se tarvittavat viittaukset sivun koodiin. Jos ylläpidät staattista sivustoa, tallenna tarvittavat kuvakoot ja lisää niiden viittaukset sivun koodiin. Pelkkä kolmen kuvatiedoston lisääminen palvelimelle ei riitä, jos sivu ei osaa käyttää niitä.

Valitse sivullesi sopiva kuvien kokonaiskoko

Testaa edustavia kuvia ja koko sivua. Kahdentoista tuotekortin kuvat kuormittavat sivua eri tavalla kuin yksi yksityiskohtainen portfoliokuva. Mikään yksittäinen kokoraja ei takaa nopeaa latausta tai hyvää laatua.

1. Tarkista kuva oikeassa näyttökoossa.
2. Vertaa pienempiä mittoja ja tehokkaampaa kuvamuotoa.
3. Tarkista ladattujen kuvien tiedostokoot ja näkyvät yksityiskohdat.
4. Testaa sivu mobiilissa ennen asetuksen uudelleenkäyttöä.

Erota kansikuvat, tuotekuvat ja pikkukuvat

Leveän kansikuvan sommittelun pitää toimia myös kapealla näytöllä. Jos reunassa oleva kohde katoaa, tee mobiiliin oma rajaus venyttämisen sijaan. Tuotekuva voi tarvita erillisen suuren version yksityiskohtien tarkasteluun, mutta sitä ei tarvitse ladata jokaiseen pieneen tuotekorttiin. Neliömäinen pikkukuva taas tehdään rajaamalla, ei puristamalla vaakakuvaa neliöksi.

Kirjaa jokaiselle käyttökohteelle kuvasuhde, suurin näyttöleveys, kokeiltavat kuvakoot ja yksityiskohta, jonka on säilyttävä luettavana. Tarkista asetukset teeman vaihtuessa. Jos puhelin lataa edelleen suurimman tiedoston, tutki sivun eri näyttökokoihin tarkoitettuja kuvaviittauksia. Uusi pieni tiedosto ei auta, ellei sivu käytä sitä.