<p>I have had problems importing vcards onto my Android phone. After a lot of troubleshooting, I tracked it down to embedded images in the card. The PHOTO;VALUE field to be precise.</p>

<p>Some images worked and some didn't, and looking at the properties some that worked were larger than others that didn't. In the end I tracked down a post on <a href="https://stackoverflow.com/questions/17834815/how-to-find-the-max-image-size-supported-for-contacts-images">stackoverflow</a> that hinted that the aspect ratio was important. And sure enough it was.</p>

<blockquote class="wp-block-quote">
<p>starting with jelly bean (4.1), android now supports contact images that are 720x720.<br />before, starting with ICS (4.0), android has supported contact images that are 256x256.<br />and before that, contact photos had just a size of a thumbnail - 96x96.</p>
<cite><a href="https://stackoverflow.com/users/878126/android-developer">Stack exchange</a> </cite>
</blockquote>


<p>I tried a 720x720 on a few phones but decided to settle on 256x256 for now. </p>


<p>To do image manipulation, I tend to use the <a href="https://www.graphicsmagick.org/">GraphicsMagick</a> tools instead of the more popular <a href="https://www.imagemagick.org/script/index.php">ImageMagick</a> suite. You should be able to achieve the same result in either.</p>


<p>My requirements were:</p>
<ul>
<li>The images should be scaled so that the maximum height/width shrinks to 256, maintaining the aspect ratio.</li>
<li>The images should always be 256x256 in size.</li>
<li>Scaled images should be padded and centered on a white background.</li>
<li>All color profile information should be removed.</li>
</ul>


<p>To use an example I took the following image and saved it as Linus_Torvalds.jpg</p>


<p>By <a title="User:Krd" href="//commons.wikimedia.org/wiki/User:Krd">Krd</a> (photo)<a class="new" title="User:Von Sprat (page does not exist)" href="//commons.wikimedia.org/w/index.php?title=User:Von_Sprat&amp;action=edit&amp;redlink=1">Von Sprat</a> (crop/extraction) - <a title="File:LinuxCon Europe Linus Torvalds 03.jpg" href="//commons.wikimedia.org/wiki/File:LinuxCon_Europe_Linus_Torvalds_03.jpg">File:LinuxCon Europe Linus Torvalds 03.jpg</a>, <a title="Creative Commons Attribution-Share Alike 4.0" href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=54706023">Link</a></p>


<p>Step one is to use the <a href="https://href=&quot;https://www.graphicsmagick.org/GraphicsMagick.html#details-size">-size</a> 256x256 option which you would think would do the scaling, but in fact it only reduces the file to 366x509 which is not what I expected.</p>

<pre><code>$ gm convert -size 256x256 "Linus_Torvalds.jpg" Linus_Torvalds_1.jpg<br />$ gm identify Linus_Torvalds_1.jpg
Linus_Torvalds_1.jpg JPEG 366x509+0+0 DirectClass 8-bit 56.1Ki 0.000u 0m:0.000002</code></pre>


<p><img style="border-style: solid;" src="https://hackerpublicradio.org/eps/hpr2730/Linus_Torvalds_1.jpg" /></p>


<p>However it appears that the option is used when creating new files, and is also used by the processor to determine the intended target size. Which is why I left it in. So what we actually need is the <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-resize">-resize</a> option.</p>

<pre><code>
$ gm convert -size 256x256 "Linus_Torvalds.jpg" -resize 256x256 Linus_Torvalds_2.jpg
$ gm identify Linus_Torvalds_2.jpg
Linus_Torvalds_2.jpg JPEG 184x256+0+0 DirectClass 8-bit 47.7Ki 0.000u 0m:0.000001s</code><code>
</code></pre>

<p><img style="border-style: solid;" src="https://hackerpublicradio.org/eps/hpr2730/Linus_Torvalds_2.jpg" /></p>

<p>So this has done a good job at scaling the image down. It's now scaled correctly so that the biggest edge is scaled down to 256. In this case it was the height but the width is now shorter than what we need. We do want to maintain the aspect ratio so that we don't distort the image but 184x256 is not 1:1 aspect ratio nor is it the needed dimensions of 256x256.</p>

<p>The solution to this is to use the <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-extent">-extent</a> command.</p>

<pre><code>$ gm convert -size 256x256 "Linus_Torvalds.jpg" -resize 256x256 -extent 256x256 Linus_Torvalds_3.jpg
$ gm identify Linus_Torvalds_3.jpg
Linus_Torvalds_3.jpg JPEG 256x256+0+0 DirectClass 8-bit 48.0Ki 0.000u 0m:0.000001s</code></pre>


<p><img style="border-style: solid;" src="https://hackerpublicradio.org/eps/hpr2730/Linus_Torvalds_3.jpg" /></p>


<p>This gives us the correct size and a 1:1 aspect ratio, but the image is left justified. To fix this we need to use the <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-gravity">-gravity</a> command. That needs to be the first argument of the command. Finding the correct order of the commands took some trial and error.</p>

<pre><code>$ gm convert -gravity center -size 256x256 "Linus_Torvalds.jpg" -resize 256x256 -extent 256x256 Linus_Torvalds_4.jpg
$ gm identify Linus_Torvalds_4.jpg
Linus_Torvalds_4.jpg JPEG 256x256+0+0 DirectClass 8-bit 48.5Ki 0.000u 0m:0.000001s</code></pre>

<p><img style="border-style: solid;" src="https://hackerpublicradio.org/eps/hpr2730/Linus_Torvalds_4.jpg" /></p>

<p>Finally we remove all profile information using <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-profile">+profile</a> which should make the image more generic.</p>

<pre><code>$ gm convert -gravity center -size 256x256 "Linus_Torvalds.jpg" -resize 256x256 -extent 256x256 +profile "*" Linus_Torvalds_5.jpg
$ gm identify Linus_Torvalds_5.jpg
Linus_Torvalds_5.jpg JPEG 256x256+0+0 DirectClass 8-bit 5.7Ki 0.000u 0m:0.000001s</code></pre>

<p>Putting it all together we get.</p>

<pre><code>gm convert <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-gravity">-gravity</a> center <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-size">-size</a> 256x256 "big-image.jpg" <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-resize">-resize</a> 256x256 <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-extent">-extent</a> 256x256 <a href="https://www.graphicsmagick.org/GraphicsMagick.html#details-profile">+profile</a> "*" "256x256_image.jpg"
</code></pre>

<p><img style="border-style: solid;" src="https://hackerpublicradio.org/eps/hpr2730/Linus_Torvalds_5.jpg" /></p>

<p>You should now be able to add these images to vcards without any problem.</p>

<p>Here is a one liner to create 96x96 256x256 and 720x720 thumbnails of all the jpg images in a directory.</p>

<p>&nbsp;</p>

<pre><code>for image in *jpg;do for size in 96x96 256x256 720x720; do gm convert -gravity center -size ${size} "${image}" -resize ${size} -extent ${size} +profile "*" "thumbnail-${size}-${image}";done;done</code></pre>

<p>Also available <a href="https://kenfallon.com/resizing-images-for-vcard-on-android/">here</a></p>
