<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	     xmlns:dc="http://purl.org/dc/elements/1.1/"
	   xmlns:atom="http://www.w3.org/2005/Atom"
	     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>avatar &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/tag/avatar/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Thu, 23 Oct 2025 14:43:24 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>avatar &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[.well-known/avatar]]></title>
		<link>https://shkspr.mobi/blog/2024/03/well-known-avatar/</link>
					<comments>https://shkspr.mobi/blog/2024/03/well-known-avatar/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Sun, 17 Mar 2024 12:34:47 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[avatar]]></category>
		<category><![CDATA[IETF]]></category>
		<category><![CDATA[open standards]]></category>
		<category><![CDATA[standards]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=49907</guid>

					<description><![CDATA[Hot on the heels of a post I wrote 4 years ago, wouldn&#039;t it be useful to have a well-known URl for user avatar images?  When I sign up to a web service, I don&#039;t want to faff around uploading an image to use as my avatar. I want that service to look at my email address or social-sign-in and automatically pick up my preferred graphic.  Here&#039;s how I see it working.   A user signs in to a service…]]></description>
										<content:encoded><![CDATA[<p>Hot on the heels of <a href="https://shkspr.mobi/blog/2020/03/one-avatar-to-rule-them-all/">a post I wrote 4 years ago</a>, wouldn't it be useful to have a <a href="https://en.wikipedia.org/wiki/Well-known_URI">well-known URl</a> for user avatar images?</p>

<p>When I sign up to a web service, I don't want to faff around uploading an image to use as my avatar. I want that service to look at my email address or social-sign-in and automatically pick up my preferred graphic.</p>

<p>Here's how I see it working.</p>

<ol>
<li>A user signs in to a service with the email address <code>username@example.com</code></li>
<li>In a similar way to <a href="https://www.rfc-editor.org/rfc/rfc7033">WebFinger</a>, the service makes a request to:

<ul>
<li><code>example.com/.well-known/avatar?resource=acct:username@example.com</code></li>
</ul></li>
<li>If the request's <code>Accept</code> header has a MIME type of <code>image/*</code>, then the server immediately returns an image.</li>
<li>If the request's <code>Accept</code> header has a MIME type of <code>application/json</code>, then the server can return a WebFinger-style document with <code>"rel":"http://webfinger.net/rel/avatar"</code> and, perhaps, a list of different images, formats, and sizes.</li>
</ol>

<p>This makes it incredibly simple for people to use the same avatar <em>everywhere</em>.</p>

<p>It also means that if you're designing a service which publicly shows usernames, you can make avatars available without an expensive API call. For example, Twitter could make user's avatars available at:
<code>twitter.com/.well-known/avatars?resource=acct:edent</code></p>

<h2 id="but-what-about"><a href="https://shkspr.mobi/blog/2024/03/well-known-avatar/#but-what-about">But what about...?</a></h2>

<p>This is a sketch of an idea. I'd like to know if people think it is useful before I take it any further.</p>

<p>I don't think it breaches privacy - a user's image is public on all services anyway.</p>

<p>Users should still be given the option of changing their avatar if they want.</p>

<p>A service shouldn't expose the user's email address - they should proxy the image.</p>

<p>Anything else I should have thought of?</p>

<p><ins datetime="2024-03-18T15:05:30+00:00">Updates</ins></p>

<p>To stave off some common points raised.</p>

<ul>
<li>No this isn't like <a href="https://shkspr.mobi/blog/2020/03/one-avatar-to-rule-them-all/">Gravatar</a>. That works by being a 3rd party service and using the MD5 of your email address.</li>
<li>No this isn't like <a href="https://www.libravatar.org/">Libravatar</a>. See above.</li>
<li>No this isn't like WebFinger. That only returns JSON.</li>
<li>No this isn't like h-card. That requires a server to parse HTML in order to find an image.</li>
<li>No this isn't like <a href="https://shkspr.mobi/blog/2022/08/dns-esoterica-bimi-svg-in-dns-txt-wtf/">BIMI</a>. That's expensive and only supports SVG.</li>
</ul>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=49907&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2024/03/well-known-avatar/feed/</wfw:commentRss>
			<slash:comments>31</slash:comments>
		
		
			</item>
		<item>
		<title><![CDATA[Goodbye avatars .io - hello unavatar!]]></title>
		<link>https://shkspr.mobi/blog/2020/07/goodbye-avatars-io-hello-unavatar/</link>
					<comments>https://shkspr.mobi/blog/2020/07/goodbye-avatars-io-hello-unavatar/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Fri, 03 Jul 2020 11:43:30 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[avatar]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[programming]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=35489</guid>

					<description><![CDATA[Given a social media user&#039;s username, how do you get a picture of their avatar?  I always used avatars.io - but sadly that service has bitten the dust. So I&#039;ve switched to unavatar.  It&#039;s dead easy to use.  https://unavatar.now.sh/twitter/edent will return @edent&#039;s avatar.  You can use GitHub, Facebook, Gravatar, Instagram, Telegram, YouTube, SoundCloud, and a couple of other providers.  Simple…]]></description>
										<content:encoded><![CDATA[<p>Given a social media user's username, how do you get a picture of their avatar?</p>

<p>I always used avatars.io - but sadly that service has bitten the dust. So I've switched to <a href="https://github.com/microlinkhq/unavatar">unavatar</a>.</p>

<p>It's dead easy to use.  <a href="https://unavatar.now.sh/twitter/edent"><code>https://unavatar.now.sh/twitter/edent</code></a> will return @edent's avatar.  You can use GitHub, Facebook, Gravatar, Instagram, Telegram, YouTube, SoundCloud, and a couple of other providers.</p>

<p>Simple to use, and easy to embed in an <code>&lt;img&gt;</code> element.</p>

<p>It's also <a href="https://github.com/Kikobeats/unavatar">open source</a> and looks pretty easy to deploy if you want to host it yourself.</p>

<h2 id="why-is-this-needed"><a href="https://shkspr.mobi/blog/2020/07/goodbye-avatars-io-hello-unavatar/#why-is-this-needed">Why is this needed?</a></h2>

<p>In an ideal world, there would be a standard for where to find a user's avatar. Possibly a <a href="https://tools.ietf.org/html/rfc8615"><code>.well-known</code></a> resource. Until then, we have to make do with 3rd party services playing intermediary.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=35489&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2020/07/goodbye-avatars-io-hello-unavatar/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title><![CDATA[Previewing Circular Avatars]]></title>
		<link>https://shkspr.mobi/blog/2017/07/previewing-circular-avatars/</link>
					<comments>https://shkspr.mobi/blog/2017/07/previewing-circular-avatars/#respond</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Sun, 02 Jul 2017 11:04:05 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[avatar]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[HowTo]]></category>
		<category><![CDATA[mvp]]></category>
		<category><![CDATA[Social Networks]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=25441</guid>

					<description><![CDATA[Play with the demo  I was lucky enough to go to Number 10 Downing Street for a meeting a few weeks ago.  A perfect opportunity for a photo of me by that famous door.    Being the vain man that I am, I wanted to set it as my avatar photo.  But Twitter and other social networks now use circular avatars.    The &#34;10&#34; has been obliterated and part of my head is missing.  So I&#039;ve created a quick way to …]]></description>
										<content:encoded><![CDATA[<p><a href="https://edent.github.io/AvatarPreview/">Play with the demo</a></p>

<p>I was lucky enough to go to Number 10 Downing Street for a meeting a few weeks ago.  A perfect opportunity for a photo of me by that famous door.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2017/07/Terence-at-Number-10-Square.jpg" alt="Terence at Number 10 Downing Street" width="256" height="256" class="aligncenter size-full wp-image-25443" style="border-radius:0%">

<p>Being the vain man that I am, I wanted to set it as my avatar photo.  But Twitter and other social networks now use circular avatars.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2017/07/Terence-at-Number-10-Circle.jpg" alt="Terence at Number 10 - the door number is obscured as is part of his face because the photo has been cropped in a circle" width="256" height="256" class="aligncenter size-full wp-image-25442" style="border-radius:0%">

<p>The "10" has been obliterated and part of my head is missing.</p>

<p>So I've created a quick way to preview avatar images to see how they'll look on both squares and circles.  It places a simple overlay on top of your image - like so:</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2017/07/Guidelines.jpg" alt="The same photo - but with a red circular guideline superimposed" width="262" height="262" class="aligncenter size-full wp-image-25444" style="border-radius:0%">

<p>Images can be panned around and zoomed using the mouse.</p>

<p>You can <a href="https://edent.github.io/AvatarPreview/">play with the demo</a></p>

<iframe src="https://edent.github.io/AvatarPreview/" width="100%" height="400px"></iframe>

<p>This is only a Minimum Viable Prototype - pull requests welcome!</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=25441&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2017/07/previewing-circular-avatars/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
