Rajaa kuva ympyräksi, verkossa

Ilmainen ympyrärajaus profiilikuville ja logoille. Pudota kuva, aseta ympyrä, lataa läpinäkyvä leike.

tai pudota kuva tähän

Tietoa tästä työkalusta

Haluatko asettaa kuvan ympyrän sisään? Pudota JPG, PNG, WebP tai AVIF, niin tämä ilmainen ympyrärajaus kehystää kuvan heti pyöreään valintaan. Vedä ympyrä kasvojen tai logon päälle, muuta sen kokoa haluamallasi tavalla ja tallenna siisti leike. Pyöreä leike tulee ulos läpinäkyvänä PNG-, WebP- tai AVIF-tiedostona, tai JPEG-tiedostona täyttövärin päällä, jos tarvitset peittävän taustan. Mikään ei poistu laitteeltasi, koko työ tapahtuu selaimessa, ja DevToolsin Verkko-välilehdellä näet, ettei yhtään kuvan latausta käynnisty. Vienti yltää 4096 pikseliin sivua kohti, mikä riittää mihin tahansa profiilikuvaan tai painomerkkiin. Se toimii samalla tavalla tietokoneella ja puhelimella ilman asennusta. Tänne päätyvillä on yleensä neliönmuotoinen kuva, jonka he haluavat näyttävän hyvältä LinkedInin, Discordin, Slackin ja Instagramin pyöreissä profiilikehyksissä.

Avaa ympyrätyökalu
Näin asetat kuvan ympyrän sisään

Näin asetat kuvan ympyrän sisään

Pudota ensin JPG, PNG, WebP tai AVIF sivulle. Kuva avautuu pyöreään valintaan, jonka ympärillä on tummennettu rengas, tumma osa poistetaan ja kirkas ympyrä jää jäljelle. Siirrä ympyrää, kunnes aiheesi asettuu paikalleen, ja muuta kokoa kulmakahvoista tai kahdella sormella puhelimella. Kun rajaus näyttää hyvältä, valitse muoto ja paina Tallenna asettaaksesi kuvan ympyrän sisään. Kaikki tapahtuu laitteellasi, joten tiedosto latautuu heti. Jos haluat tarkistaa, jätä DevToolsin Verkko-välilehti auki työn ajaksi, se ei kirjaa yhtään latausta kehystäessäsi tai tallentaessasi.

Valitse muoto ja rajaa
Valitse oikea vientimuoto

Valitse oikea vientimuoto

Tallennusvalikko tarjoaa neljä muotoa, joista jokaisessa on oma kompromissinsa. PNG säilyttää ympyrän ympärillä olevan läpinäkyvyyden täysin ja on turvallinen valinta profiilikuville ja pyöreille logoille. WebP säilyttää saman läpinäkyvyyden ja jää noin neljänneksen tai kolmanneksen PNG:tä kevyemmäksi. AVIF pakkaa voimakkaimmin, usein puoleen WebP:n koosta, mutta vie muutaman sekunnin kannettavalla ja jopa puoli minuuttia heikommalla puhelimella. JPEG:ssä ei ole lainkaan läpinäkyvyyttä, joten pyöreä leike lepää valitsemasi peittävän täyttövärin päällä. Nyrkkisääntö: PNG, kun sen pitää vain toimia, WebP tavujen säästämiseen, AVIF kun jokainen kilotavu ratkaisee, ja JPEG vain silloin, kun latauspaikka hylkää läpinäkyvät tiedostot.

Rajaa jokaiselle alustalle
Pyöreät kuvat jokaiselle alustalle

Pyöreät kuvat jokaiselle alustalle

Koska lähes jokainen verkosto kehystää profiilikuvat ympyrään, ympyrärajauksella päätät itse, mikä säilyy maskissa, sen sijaan että jättäisit sen automaattirajaukselle. Suuntaa antaen: LinkedIn näyttää profiilikuvan noin 400 kertaa 400 pikselinä sivulla ja noin 48 pikselinä syötteessä, Discord käyttää 128 kertaa 128 jäsenlistoissa ja 32 kertaa 32 chatissa, Instagram pyörii noin 110 pikselissä mobiiliprofiilissa ja 32 pikselissä pikkukuvissa, ja Slack yltää noin 36 pikseliin kanavapalkissa. Tämä työkalu tallentaa alkuperäisessä tarkkuudessa, joten lähetä kuva ensin /resize/-työkalun läpi, jos tarvitset tarkan pikselikoon, jotta ei synny sumeaa suurennosta.

Mitä tämä työkalu ei tee

Mitä tämä työkalu ei tee

Muutama rehellinen rajoitus. HEIC avautuu vain Safari 17:ssä ja uudemmissa, ainoassa selaimessa, joka lukee muodon itse, muualla saat selkeän lukuvirheen, joka pyytää muuntamaan JPG:ksi. Animoiduista GIF-tiedostoista säilyy vain ensimmäinen ruutu. AVIF on todella hidas puhelimella, lähes 30 sekuntia 8 megapikselin kuvassa, siellä on parempi valita PNG tai WebP. Ja ympyrärajaus tehdään tarkoituksella käsin, tekoälyllä ei tunnisteta kasvoja, ympyrän asetat itse.

Näin kuvasi pysyy laitteellasi

Näin kuvasi pysyy laitteellasi

Sekä rajaus että tallennus tapahtuvat selaimessasi, ja valmis tiedosto kootaan paikalliseen muistiin sen sijaan, että se lähetettäisiin palvelimelle. Haluatko todisteen? Avaa DevTools, mene Verkko-välilehdelle, tyhjennä loki, ja lataa sitten kuva ja rajaa. Yhtään POST- tai PUT-pyyntöä kuvasi kanssa ei ilmesty. Ainoa merkki tallennettaessa on paikallinen blob, joka palauttaa tiedoston sinulle, ei tietovuoto. Chrome, Firefox, Safari ja Edge käyttäytyvät täällä samalla tavalla.

Pyöreä profiilikuva jokaiselle verkostolle

Pyöreä profiilikuva jokaiselle verkostolle

Profiilikuva on ensivaikutelma useimmissa profiileissa, ja koska alustat asettavat sen ympyrään, lataamasi neliö rajautuu kulmista, halusit tai et. Ympyrärajauksen ottaminen omiin käsiin ratkaisee tämän, sinä päätät, mikä jää ympyrään ja mikä putoaa ulos. Sama pätee pyöreisiin tuotemerkkilogoihin, hakemiston tiimikuviin, Discord-palvelimen kuvakkeisiin ja tarrataiteeseen. Vinkki kokemuksesta: jätä hieman ilmaa pään yläpuolelle sen sijaan, että leikkaisit hiusrajasta, ja aseta silmät hieman keskikohdan yläpuolelle, jotta pyöreä tulos näyttää tasapainoiselta missä tahansa näyttökoossa.

Näin se toimii

  1. Pudota kuva sivulle

    Napauta latausaluetta tai vedä JPG, PNG, WebP, AVIF tai GIF sen päälle. Pyöreä rajausnäkymä ilmestyy itsestään.

  2. Aseta ympyrä aiheen päälle

    Siirrä ympyrää niin, että kasvot tai logo ovat keskellä, ja skaalaa sitten nipistämällä tai vierittämällä, kunnes rajaus asettuu.

  3. Valitse vientimuoto

    PNG tai WebP läpinäkyvälle ympyrälle, AVIF pienimmälle leikkeelle, tai JPEG, jos tarvitset peittävän taustavärin.

  4. Tallenna ja lataa tiedosto

    Selain tekee pyöreän leikkeen paikan päällä ja tallentaa paikallisesti, alkuperäinen nimi säilyy -circle-lisäyksellä.

Tarvitsetko suorakulmion etkä ympyrää?

Tämä sivu tekee yhden asian, ympyrärajauksen. Jos tarvitset suorakulmion vapaalla suhteella, siirry Rajaa kuva -työkaluun. Instagramin 1080 kertaa 1080 neliöön käytä neliörajausta tai jotakin alustakohtaista työkalua.

Usein kysytyt kysymykset

Miten rajaan kuvan ympyräksi?

Pudota kuvasi alueelle (JPG, PNG, WebP, AVIF, GIF tai BMP). Pyöreä valinta avautuu kuvan keskelle. Vedä ympyrä aiheen päälle, muuta kokoa kahvoista tai nipistämällä ja paina Tallenna. Oletuksena ulos tulee läpinäkyvä PNG. Tavallisella kuvalla tämä kaikki vie alle puoli minuuttia.

Mitä tiedostomuotoja tuetaan?

Syötteenä hyväksytään JPG, PNG, WebP, AVIF, GIF (vain ensimmäinen ruutu, animaatio ei säily), BMP ja SVG. HEIC toimii Safarissa, koska Safari lukee muodon itse. Chromessa, Firefoxissa ja Edgessä HEIC hylätään ystävällisellä viestillä. Tunnistus tapahtuu tiedoston allekirjoitustavuilla, ei päätteellä, joten uudelleennimetty tiedosto tunnistetaan oikein.

Saanko läpinäkyvän taustan?

Kyllä. PNG:ssä, WebP:ssä ja AVIF:ssa on alfakanava, joten ympyrän ulkopuolinen alue on täysin läpinäkyvä. Jos avaat tiedoston useimmissa suunnitteluohjelmissa tai viestisovelluksessa, tausta näyttää shakkilaudalta, mikä on läpinäkyvyyden merkki. JPEG ei kanna läpinäkyvyyttä, joten JPEG:ssä valitset täyttövärin ulkoalueelle.

Voinko käyttää sitä puhelimella?

Työkalu toimii kaikissa nykyaikaisissa selaimissa iPhonella, iPadilla ja Androidilla. Kahvat vastaavat kosketukseen ja nipistykseen. Rajoitus puhelimella on AVIF-viennin kesto, korkean tarkkuuden kuva voi viedä 30 sekuntia tai enemmän, koska AVIF on raskas rakentaa puhelimella. PNG ja WebP ovat selvästi nopeampia ja toimivat hyvin myös keskitason laitteilla.

Miksi rajaisin kuvan ympyräksi ylipäätään?

Useimmat verkostot näyttävät profiilikuvat, avatarit ja palvelinkuvakkeet pyöreässä kehyksessä. Jos lataat neliön ja jätät sen alustan automaattirajaukselle, kasvot leikkautuvat usein tai jää tyhjää tilaa. Jos rajaat ympyrän itse, päätät tarkalleen, mitä sen sisällä on ennen lataamista, ja pyöreä leike asettuu siististi mille tahansa taustalle. Sama pätee pyöreisiin logoihin, tiimimerkkeihin ja tarrataiteeseen.

Onko tämä ilmainen ympyrärajaus?

Kyllä. Tämä ympyrätyökalu on ilmainen eikä tulokseen tule vesileimaa. Asettaaksesi kuvan ympyrän sisään pudota tiedosto sivulle, aseta pyöreä valinta ja lataa leike läpinäkyvänä PNG-, WebP- tai AVIF-tiedostona. Ympyrärajaus tapahtuu kokonaan selaimessa, joten kuvasi pysyy laitteellasi.

Yksityiskohdat

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ä.