Tiimin huomioita tekniikasta, tiedostomuodoista ja niistä pienistä päätöksistä, jotka tekevät hyvän pyöreän rajauksen.
Näin pyöreä leike piirretään
Pyöreä muoto ei ole pyöristetty CSS-kulma. Näet aina koko kuvan tumman renkaan alla, ja elävä ympyrä seuraa kahvojasi, kun vedät. Tallennettaessa kuva piirretään valitussa koossa, ja kaikki ympyrän reunan ulkopuolella leikataan pois. PNG, WebP ja AVIF säilyttävät läpinäkyvän alfarenkaan leikkeen ympärillä, kun taas JPEG ilman alfaa täyttää renkaan valitsemallasi värillä ennen kuin tiedosto syntyy. Mikään näistä ei kosketa palvelinta, kaikki tapahtuu paikallisesti.
PNG, WebP, AVIF ja JPEG ympyrärajauksessa
Kun asetat kuvan ympyrän sisään, muoto ratkaisee tiedoston. PNG on häviötön ja luettavissa kaikkialla, 512 kertaa 512 ympyrä 8 megapikselin lähteestä painaa yleensä 180 ja 350 kilotavun väliä yksityiskohtien mukaan. WebP antaa lähes saman näkyvän laadun tasolla 85 ja 90 välillä ja tulee ulos 25 ja 40 prosenttia kevyempänä, luettavissa kaikissa selaimissa vuodesta 2023. AVIF säästää AV1:llä vielä 40 ja 50 prosentin verran WebP:hen verrattuna vastaavalla laadulla, mutta rakentuu hitaammin, muutaman sekunnin kannettavalla ja jopa 30 keskitason puhelimella tuolla 8 megapikselin syötteellä. JPEG on nopein, lähes 400 millisekuntia tietokoneella, mutta ei kanna läpinäkyvyyttä, joten käytä sitä vain siellä, missä läpinäkyvät tiedostot hylätään, esimerkiksi joissakin Slack-integraatioissa ja sähköpostiohjelmissa. Useimmille PNG tai WebP on oikea valinta.
Pyöreiden profiilikuvien kokoopas alustoittain
Profiilikuvan koot vaihtelevat alustoittain ympyrämaskin sisällä. LinkedIn haluaa vähintään 400 kertaa 400 pikseliä, näytettynä pyöreänä profiilissa ja noin 48 pikselinä syötteessä. Discord rajaa palvelinkuvakkeen 512 kertaa 512 ja näyttää käyttäjäavatarit 128 kertaa 128 listoissa, 32 kertaa 32 chatissa. Instagram pyörii noin 110 pikselissä mobiiliprofiilissa, 32 pikselissä pikkukuvissa. Slack piirtää noin 36 pikseliä kanavalistassa enintään 512 kertaa 512 latauksesta. Koska tämä työkalu säilyttää lähteen tarkkuuden, lähetä kuva ensin /resize/-työkalun läpi, kun tarvitset tarkan vientikoon, jotta suurennoksesta ei tule sumeaa.
HEIC ja Safarin rajoitus
HEIC on Applen HEVC-pohjainen kuvamuoto. Safari 17 ja uudemmat lukevat sen suoraan, siksi iPhone-kuvan ympyräleike toimii Safarissa ilman muunnosta. Chrome, Firefox ja Edge eivät lue HEIC:tä vielä vuonna 2026 ja antavat lukuvirheen. Työkalu tarkistaa todelliset allekirjoitustavut latauksessa, joten jos HEIC päätyy muuhun selaimeen kuin Safariin, saat ystävällisen vihjeen muuntaa se JPG:ksi. Ratkaisu Safarin ulkopuolisille on helppo, jaa kuva JPG:nä iPhonen Kuvat-sovelluksesta, tai lähetä tietokoneella oleva tiedosto /heic-to-jpg/-työkalun läpi. .heic-tiedoston nimeäminen .jpg:ksi ei huijaa, allekirjoituksen tarkistus huomaa sen.
Miksi ympyrän ulkopuolinen alue on läpinäkyvä
Kun viet pyöreän leikkeen PNG- tai WebP-muodossa, jokainen ympyrän ulkopuolinen pikseli kantaa alfa-arvon 0, täysin läpinäkyvä. Verkostoissa, jotka kehystävät profiilikuvat ympyrään, tämä läpinäkyvyys katoaa, ja niiden oma tausta paistaa siististi läpi. Jos näytät saman tiedoston täysikokoisena, esimerkiksi liitteen esikatselussa, tyhjä rengas näkyy shakkilautana. Vedä ympyrä Figmaan tai Canvaan, ja se asettuu mille tahansa värille ilman valkoista reunaa. JPEG on olemassa hankalia tapauksia varten, koska jotkin sähköpostiohjelmat, CMS-lataajat ja vanhemmat alustat poistavat läpinäkyvyyden ja maalaavat sen mustaksi, kun taas täyttövärillinen JPEG kiertää tämän.
Varmista selainkäsittely DevToolsilla
Lupauksen, ettei mitään ladata, voit testata itse. Avaa DevTools (F12 tai oikea klikkaus ja Tarkasta), siirry Verkko-välilehdelle, paina Tyhjennä, ja lataa sitten ympyrätyökaluun ja vedä kahvoista. Ainoat merkinnät ovat sivun osat, JS, CSS ja fontit, jotka ladattiin ennen tiedoston valintaa. Yhtään POST- tai PUT-pyyntöä kuvatietojesi kanssa ei koskaan ilmesty. Tallennettaessa lyhyt blob:-pyyntö vilahtaa ohi, se on selain, joka palauttaa paikallisen tiedoston sinulle, ei lähetys ulospäin. Sama pätee Chromessa, Firefoxissa, Safarissa ja Edgessä.