Responsiiviset kuvat: oikea kuvakoko puhelimelle ja tietokoneelle

Aloita sivuston muokkausnäkymästä

Tarkista WordPressissä tai verkkosivutyökalussa ensin, miten nykyinen kuvalohko toimii. Sivusto saattaa jo luoda pienemmät versiot yhdestä ladatusta kuvasta.

1. Lataa terävä alkuperäinen, jossa riittää yksityiskohtia suurimpaan tarvitsemaasi näkymään.
2. Valitse lohkossa sopiva kuvan resoluutio, jos asetus on käytettävissä. Lohkon kaventaminen ei välttämättä muuta ladattavaa kuvatiedostoa.
3. Esikatsele sivu puhelimella ja tietokoneella. Tarkista rajaus, pienet tekstit ja kuvan terävyys.

Sivuston ylläpitäjä voi varmistaa, että sivu lataa sopivat kokoversiot. Jos muokkaat HTML:ää itse, alla olevat esimerkit näyttävät, miten yhdistät tekemäsi kuvatiedostot sivuun.

Mitä responsiiviset kuvat tarkoittavat?

Responsiivinen asettelu mukauttaa sivun näyttöön. Responsiivinen kuvien lataaminen muuttaa sitä, minkä kuvatiedoston selain pyytää. Nämä ovat eri tehtäviä: kuvan pienentäminen CSS:llä ei välttämättä vähennä ladattavan tiedoston kokoa.

Jos 3000 pikseliä leveä kuva näkyy pienessä kortissa, kävijä voi silti ladata koko tiedoston, ellei sivu tarjoa vaihtoehtoja. Responsiiviset kuvat antavat selaimelle käytettävään tilaan sopivia versioita. Näin tiedonsiirtoa voidaan vähentää pitäen tärkeät kuvat selkeinä.

Valittavana on kaksi lähestymistapaa. Tarkkuuden vaihtaminen säilyttää sommittelun mutta tarjoaa eri pikselimittoja. Rajauksen vaihtaminen muuttaa sommittelua, kun leveä kuva ei toimi kapeassa asettelussa. MDN:n responsiivisten kuvien opas selittää eron.

Näytön leveys, näyttökoko ja kuvan pikselit

Selvitä ensin kuvalle sivulla varatun tilan leveys CSS-pikseleinä. Puhelimen näkymä voi olla 390 pikseliä leveä, mutta 16 pikselin marginaalit molemmin puolin jättävät kuvalle 358 CSS-pikseliä. Tietokoneen kolmen sarakkeen ruudukossa kuva voi olla vain 320 CSS-pikseliä leveä.

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.

Toinen tekijä on näytön pikselitiheys. Suunnittelun lähtökohdaksi voit kertoa kuvan näyttöleveyden laitteen pikselisuhteella. 358 CSS-pikselin alue 2×-näytöllä tarvitsee tämän arvion mukaan noin 716 kuvapikseliä. Tämä auttaa kuvaversioiden tekemisessä mutta ei lupaa, minkä tiedoston jokainen selain valitsee.

Tietokonenäyttö ei siis automaattisesti tarkoita suurimman tiedoston tarvetta. Toisaalta hyvin pienen kuvan tarjoaminen kaikille puhelimille voi näyttää pehmeältä tiheäpikselisellä näytöllä. Tarkista kuvalle varattu tila ja näkyvä lopputulos.

Näin luot hyödylliset kuvakoot

1. Selvitä suurin tarvittava näyttöleveys. Tarkista sivun sisältösarake tai kortti, älä koko näyttöä.
2. Valitse tarpeita edustava joukko leveyksiä. Enintään 800 CSS-pikselin artikkelikuvalle esimerkiksi 400, 800, 1200 ja 1600 pikselin versiot ovat järkevä ensimmäinen kokeilu. Tämä on esimerkki, ei kaikkien sivustojen vaatimus.
3. Tee versiot samasta alkuperäisestä. Käytä Pixilon koonmuutostyökalua ja säilytä kuvasuhde, kun vaihdat vain tarkkuutta. Pidä alkuperäinen tallessa.
4. Vertaa kuvamuotoa ja laatua. Kokeile WebP:tä tai JPG → AVIF / PNG → AVIF / WebP → AVIF, kun julkaisutapasi tukee niitä. Varmista, ettei tiedostokoon säästö johdu epäselvästä tekstistä tai kadonneista yksityiskohdista.
5. Julkaise tiedostot ja liitä ne sivuun. Pixilon koonmuutos tekee kuvatiedostot; se ei määritä verkkosivusi HTML:ää, sisällönhallintaa tai CDN:ää.
6. Tarkista julkaistu sivu. Varmista selaimen pyytämä tiedosto, sen mitat ja ulkoasu eri näyttöleveyksillä.

Älä suurenna pientä alkuperäistä vain tavoiteluvun saavuttamiseksi. Suurentaminen ei palauta todellisia yksityiskohtia. Jos lähde ei riitä suureen esityskokoon, näytä se pienempänä tai hanki tarkempi alkuperäinen. Opas koon muuttamisesta ilman venyttämistä auttaa kuvasuhteen säilyttämisessä.

Mitä tarkistaa WordPressissä tai muussa sisällönhallinnassa?

Julkaisujärjestelmä voi jo luoda useita kuvakokoja ja lisätä responsiiviset määritykset. Tutki lopullinen sivu ennen rinnakkaisen käsin ylläpidettävän toteutuksen tekemistä. Tarkista, sopivatko luodut koot teeman kuva-alueisiin ja tukeeko koko kuvankäsittelyketju valittua muotoa.

Kuvalisäosa tai CDN voi muuntaa tiedostoja pyynnöstä. Varmista silloin selaimen saama tiedosto sen sijaan, että luottaisit alkuperäisen tiedoston nimeen. Lähteen vaihtamisen jälkeen välimuisti voi tarjota vanhoja versioita. Varmista uuden kuvan latautuminen ennen tuloksen arviointia.

WordPressin käytännön vaiheita käsittelee WordPress-kuvien optimointiopas. Tavoitteena on ennakoitava tapa toimittaa kuvat niin, että jokaisella osalla on selkeä tehtävä.

Valinnainen: srcset ja sizes HTML:ssä

Seuraava esimerkki kuvaa artikkelikuvaa, joka täyttää näkymän lukuun ottamatta yhteensä 32 pikselin sivumarginaaleja. Suurin näyttöleveys on 800 CSS-pikseliä. Tiedostonimet ovat esimerkkejä: julkaise omat versiosi ja käytä niiden oikeita polkuja ja mittoja.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Kallioinen rannikko tyynen sinisen meren äärellä">

w-arvojen pitää vastata tiedostojen todellisia pikselileveyksiä. sizes kertoo arvioidun näyttöleveyden ja auttaa selainta valitsemaan version. Se ei määrää kuvan näkyvää leveyttä. CSS:n pitää edelleen toteuttaa kuvattu asettelu.

Tässä esimerkissä enintään 800 pikselin säiliö ja kuvan CSS-asetukset display: block; width: 100%; height: auto; toteuttavat tarkoitetun skaalauksen. Älä kopioi esimerkin sizes-arvoa korttiruudukkoon, jonka asettelu on erilainen. Jos kuvaat pienen tietokoneella näkyvän kortin arvolla 100vw, selain voi ladata tarpeettoman suuren tiedoston.

Selain voi huomioida valinnassa pikselitiheyden ja muita olosuhteita, joten tavoittele sopivaa versiota, älä yhtä taattua tiedostonimeä. Älä yhdistä samaan lähdeluetteloon leveysarvoja ja pikselitiheyden arvoja, kuten 2x. MDN:n srcset-ohje selittää niiden säännöt.

Milloin puhelin tarvitsee erilaisen rajauksen?

Leveä banneri voi jäädä puhelimella niin matalaksi, että kohde näkyy pienenä terävyydestä huolimatta. Pikselien lisääminen ei korjaa sommittelua. Tee tiukempi rajaus, joka pitää kohteen esillä, ja valitse se picture-elementin näyttöleveyteen perustuvalla ehdolla.

Valmistele vaihtoehto rajaustyökalulla harkiten. Säilytä riittävästi ympäristöä kuvan ymmärtämiseksi. Tarkista mahdollisen kuvan päälle tulevan tekstin paikka: yksinään hyvältä näyttävä rajaus voi asettaa kohteen painikkeen tai otsikon alle.

Eri rajaukset lisäävät ylläpidettävää, sillä jokainen sommittelu pitää tarkistaa. Käytä niitä, kun kapea asettelu todella tarvitsee vaihtoehdon. Jos rajausten kuvasuhteet eroavat, huomioi ero asettelussa ja varaa oikea tila kussakin näyttökoossa. picture-elementin ohje selittää lähteen valinnan.

Mitat, viivästetty lataus ja sivun pääkuva

Anna oikeat width- ja height-arvot, jotta selain tietää kuvasuhteen ennen tiedoston saapumista. Suhteellisen CSS-mitoituksen kanssa tämä auttaa varaamaan tilan. Jos CSS määrää molemmat mitat tai näyttää eri rajauksen, tarkista varatun alueen vastaavan lopullista näkymää.

Selvästi ensimmäisen näkymän alapuolella oleville kuville voi sopia loading="lazy". Heti sivun avautuessa näkyvä tärkeä kuva kannattaa yleensä ladata ilman viivästystä. Pääkuvan latauksen lykkääminen voi heikentää kokemusta, vaikka tiedosto olisi pieni. Katso web.dev:n ohje selaimen kuvalatauksesta.

Jos mittaus osoittaa tietyn kuvan olevan Largest Contentful Paint -elementti, harkitse sille asetusta fetchpriority="high". Älä anna kaikille kuville korkeaa prioriteettia. Responsiivinen mitoitus on osa latausstrategiaa; se ei korjaa hidasta palvelinvastausta tai myöhään löytyvää pääkuvaa.

Näin testaat responsiivisten kuvien toiminnan

1. Avaa julkaistu sivu kapeassa puhelinnäkymässä, tabletin leveydellä ja tietokonenäkymässä.
2. Tutki kuvan näyttöleveys ja selaimen valitsema osoite. Kuvaelementin currentSrc-ominaisuus kertoo valitun tiedoston.
3. Tarkista verkkopyynnöstä siirretyn tiedoston koko. Poista välimuisti tarvittaessa käytöstä uuden latauksen testaamiseksi.
4. Vertaa kuvaa tavallisessa näyttökoossa: tarkista teksti, reunat ja tarkoitettu rajaus.
5. Testaa jokainen leveys uudella sivulatauksella. Jo avatun sivun koon muuttaminen ei luotettavasti jäljittele uuden käynnin kuvavalintaa.
6. Mittaa sivun latauskäyttäytyminen ennen muutosta ja sen jälkeen vertailukelpoisissa olosuhteissa.

Jos puhelin pyytää yhä valtavaa tiedostoa, tarkista lopullisen sivun srcset, leveysarvojen oikeellisuus ja sizes-arvon vastaavuus todelliseen kuva-alueeseen. Jos kuva näyttää pehmeältä, tarkista lähteen mitat ennen pakkauslaadun nostamista. Jos kuva venyy, korjaa kuvasuhde sen sijaan, että lisäisit suuremman tiedoston.

Responsiiviset kuvat ja hakukoneoptimointi

Responsiivinen lataaminen auttaa välttämään tarpeettoman suuria kuvalatauksia. Se ei takaa parempaa hakukonesijoitusta. Käytä sivun aiheeseen sopivaa kuvaa ja hyödyllistä vaihtoehtoista tekstiä. Säilytä picture-elementissä img, jolla on toimiva src. Googlen kuvien hakukoneoptimointiohje käsittelee kuvien löytämistä ja responsiivisia määrityksiä.

Kuvien latautumisen, asettelun siirtymien ja sivukokemuksen yhteyttä käsittelee kuvien Core Web Vitals -opas. Mittaa oikeaa sivua. Pienempi kuvatiedosto ei osoita kaikkien suorituskykymittarien parantuneen.

Usein kysytyt kysymykset

Riittääkö width: 100% tekemään kuvasta responsiivisen?

Se voi sovittaa kuvan näkyvästi säiliöönsä. Se ei luo pienempiä ladattavia versioita. Siihen tarvitset sopivat kuvatiedostot ja responsiiviset HTML-määritykset.

Tarvitsenko eri kuvan jokaiselle puhelimelle?

Et. Tarjoa hallittava määrä asetteluun sopivia kokoja. Selain valitsee niistä, eikä jokaista laitemallia tarvitse tunnistaa.

Pitäisikö jokaisen kuvan olla kaksi kertaa näyttöleveyden kokoinen?

Ei. 2×-versio on hyödyllinen vaihtoehto joillekin näytöille, ei yleispätevä vaatimus. Tasapainota terävyys ja tiedostokoko ja pidä pienemmät versiot saatavilla.

Voiko Pixilo lisätä srcset-määrityksen verkkosivulleni?

Pixilo auttaa tekemään eri kokoisia kuvatiedostoja. Verkkosivun, teeman, sisällönhallinnan tai kuvapalvelun pitää julkaista ne ja määrittää responsiivinen lataaminen.

Tiivistä tekoälylläChatGPT (avautuu uuteen välilehteen)Grok (avautuu uuteen välilehteen)Google (avautuu uuteen välilehteen)Perplexity (avautuu uuteen välilehteen)Claude (avautuu uuteen välilehteen)