Tiimin huomioita tekniikasta, tiedostomuodoista ja niistä pienistä päätöksistä, jotka tekevät hyvän pyöreän rajauksen.
Miten pyöreä leike syntyy
Unohda ajatus, että ympyrä olisi CSS:n pyöristetty kulma, sillä se ei ole. Vetäessäsi elävä ympyrä seuraa kahvojasi, ja koko aihe pysyy näkyvissä tumman renkaan alla koko ajan. Itse leikkaus tapahtuu sillä hetkellä, kun painat tallenna: kuva piirretään valitsemaasi kokoon, ja kaikki ympyrän reunan ulkopuolelle jäävä karisee pois. Jos valitsit PNG:n, WebP:n tai AVIF:n, leikkeen ympärille jää läpinäkyvä alfarengas. Jos taas valitset JPEG:n, joka ei tunne alfaa, tuo rengas maalataan poimimallasi värillä, ja se tehdään ennen kuin tiedosto on edes valmis. Leikkaus tai rakentaminen ei kumpikaan kierrä palvelimen kautta, kaikki syntyy paikallisesti.
PNG:n, WebP:n, AVIF:n ja JPEG:n erot
Muodon valinta ratkaisee, millainen tiedosto käsiisi jää. Nopein on JPEG, noin 400 millisekuntia tietokoneella, mutta siitä puuttuu läpinäkyvyys, ja siksi se sopii vain sinne, missä läpinäkyvät tiedostot torjutaan, kuten joihinkin Slack-liitoksiin ja sähköpostiohjelmiin. AVIF on toisessa päässä ja hitain rakentaa, muutamasta sekunnista tietokoneella lähemmäs 30:een keskitason puhelimella 8 megapikselin lähteellä, mutta vastineeksi AV1 puristaa tiedoston 40 ja 50 prosenttia WebP:tä pienemmäksi vastaavalla laadulla. WebP itse jää 25 ja 40 prosenttia PNG:tä kevyemmäksi tasolla 85 ja 90, ja se luetaan kaikissa selaimissa vuodesta 2023. PNG on häviötön ja ymmärretään kaikkialla, ja 512 kertaa 512 leike 8 megapikselin lähteestä painaa yleensä 180 ja 350 kilotavun väliä yksityiskohtien mukaan. Useimmille riittää PNG tai WebP.
Pyöreiden avatarien mitat palvelu kerrallaan
Ympyrämaskin sisällä ei ole yhteistä standardia, vaan jokaisella palvelulla on omat mittansa. Slack on vaatimaton kanavalistassa, noin 36 pikseliä, vaikka lataat mielelläsi aina 512 kertaa 512 asti. Discord jakaa sen kahtia, 32 kertaa 32 chatissa ja 128 kertaa 128 listoissa, kun taas palvelinkuvake saa jäädä 512 kertaa 512:een. Instagram pysyy noin 110 pikselissä mobiiliprofiilissa ja laskee 32 pikseliin pikkukuvissa. Tiukimmat vaatimukset ovat LinkedInillä, joka haluaa vähintään 400 kertaa 400 pikseliä ja näyttää kuvan pyöreänä profiilissa ja lähellä 48 pikseliä syötteessä. Koska leike perii tarkkuuden lähteestä, poikkeus /resize/-työkalussa kannattaa, kun tietty vientimitta on osuttava pikselilleen, muuten suurennos voi tehdä tuloksesta sumean.
HEIC ja miksi vain Safari lukee sen
Jos törmäät lukuvirheeseen HEIC-tiedostolla, syy on se, että Chrome, Firefox ja Edge eivät vielä vuonna 2026 avaa muotoa. HEIC pohjaa HEVC:hen ja on Applen oma kuvamuoto, ja selaimista vain Safari 17 ja uudemmat lukevat sen suoraan, joten siellä iPhone-kuvan ympyräleike menee suoraan läpi ilman välivaihetta. Koska työkalu tutkii todelliset allekirjoitustavut sillä hetkellä kun lataat, ei auta nimetä .heic-tiedostoa .jpg:ksi, sillä tarkistus paljastaa sen joka tapauksessa. Jos et ole Safarissa, kiertotie on helppo: jaa kuva JPG:nä iPhonen Kuvat-sovelluksesta, tai vie koneella jo oleva tiedosto ensin /heic-to-jpg/-työkalun läpi.
Siksi ympyrän ulkopuoli on läpinäkyvä
Jokainen ympyrän ulkopuolinen pikseli saa alfa-arvon 0, kun viet PNG:hen tai WebP:hen, ja se tarkoittaa täyttä läpinäkyvyyttä. Käytännössä palvelun oma tausta paistaa siististi läpi heti, kun avatar kehystetään pyöreäksi, ja itse läpinäkyvyys jää näkymättömäksi. Vasta kun avaat saman tiedoston täysikokoisena, esimerkiksi liitteen esikatselussa, tyhjä alue paljastuu ruutukuviona. Pudota leike Figmaan tai Canvaan, ja se asettuu minkä tahansa värin päälle ilman valkoista reunaviivaa. Jotkin sähköpostiohjelmat, CMS-lataajat ja vanhemmat palvelut eivät sen sijaan osaa alfaa ja maalaavat läpinäkyvän mustaksi, ja juuri näitä tapauksia varten on JPEG kiinteällä täyttövärillä, joka kiertää ongelman.
Tarkista DevToolsissa, että kaikki tapahtuu selaimessa
Sinun ei tarvitse luottaa väitteeseen, ettei mitään ladata, voit nähdä sen omin silmin. Klikkaa hiiren oikealla ja valitse Tarkasta, tai paina vain F12, siirry Verkko-välilehdelle ja tyhjennä se. Lataa sitten kuva työkaluun ja vedä hieman kahvoista seuraten samalla. Ainoa, mitä ilmestyy, ovat itse sivun rakentavat resurssit, eli JS, CSS ja fontit, ja ne haettiin jo ennen kuin valitsit tiedoston. Et koskaan löydä POST- tai PUT-pyyntöä, joka kantaisi kuvatietojasi. Tallentaessasi tosin vilahtaa lyhyt blob:-pyyntö, mutta se on vain selain, joka ojentaa paikallisen tiedoston takaisin sinulle, ei mitään ulos lähtevää. Kuva on sama, istutpa Chromessa, Firefoxissa, Safarissa tai Edgessä.
