Pyöristetyt kulmat ja ympyräkuvat verkkosivuilla

Pyöristetyt kulmat voivat sovittaa valokuvat korttiasetteluun, ja ympyränmuotoiset henkilökuvat yhtenäistävät tiimisivua. Muodon pitää tukea sisältöä: kasvoja leikkaava ympyrä tai olennaisen yksityiskohdan peittävä pyöristys ei paranna kuvaa.

Voit joko muokata kuvatiedostoa tai antaa selaimen pyöristää kuvan sivulla. Sopiva tapa riippuu kuvan käyttöpaikasta ja siitä, haluatko muuttaa muotoa myöhemmin.

CSS vai kuvatiedoston muokkaaminen?

CSS on yleensä joustavampi vaihtoehto omalla verkkosivulla. Voit käyttää samaa alkuperäistä eri asetteluissa, muuttaa sivuston pyöristyksiä ja säätää rajausta tallentamatta uutta tiedostoa. Monissa sivustoeditoreissa on oma pyöristyssäteen asetus, joka lisää tarvittavan tyylin puolestasi.

Muokkaa tiedostoa, jos verkkosivu tai sovellus ottaa kuvan vastaan mutta ei tarjoa kulmien säätöä, tai jos lisäät pyöristetyn kuvan toiseen suunnitelmaan. Läpinäkyvät kulmat tallentuvat tiedostoon, joten muoto ei riipu verkkosivusi CSS:stä.

Valitse sisältöön sopiva muoto ja pyöristys

Aloita kuvan tehtävästä. Ympyrä sopii usein pieneen henkilökuvaan, jossa kasvot ovat pääasia. Maisemakuva, kuvakaappaus tai tuotteen yksityiskohta tarvitsee yleensä suorakaiteen, jotta enemmän sisältöä säilyy.

Kokeile verkkosivun kortteihin maltillista sädettä, kuten 12 tai 16 CSS-pikseliä. Arvioi sitä korttien, painikkeiden ja muiden kuvien rinnalla. Luvut ovat ulkoasuesimerkkejä, eivät vaatimuksia. Muutaman yhteisen säteen käyttäminen helpottaa yhtenäisyyttä enemmän kuin jokaisen kuvan erillinen säätö.

Arvioi lopputulos todellisessa näyttökoossa. Suuressa lähdekuvassa hienovarainen pyöristys voi kadota pikkukuvassa lähes kokonaan. Kuvaan tallennetut kulmat pienenevät kuvan mukana. Kiinteä CSS-säde, kuten 16 pikseliä, säilyy puolestaan samana CSS-mittana, vaikka kuvan näyttöleveys muuttuu.

Esimerkiksi 800 × 400 -kuvassa Pixilon 25 %:n pyöristys tuottaa 50 pikselin säteen. Kun kuva näytetään koossa 400 × 200, näkyvä säde puolittuu noin 25 CSS-pikseliin. Koossa 200 × 100 se on noin 12,5 CSS-pikseliä. Valitse pyöristys kävijän näkemän koon, älä pelkän täysikokoisen esikatselun perusteella.

Pidä olennainen sisältö poissa kulmista. Tarkista ryhmäkuvan reunoilla olevat ihmiset ja kuvakaappauksen tekstit sekä säätimet. Jos tärkeä yksityiskohta katoaa, vähennä pyöristystä tai muuta rajausta sen sijaan, että pakottaisit kuvan muotoon.

Pyöristä kuvan kulmat Pixilolla

1. Valmistele työkopio. Säilytä alkuperäinen erikseen. Jos kuvan muotoa pitää muuttaa, käytä ensin rajaustyökalua. Jos mitat ovat turhan suuret, pienennä kopiota ennen pyöristämistä.
2. Valitse kuva. Avaa Pyöristetyt kulmat ja valitse yksi JPG-, PNG- tai WebP-kuva.
3. Säädä Kulmien pyöristys. Aloita pienestä arvosta ja lisää pyöristystä esikatselua seuraten. Kaikki neljä kulmaa käyttävät samaa sädettä.
4. Valitse poistettujen kulmien tausta. Jätä Läpinäkyvä tausta valituksi, jos kuvan pitää sopia eri taustaväreille. Poista valinta, jos haluat valita taustavärin.
5. Lataa ja tarkista. Valitse Lataa PNG, avaa tallennettu tiedosto ja tarkista reunat sillä taustalla, jolla käytät kuvaa.

Työkalu säilyttää kuvan leveyden ja korkeuden pikseleinä. Se poistaa tai täyttää kulmia näiden mittojen sisällä. Se ei muuta koko kuvan kokoa eikä poista kohteen taustaa.

Mitä pyöristysprosentti tarkoittaa?

Pixilo laskee säteen prosenttiosuutena kuvan lyhyemmän sivun puolikkaasta. Arvolla 0 % kulmat säilyvät suorina. Arvolla 100 % pyöristyssäde on suurin, joka mahtuu kuvaan. Yllä olevan 800 × 400 -kuvan lyhyemmän sivun puolikas on 200 pikseliä, josta 25 % on 50 pikseliä.

Liukusäädin ei vastaa CSS:n prosenttiasetusta. CSS laskee vaakasuunnan säteen elementin leveydestä ja pystysuunnan säteen korkeudesta. Kun alue ei ole neliö, border-radius: 50% tekee ellipsin. Pixilon 100 % tekee suorakaiteesta kapselin ja neliöstä ympyrän.

Tee ympyräkuva Pixilolla

Aloita neliökuvasta. Leveä kuva pysyy leveänä suurimmallakin pyöristyksellä, joten tee rajaus ennen ympyrämuodon lisäämistä.

1. Rajaa kuvasuhteeseen 1:1. Avaa alkuperäinen rajaustyökalussa ja valitse neliörajaus. Jätä tilaa pään tai esineen ympärille: ympyrä peittää neliön kulmat.
2. Valitse sopivat mitat. 320 × 320 -kopio on yksi vaihtoehto henkilökuvalle, joka näkyy 160 × 160 CSS-pikselin kokoisena 2×-näytöllä. Käytä tarvittaessa kuvakoon muuttajaa. Vertaa yksityiskohtia lopullisessa näyttökoossa, äläkä suurenna pientä lähdettä vain näiden mittojen saavuttamiseksi.
3. Pyöristä neliö. Avaa valmisteltu neliökuva Pyöristetyt kulmat -työkalussa, aseta Kulmien pyöristys arvoon 100 % ja jätä Läpinäkyvä tausta valituksi.
4. Tarkista tallennettu ympyrä. Lataa PNG ja varmista, että pää, hiukset ja muut olennaiset yksityiskohdat mahtuvat näkyvään alueeseen.

Ympyrä on neliönmuotoisen PNG:n sisällä, ja kulmat ovat läpinäkyvät. Tiedoston leveys ja korkeus säilyvät; vain näkyvä ääriviiva muuttuu ympyräksi. Henkilön takana oleva seinä tai huone näkyy edelleen ympyrän sisällä.

Lisää pyöristetyt kulmat CSS:llä

Jos sivustoeditorissa on jo pyöristyssäteen asetus, kokeile sitä ensin. Omassa toteutuksessa CSS:n pitää kohdistua kuvaelementtiin:

1. Lisää luokka. Jos muokkaat HTML:ää, käytä alla olevaa koodia tai lisää rounded-image nykyisen <img>-elementin class-attribuuttiin. Kirjoita editorin CSS-luokkakenttään nimi ilman alkupistettä. Tarkista, lisääkö editori luokan kuvaan vai sitä ympäröivään elementtiin.
2. Lisää CSS. Liitä CSS-esimerkki sivuston tyylitiedostoon tai oman CSS:n kenttään. Säilytä valitsimen .rounded-image alkupiste: se kohdistaa tyylit kyseisen luokan elementteihin. Oman CSS:n kenttään kirjoitetaan tavallisesti vain CSS, ilman HTML:n <style>-tageja.
3. Tarkista julkaistu kuva. Vaihda esimerkin polku ja kuvatiedot, jos käytät alla olevaa HTML:ää. Esikatsele sivua ja varmista, etteivät teeman tai editorin muut tyylit ohita asetuksia.

Esimerkki säilyttää mittasuhteet ja sallii kuvan pienentyä ympäröivän alueen mukaan:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Valmis keittiö, jossa on tammikaapistot ja kivitaso">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Käytä omaa tiedostopolkua, mittoja ja alt-tekstiä. HTML:n leveys ja korkeus kuvaavat lähdekuvan mittoja ja auttavat selainta varaamaan tilaa. CSS määrää näyttökoon ja kulmien muodon. Käytä seuraavaan ympyräesimerkkiin samoja vaiheita, mutta luokkaa team-avatar ja sen CSS:ää.

Jos editori lisää luokan kuvaa ympäröivään elementtiin, vaihda CSS-valitsin .rounded-image muotoon .rounded-image img. Käytä ympyräesimerkissä valitsinta .team-avatar img valitsimen .team-avatar sijaan. Näin koko- ja pyöristysasetukset kohdistuvat ympäröivän elementin sisällä olevaan kuvaan.

Arvo 16px pyöristää kaikki neljä kulmaa. CSS:llä kulmille voi antaa eri säteet: border-radius: 16px 16px 0 0 pyöristää vain yläkulmat. Järjestys on vasen yläkulma, oikea yläkulma, oikea alakulma ja vasen alakulma. Pixilon työkalu pyöristää kaikki kulmat yhtä paljon. Koko syntaksi ja prosenttien toiminta kuvataan MDN:n border-radius-ohjeessa.

CSS-pyöristys muuttaa kuvaa tällä sivulla, ei ladattavaa lähdetiedostoa. Erikseen avattu tai tallennettu alkuperäinen ei sisällä CSS-muotoa. Myös CSS:n piilottamat osat säilyvät lähteessä.

Tee ympyräkuva CSS:llä

CSS-ympyrä tarvitsee yhtä suuren näyttöleveyden ja -korkeuden. Lähdekuva voi olla suorakaide: object-fit: cover täyttää neliön venyttämättä henkilöä, ja pyöristys rajaa neliöstä ympyrän.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fysioterapeutti">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Esimerkissä lähdekuva on 800 × 1200 pikseliä, mutta se näkyy 160 × 160 -neliössä. Vaihda arvot omaan kuvaan ja asetteluun sopiviksi. Jos muutat näyttökokoa mobiilinäkymässä, pidä leveys ja korkeus samoina, jotta muoto pysyy ympyränä.

object-fit: cover säilyttää mittasuhteet ja rajaa ylimääräisen pois. object-position: 50% 40% keskittää rajauksen vaakasuunnassa ja näyttää tästä pystymallisesta kuvasta hieman ylempää kohtaa kuin oletuskeskitys. Se ei lähennä tai loitonna kasvoja. Säädä sijainti jokaiselle henkilökuvalle erikseen.

MDN käsittelee ominaisuuksia object-fit ja object-position tarkemmin. Älä pakota suorakaidekuvaa neliöön ilman sopivia sovitusasetuksia, sillä kohde voi venyä.

Esimerkki: yhtenäiset henkilökuvat tiimisivulle

Oletetaan, että vastaanotolla on neljä henkilöstökuvaa: kaksi pään ja hartiat näyttävää kuvaa, yksi laajempi kuva hoitohuoneesta ja yksi tiukasti rajattu kasvokuva. Tiimisivulla kaikki näkyvät 160 × 160 -ympyröissä. Sama ulkomuoto on vasta ensimmäinen askel.

1. Valitse vertailurajaus. Päätä yhden kuvan avulla, paljonko päätä ja hartioita näkyy. Jätä tilaa hiusten yläpuolelle ja sijoita silmät kuvissa suunnilleen samalle korkeudelle. Käytä kuvaa visuaalisena mallina, älä jokaisen henkilön täsmällisenä mittana.
2. Yhtenäistä kasvojen koko. Rajaa laajempaa huonekuvaa tiiviimmin, jotta henkilö ei näytä muita paljon pienemmältä. Jos tiukka kuva leikkaa jo hiuksia tai leukaa, käytä laajempaa alkuperäistä, jos sellainen on. Suurempi ympyrä ei palauta puuttuvaa sisältöä.
3. Valitse ympyrän toteutustapa. CSS:llä valmistele rajaukset ensin, käytä kaikissa samaa 160 × 160 -kehystä ja säädä kuvien sijainnit. Tallennettuihin ympyräkuviin tee yhtenäiset neliökopiot, esimerkiksi tarvittaessa 320 × 320, ja lisää jokaiseen Pixilon 100 %:n pyöristys.
4. Arvioi kuvat yhdessä. Aseta henkilökuvat nimien viereen todellisessa näyttökoossa. Tarkista, etteivät yhden henkilön kasvot korostu vain tiukemman rajauksen takia. Katso sitten mobiiliasettelu, jossa kuvat voivat olla allekkain.

Yhtenäisyys syntyy ympyrän lisäksi samanlaisesta rajauksesta ja kasvojen koosta. Säilytä kuvissa tarpeellinen ympäristö, mutta lisää nimet ja tehtävänimikkeet sivun tekstiin kuvan sisään tallentamisen sijaan.

Valitse tausta ja tiedostomuoto

Tallenna kuva läpinäkyvänä, jos sen pitää toimia erivärisillä sivuilla tai tummassa tilassa. Valkoinen kulma voi sulautua vaaleaan sivuun mutta näkyä neliömäisenä laikkuna tummassa kortissa. Jotkin katseluohjelmat näyttävät läpinäkyvyyden valkoisena tai ruudukkona. Kokeile toista taustaa ennen kuin päättelet kuvan sisältävän valkoisia pikseleitä.

Kun Läpinäkyvä tausta ei ole valittuna, Pixilon taustaväri täyttää sekä poistetut kulmat että kuvan ennestään läpinäkyvät alueet. Se ei korvaa valokuvan peittävää taustaa. Jos täytit kulmat valkoisella mutta tarvitsetkin läpinäkyvyyttä, palaa alkuperäiseen ja tallenna uusi versio läpinäkyvyys päällä.

PNG säilyttää läpinäkyvyyden eikä lisää uutta häviöllistä pakkausta, mutta PNG:ksi tallennettu valokuva voi kasvaa. Verkkokäyttöön kannattaa verrata WebP-kopiota, joka voi säilyttää läpinäkyvyyden. Pixilon muunnos on häviöllinen, joten tarkista reunat ja yksityiskohdat. JPG ei säilytä läpinäkyviä kulmia. Läpinäkyvän taustan oppaamme käsittelee näitä tiedostomuotovalintoja.

Jos teet muodon CSS:llä, valokuvan ei tarvitse olla läpinäkyvä. Säilytä sopiva JPG tai WebP ja anna selaimen pyöristää ulkoasu. CSS ei pakkaa lähdetiedostoa. Valitse asetteluun sopivat mitat ja vertaa ladattavan tiedoston kokoa sekä terävyyttä.

Tarkista lopputulos oikeassa asettelussa

• Tarkista kohde. Katso kasvot, hiukset, tuotteiden reunat ja rajauksen lähellä oleva teksti. Muodon tulee säilyttää lukijan tarvitsema tieto.
• Tarkista pienet näytöt. CSS-ympyrän näyttöleveyden ja -korkeuden pitää pysyä samoina. Arvioi myös pyöristyssäde lopullisessa näyttökoossa.
• Kokeile sivun taustoja. Etsi ylimääräisiä peittäviä kulmia ja vaaleaa reunusta sekä vaalealta että tummalta pinnalta.
• Tarkista lopullinen versio. Verkkosivu tai sovellus voi pienentää, rajata tai muuntaa tiedoston. Katso tallennettua tai julkaistua kopiota myös tiedostomuodon vaihtamisen jälkeen.
• Kirjoita hyödyllinen vaihtoehtoinen teksti. Kuvaile kuvan tehtävää, älä vain sen muotoa. Tiimikuvan alt-tekstin tulee kertoa, kuka kuvassa on, sivun asiayhteys huomioiden. Koristekuvan alt-teksti jätetään yleensä tyhjäksi. Lue alt-tekstien ja tiedostonimien opas.

Usein kysytyt kysymykset

Miksi kuvasta tuli soikio tai kapseli?

Tarkista ensin mittasuhteet. CSS-ympyrän näyttöleveyden ja -korkeuden on oltava samat. Pixilossa rajaa lähde neliöksi ennen 100 %:n asetusta. Yllä oleva muotovertailu näyttää, miksi suorakaiteesta tulee erilainen.

Miksi kulmat ovat edelleen valkoiset?

Kokeile ensin toista taustaa kuten edellä. Jos kulmat sisältävät valkoisia pikseleitä, tarkista, valitsitko taustavärin tai muunsitko kuvan JPG:ksi. Verkkosivu tai sovellus on voinut korvata läpinäkyvyyden valkoisella. Tallenna alkuperäisestä uusi läpinäkyvä kopio ja tarkista tiedostomuoto julkaisun jälkeen.

Miksi pyöristetyn kortin sisällä kuvalla on suorat kulmat?

Ympäröivän kortin pyöristys ei automaattisesti rajaa sen sisällä olevaa kuvaa. Lisää säde itse kuvaan tai käytä pyöristettyä ympäröivää elementtiä ja asetusta overflow: hidden, jos sisältö pitää rajata yhdessä. Jos elementissä on myös painikkeita tai muita toimintoja, varmista, ettei rajaus piilota niiden näppäimistökohdistuksen merkintöjä.

Voiko ympyrään saada koko kuvan mitään leikkaamatta?

Ympyrä ei voi täyttää suorakaidekuvan koko kehystä menettämättä osaa sisällöstä tai muuttamatta sommittelua. Jos kaikki pitää säilyttää, sijoita kuva suurempaan neliösuunnitelmaan, jätä ympärille riittävästi tilaa ja tarkista ympyrän raja. Yksityiskohtaiselle sisällölle suorakaide on usein parempi.

Latautuvatko pyöristetyt kuvat nopeammin?

Pelkkä muoto ei takaa pienempää latausta. Tarkista edellä kuvatut mitat ja tiedostomuodot sekä mittaa tiedosto, jonka julkaistu sivu todella toimittaa.

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)