HTML Academy · Oppitunti

picture-elementti art direction -toteutukseen

Vaihda kokonaisia kuvia näkymän ehtojen perusteella.

Oppitunti 3/414 vaihetta

picture-elementti art direction -toteutukseen on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Art direction -ongelma

Art direction tarkoittaa, että kuvan rajaus tai sommittelu vaihtelee olennaisesti näytön koon mukaan:

Työpöytäkoneella kokonainen vaakasuuntainen kuva
Mobiililaitteella lähennetty pystysuuntainen rajaus
Tätä ei voi ratkaista pelkästään yhdistelmällä srcset + sizes

picture-elementti

<picture>-elementti sisältää useita <source>-elementtejä sekä varavaihtoehtona toimivan <img>-elementin:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Miten picture toimii

Selain arvioi <source>-elementit järjestyksessä ylhäältä alaspäin:

Tarkistetaan ensimmäisen source-elementin media-ehto — jos se täyttyy, käytetään kyseistä kuvaa
Tarkistetaan toinen source-elementti — jos sen ehto täyttyy, käytetään kyseistä kuvaa
Jos mikään ehto ei täyty, käytetään oletuksena <img>-elementtiä

<img>-elementti näyttää edelleen valitun kuvan ja sisältää alt-tekstin.

Kuvamuodon vaihtaminen picture-elementillä

<picture> voi valita kuvamuodon myös selaimen tuen perusteella:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Art directionin ja kuvamuodon yhdistäminen

Voitte yhdistää mediaehdot ja kuvamuodon valinnan:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

img-elementti vaaditaan

<picture>-elementin sisällä oleva <img>-elementti ei ole valinnainen:

Se näyttää valitun kuvan
Se sisältää saavutettavuutta varten alt-tekstin
Se sisältää width-, height-, loading- ja muut attribuutit
Ilman sitä mitään ei näytetä

source-elementin media-attribuutti

media-attribuutti hyväksyy tavalliset CSS-mediakyselyt:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

source-elementin srcset responsiivista valintaa varten

Yhdistämällä art directionin ja srcsetin saatte täyden hallinnan:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Kuvat tummaa tilaa varten

Tarjotkaa tumman tilan käyttäjille erilaisia kuvia:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture-elementti vai CSS:n background-image

Milloin kannattaa käyttää <picture>-elementtiä ja milloin CSS-taustoja:

Sisältökuvat — käyttäkää <picture>-elementtiä: kuva tarvitsee alt-tekstin ja on osa dokumentin sisältöä
Koristekuvat — käyttäkää CSS:n background-image-ominaisuutta media queryjen kanssa
SEO:n kannalta tärkeät kuvat — käyttäkää aina <picture>-elementtiä: indeksoijat indeksoivat img-elementit

Saavutettavuushuomautus

alt-attribuutti kuuluu aina <img>-elementtiin, ei <source>-elementtiin:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Laiska lataus picture-elementillä

Lisätkää laiska lataus <picture>-elementin sisällä olevalle <img>-elementille:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Pikatarkistus

Minkä elementin on aina oltava picture-lohkossa ja mikä elementti sisältää alt-attribuutin?

Vastaa interaktiivisessa oppitunnissa

Kertaus: picture-elementti

Art direction picture-elementillä:

<picture> sisältää <source>-elementit ja yhden <img>-elementin
<source>-elementin
Käyttäkää media-attribuuttia näkymän ehtojen määrittämiseen ja type-attribuuttia kuvamuodon valintaan
<img> vaaditaan — se näyttää kuvan ja sisältää alt-tekstin
Yhdistämällä mukaan srcset + sizes saatte täyden hallinnan responsiivisuuteen

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”picture-elementti art direction -toteutukseen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “picture-elementti art direction -toteutukseen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”picture-elementti art direction -toteutukseen”?

Vaihda kokonaisia kuvia näkymän ehtojen perusteella. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”picture-elementti art direction -toteutukseen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

img-elementti: src, alt, width ja height
Responsiiviset kuvat: srcset ja sizes
picture-elementti art direction -toteutukseen
figure ja figcaption

← Takaisin: HTML Academy