{"id":237,"date":"2026-07-20T20:24:43","date_gmt":"2026-07-20T20:24:43","guid":{"rendered":"https:\/\/artsflick.com\/blog\/?p=237"},"modified":"2026-07-20T20:24:45","modified_gmt":"2026-07-20T20:24:45","slug":"crop-an-image-into-a-circle","status":"publish","type":"post","link":"https:\/\/artsflick.com\/blog\/crop-an-image-into-a-circle\/","title":{"rendered":"How to Crop an Image Into a Circle (With Transparent Edges)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1672\" height=\"941\" src=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/crop-image-circle-hero.webp\" alt=\"A square photo being used to crop an image into a circle with transparent corners\" class=\"wp-image-240\" srcset=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/crop-image-circle-hero.webp 1672w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/crop-image-circle-hero-300x169.webp 300w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/crop-image-circle-hero-1024x576.webp 1024w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/crop-image-circle-hero-768x432.webp 768w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/crop-image-circle-hero-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" \/><\/figure>\n\n\n<style>.kb-row-layout-id237_9a81c9-5b > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id237_9a81c9-5b > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id237_9a81c9-5b > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:1140px;margin-left:auto;margin-right:auto;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}.kb-row-layout-id237_9a81c9-5b > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id237_9a81c9-5b > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}}@media all and (max-width: 767px){.kb-row-layout-id237_9a81c9-5b > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id237_9a81c9-5b alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-right-golden kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>#wrapper.site{overflow:clip;}.kadence-column237_37c960-8d > .kt-inside-inner-col,.kadence-column237_37c960-8d > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column237_37c960-8d > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column237_37c960-8d > .kt-inside-inner-col{flex-direction:column;}.kadence-column237_37c960-8d > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column237_37c960-8d > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column237_37c960-8d{position:relative;}@media all and (max-width: 1024px){.kadence-column237_37c960-8d > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column237_37c960-8d > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column237_37c960-8d kb-section-is-sticky\"><div class=\"kt-inside-inner-col\"><style>.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:0px solid #000000;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-contents-title-wrap{color:#000000;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-contents-title{color:#000000;letter-spacing:1px;font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-wrap .kb-table-of-content-list{color:#5b6472;font-size:15px;font-weight:regular;font-style:normal;margin-top:0px;margin-left:-2px;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:#1f2430;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry{color:#3b6cf6;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-list li{margin-bottom:16px;}.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-list li .kb-table-of-contents-list-sub{margin-top:16px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-wrap{border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:0px solid #000000;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id237_a113c5-f2 .kb-table-of-content-wrap{border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:0px solid #000000;}}<\/style><\/div><\/div>\n\n\n<style>.kadence-column237_c6388a-98 > .kt-inside-inner-col,.kadence-column237_c6388a-98 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column237_c6388a-98 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column237_c6388a-98 > .kt-inside-inner-col{flex-direction:column;}.kadence-column237_c6388a-98 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column237_c6388a-98 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column237_c6388a-98{position:relative;}@media all and (max-width: 1024px){.kadence-column237_c6388a-98 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column237_c6388a-98 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column237_c6388a-98\"><div class=\"kt-inside-inner-col\">\n<p class=\"wp-block-paragraph\">To crop an image into a circle you need two things, and most guides only mention the first: a round selection, and an export format that can hold transparency. Miss the second and your beautiful circle arrives wrapped in a white or black square, which is the single most common complaint about round crops and the reason this guide spends real time on it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below: the five-step process, the format rule that keeps corners invisible, current profile picture sizes for every major platform, and the framing habit that stops circles from cutting off the top of people&#8217;s heads.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to crop an image into a circle in 5 steps<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Start with a square-ish image.<\/strong>&nbsp;Circles crop from squares, so a very wide or very tall photo loses a lot. If yours is panoramic, crop it roughly square first so you control what survives.<\/li>\n\n\n\n<li><strong>Open the&nbsp;<a href=\"https:\/\/artsflick.com\/crop-image\">ArtsFlick crop tool<\/a>&nbsp;and choose the circle shape.<\/strong>&nbsp;The round frame appears over your photo.<\/li>\n\n\n\n<li><strong>Position and size the circle.<\/strong>&nbsp;Drag to move, use the handles or zoom to resize. Put your subject&#8217;s eyes slightly above the circle&#8217;s center; more on why below.<\/li>\n\n\n\n<li><strong>Export as PNG.<\/strong>&nbsp;This is the step that matters. PNG keeps the corners transparent; JPG cannot, and will fill them.<\/li>\n\n\n\n<li><strong>Check it on a colored background.<\/strong>&nbsp;Drop the file onto a dark surface or a colored slide. If you see square edges, the export format was wrong, not the crop.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Whole thing takes under a minute once you know the shape of it, and the tool runs in your browser, so private headshots never leave your device.<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n.cta-box {\n    background: linear-gradient(135deg, #3b6cf6, #6a4cf0);\n    color: #fff;\n    border-radius: 18px;\n    padding: 28px;\n    margin: 34px 0;\n    text-align: center;\n}\n\n.cta-box a {\n    background: #fff;\n    color: #3b6cf6;\n    font-weight: 700;\n    padding: 12px 22px;\n    border-radius: 999px;\n    display: inline-block;\n}\n\na:-webkit-any-link\nSpecificity: (0,1,1)\n {\n    cursor: pointer;\n}\n\na {\n    color: #3b6cf6;\n    text-decoration: none;\n}\n\n.cta-box h3 {\n    margin: 0 0 8px;\n    color: #fff;\n    font-size: 22px;\n}\n\nbody {\n    margin: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    background: #ffffff;\n    line-height: 1.7;\n    font-size: 18px;\n}\n<\/style>\n\n<div class=\"cta-box\">\n        <h3>Crop a perfect circle, free\n<\/h3>\n        <p>Round frame, transparent PNG export, no signup. Your photo stays on your device.\n<\/p>\n        <a href=\"https:\/\/artsflick.com\/crop-image\">Try the ArtsFlick Circle Crop<\/a>\n      <\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The white-box trap (why your circle has square corners)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the mechanic behind the most-reported circle-crop problem. A circular crop doesn&#8217;t delete the corners; it makes them&nbsp;<em>transparent<\/em>. Transparency is a fourth channel of data (alpha) that only some formats carry. PNG and WebP carry it. JPG does not, and never has.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So when you export a circle as JPG, the format has nowhere to store &#8220;nothing here&#8221; and fills those pixels with a solid color instead, usually white or black depending on the tool. The circle is still perfectly cropped; it&#8217;s just sitting on a square card you can&#8217;t remove. We covered the same trap from the other direction in our guide to&nbsp;<a href=\"https:\/\/artsflick.com\/blog\/convert-png-to-jpg\/\">converting PNG to JPG<\/a>, where choosing that fill color deliberately is the whole trick.<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n.callout {\n    background: #eef3ff;\n    border: 1px solid #d8e3ff;\n    border-radius: 14px;\n    padding: 18px 20px;\n    margin: 24px 0;\n}\n\n.callout strong {\n    color: #3b6cf6;\n    font-weight: bolder;\n}\n\nbody {\n    margin: 0;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: var(--text);\n    background: #ffffff;\n    line-height: 1.7;\n    font-size: 18px;\n}\n<\/style>\n\n<div class=\"callout\"><strong>The rule:<\/strong> circle crop, PNG export. If a platform demands JPG, export a PNG first, then convert it with the background color set to match wherever the image will sit.<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1672\" height=\"941\" src=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/circle-crop-png-vs-jpg.webp\" alt=\"Infographic comparing a circle crop saved as PNG with transparent corners and as JPG with a white box\" class=\"wp-image-241\" srcset=\"https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/circle-crop-png-vs-jpg.webp 1672w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/circle-crop-png-vs-jpg-300x169.webp 300w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/circle-crop-png-vs-jpg-1024x576.webp 1024w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/circle-crop-png-vs-jpg-768x432.webp 768w, https:\/\/artsflick.com\/blog\/wp-content\/uploads\/2026\/07\/circle-crop-png-vs-jpg-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Profile picture sizes worth knowing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most platforms display avatars as circles but accept square uploads, then mask them. Upload at these sizes and the mask has enough pixels to work with:<\/p>\n\n\n<style>.kb-table-container237_0767a7-00{overflow-x:auto;}.kb-table-container .kb-table237_0767a7-00 th{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:center;}.kb-table-container .kb-table237_0767a7-00 caption{text-align:center;}.kb-table-container .kb-table237_0767a7-00 td{padding-top:var(--global-kb-spacing-xxs, 0.5rem);padding-right:var(--global-kb-spacing-xxs, 0.5rem);padding-bottom:var(--global-kb-spacing-xxs, 0.5rem);padding-left:var(--global-kb-spacing-xxs, 0.5rem);text-align:left;}<\/style><div class=\"kb-table-container kb-table-container237_0767a7-00 wp-block-kadence-table\"><table class=\"kb-table kb-table237_0767a7-00\">\n<tr class=\"kb-table-row kb-table-row237_986f5c-56\">\n<td  class=\"kb-table-data kb-table-data237_726908-c5\">\n\n<p class=\"wp-block-paragraph\"><strong>Platform<\/strong><\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_9e5a8e-8e\">\n\n<p class=\"wp-block-paragraph\"><strong>Upload size (px)<\/strong><\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_3f184b-5c\">\n\n<p class=\"wp-block-paragraph\"><strong>Displayed as<\/strong><\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_90f355-4c\">\n<td  class=\"kb-table-data kb-table-data237_060b06-3e\">\n\n<p class=\"wp-block-paragraph\">Instagram<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_d6c18e-83\">\n\n<p class=\"wp-block-paragraph\">320 \u00d7 320<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_d745ed-ea\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_a1f2d1-1a\">\n<td  class=\"kb-table-data kb-table-data237_ddc52d-6a\">\n\n<p class=\"wp-block-paragraph\">Facebook<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_866361-e7\">\n\n<p class=\"wp-block-paragraph\">360 \u00d7 360 (min 180)<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_290d28-b4\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_6e10c5-6d\">\n<td  class=\"kb-table-data kb-table-data237_6348d3-ce\">\n\n<p class=\"wp-block-paragraph\">LinkedIn<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_291d99-25\">\n\n<p class=\"wp-block-paragraph\">400 \u00d7 400<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_41df41-46\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_1344f8-aa\">\n<td  class=\"kb-table-data kb-table-data237_88d854-14\">\n\n<p class=\"wp-block-paragraph\">X (Twitter)<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_32478a-12\">\n\n<p class=\"wp-block-paragraph\">400 \u00d7 400<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_f26a21-ed\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_836c4a-3f\">\n<td  class=\"kb-table-data kb-table-data237_332d44-bc\">\n\n<p class=\"wp-block-paragraph\">YouTube<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_c75c44-6b\">\n\n<p class=\"wp-block-paragraph\">800 \u00d7 800<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_441c75-2d\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_229c3b-f4\">\n<td  class=\"kb-table-data kb-table-data237_113141-b2\">\n\n<p class=\"wp-block-paragraph\">Discord<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_5e2ae4-31\">\n\n<p class=\"wp-block-paragraph\">512 \u00d7 512<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_1a4454-54\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n\n<tr class=\"kb-table-row kb-table-row237_399246-ae\">\n<td  class=\"kb-table-data kb-table-data237_775fe7-4f\">\n\n<p class=\"wp-block-paragraph\">WhatsApp<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_65696f-07\">\n\n<p class=\"wp-block-paragraph\">500 \u00d7 500<\/p>\n\n<\/td>\n\n<td  class=\"kb-table-data kb-table-data237_fd0b8b-10\">\n\n<p class=\"wp-block-paragraph\">Circle<\/p>\n\n<\/td>\n<\/tr>\n<\/table><\/div>\n\n\n<p class=\"wp-block-paragraph\">Two practical notes. Upload square rather than pre-cropped circles where the platform masks anyway, since your PNG&#8217;s transparent corners get discarded by their processing regardless. And go bigger than the minimum: platforms downscale gracefully but never upscale well, a principle covered in our&nbsp;<a href=\"https:\/\/artsflick.com\/blog\/resize-an-image-without-losing-quality\/\">resizing guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Doing it in other tools<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Browser tools are the fastest route, but the job exists everywhere and the concept never changes: make a round selection, then export to a format that holds transparency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Photoshop<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Elliptical Marquee tool, hold Shift while dragging to force a perfect circle, then use Layer \u2192 Layer Mask \u2192 Reveal Selection rather than deleting the outside. A mask keeps the original pixels intact, so you can reposition the circle later. Save as PNG, not JPG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Canva<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The frame approach: search &#8220;frames&#8221; in Elements, pick the circular one, drag your photo into it. Canva crops to the shape automatically. On the free plan, download as PNG and tick &#8220;transparent background&#8221; if the option is available to you, otherwise the corners come through white.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PowerPoint and Google Slides<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Genuinely useful when you&#8217;re already building a deck: insert the picture, then Picture Format \u2192 Crop \u2192 Crop to Shape \u2192 Oval (hold Shift for a true circle). Right-click and &#8220;Save as Picture&#8221; exports it as PNG with the transparency intact, which is a decent trick for team slides.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Phone<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">iPhone and Android photo apps generally don&#8217;t offer circular crop natively; the built-in editors crop rectangles only. A browser tool works fine on mobile, which is usually the fastest path from a phone photo to a round avatar without installing anything. The&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-radius\" target=\"_blank\" rel=\"noopener\">CSS border-radius<\/a>&nbsp;route is worth knowing too if you&#8217;re a developer: for web display you can render a square image as a circle in the browser without editing the file at all.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Framing that survives the circle<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Circles cut corners, literally, and the corners are where composition usually lives. Three habits fix the common failures:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eyes slightly above center.<\/strong>&nbsp;Centering the whole head makes the forehead dominate and pushes the chin low. Placing the eyes just above the circle&#8217;s midpoint reads as natural in every avatar I&#8217;ve cropped.<\/li>\n\n\n\n<li><strong>Leave breathing room.<\/strong>&nbsp;A face that fills the circle edge-to-edge feels cramped at 40 pixels wide, which is how most people will see it. Frame from the shoulders.<\/li>\n\n\n\n<li><strong>Watch the corners of the original.<\/strong>&nbsp;Whatever sits in the four corners of your square is exactly what the circle deletes. Check that nothing important (a hand, a logo, the edge of a subject) lives there before you export.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Beyond profile pictures<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Round crops earn their keep in more places than avatars. Team pages read as more designed with circular headshots than with a grid of rectangles. Testimonial blocks use them to separate a face from a wall of text. Product galleries use circular cutouts for color or material swatches. Logos and app icons frequently need a round version alongside the square one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The rule is the same everywhere: a transparent PNG drops onto any background, any color, any section, without a visible card behind it. That&#8217;s the whole point of doing it properly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One workflow note for websites specifically. If the round images are decorative and live on a page you control, cropping the file isn&#8217;t always necessary; displaying a square image inside a circular container achieves the same look and keeps the original intact for other uses. Crop the actual file when the image travels (avatars you upload to platforms, images pasted into documents or decks) and use display-side rounding when it stays on your own page. Either way, keep the master square file archived, because a circle can always be cut from a square, but a square can never be recovered from a circle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n<style>.kt-accordion-id237_187a25-03 .kt-accordion-inner-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:10px;}.kt-accordion-id237_187a25-03 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;background:#ffffff;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #e7eaf0;border-right:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;border-left:1px solid #e7eaf0;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-bottom-left-radius:12px;background:#f2f2f2;font-size:17px;color:#1f2430;padding-top:14px;padding-right:15px;padding-bottom:14px;padding-left:15px;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before{background:#1f2430;}.kt-accordion-id237_187a25-03 .kt-accordion-panel-inner, .kt-accordion-id237_187a25-03 .kt-accordion-panel-inner h1, .kt-accordion-id237_187a25-03 .kt-accordion-panel-inner h2, .kt-accordion-id237_187a25-03 .kt-accordion-panel-inner h3, .kt-accordion-id237_187a25-03 .kt-accordion-panel-inner h4, .kt-accordion-id237_187a25-03 .kt-accordion-panel-inner h5, .kt-accordion-id237_187a25-03 .kt-accordion-panel-inner h6{color:#3a4150;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger{background:#1f2430;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger:before{background:#f2f2f2;}.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id237_187a25-03 .kt-blocks-accordion-header:focus-visible{color:#1f2430;background:#eeeeee;border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#1f2430;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger{background:#1f2430;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#eeeeee;}.kt-accordion-id237_187a25-03 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{color:#1f2430;background:#f2f2f2;border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#1f2430;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger{background:#1f2430;}.kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id237_187a25-03:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#f2f2f2;}@media all and (max-width: 1024px){.kt-accordion-id237_187a25-03 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}}@media all and (max-width: 1024px){.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #e7eaf0;border-right:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;border-left:1px solid #e7eaf0;}}@media all and (max-width: 1024px){.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id237_187a25-03 .kt-blocks-accordion-header:focus-visible{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}@media all and (max-width: 1024px){.kt-accordion-id237_187a25-03 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}@media all and (max-width: 767px){.kt-accordion-id237_187a25-03 .kt-accordion-inner-wrap{display:block;}.kt-accordion-id237_187a25-03 .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child){margin-top:10px;}.kt-accordion-id237_187a25-03 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #e7eaf0;border-right:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;border-left:1px solid #e7eaf0;}.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id237_187a25-03 .kt-blocks-accordion-header:focus-visible{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id237_187a25-03 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id237_187a25-03 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}<\/style>\n<div class=\"wp-block-kadence-accordion alignnone\"><div class=\"kt-accordion-wrap kt-accordion-id237_187a25-03 kt-accordion-has-9-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right\" style=\"max-width:none\"><div class=\"kt-accordion-inner-wrap\" data-allow-multiple-open=\"true\" data-start-open=\"none\">\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane237_958267-4b\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">How do I crop an image into a circle with a transparent background?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Use a tool with a circular crop shape, position the frame over your subject, and export as PNG. PNG stores transparency, so the area outside the circle stays invisible. Exporting as JPG instead is why circles often arrive inside a white box.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-2 kt-pane237_266050-ca\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Why does my circle crop have a white background?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Because it was saved as JPG, which cannot store transparency and fills those pixels with a solid color. Re-export the same crop as PNG and the corners disappear. The crop itself was never the problem.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-3 kt-pane237_b07e0a-66\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">What size should a circular profile picture be?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Between 400 \u00d7 400 and 800 \u00d7 800 covers every major platform comfortably: YouTube wants 800, LinkedIn and X want 400, Instagram displays at 320. Upload square; platforms apply the circular mask themselves.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-4 kt-pane237_5c7af0-c0\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Can I crop a circle without Photoshop?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">Yes. Browser-based crop tools do it in a few clicks with no install, and the good ones process the image locally so private photos never upload. Photoshop&#8217;s approach (elliptical marquee, feather, layer mask) works too, but it&#8217;s a heavy tool for a one-minute job.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-9 kt-pane237_d02ca1-b0\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">Does cropping to a circle lose image quality?<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<p class=\"wp-block-paragraph\">No. Cropping only removes pixels outside the shape; the pixels inside stay exactly as they were. Quality loss comes from enlarging a small crop afterward or from heavy compression on export, not from the circular shape itself.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>To crop an image into a circle you need two things, and most guides only mention the first: a round&#8230;<\/p>\n","protected":false},"author":1,"featured_media":242,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":3,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":243,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions\/243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/media\/242"}],"wp:attachment":[{"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artsflick.com\/blog\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}