Add support for PNG file extension

[Kyzegs]

Some platforms (Discord in my case) do not parse or embed SVG images. It would be great if we could use the PNG file extension instead in cases like this.

[Kyzegs]

Hey there! Is it possible to give me an ETA on this? If not, that's fine. I can imagine that you might be busy.

[FlorianKoerner]

Hi. About the end of November.

[Kyzegs]

Awesome! Appreciate it.

[FlorianKoerner]

My goal is to keep the official API instance running fast, stable and cost effective. That's why I did a little performance test today.

I used a 4 core / 16GB GitHub Workspace environment for the test. I tested how many avatars in the size of 512x512px with the avatar style "Adventurer" can be created on average per second. The result for the PNG format is unfortunately not that impressive.

SVG
~24.000 ops/sec

PNG (with sharp)
19 ops/sec (-99.92%)

PNG (with headless chrome)
3 ops/sec (-99.99%)

I knew that generating a PNG would be significantly slower, but not that it's at least 99.9% slower. So I can't offer it via the official API instance because then the cost would explode.

To make a long story short: PNG support will be built into the API, but not enabled on the official instance. If there is interest in PNG output, unfortunately you have to host the API yourself.

[FlorianKoerner]

After a few optimizations, we get to 67 ops/sec with Sharp (-99,70% in this run). I also did another test with canvg + node-canvas and resvg.

create#svg x 22,137 ops/sec ±4.82% (84 runs sampled)
create#png#sharp x 67.13 ops/sec ±1.56% (80 runs sampled)
create#png#headless x 3.41 ops/sec ±3.66% (21 runs sampled)
create#png#canvg+node-canvas x 23.30 ops/sec ±7.48% (62 runs sampled)
create#png#resvg x 52.38 ops/sec ±1.83% (68 runs sampled)
Fastest is create#svg

Do you know a more effective method?

The API currently receives up to 5,000 requests per second. The server configuration is very similar to that of the GitHub Workspace. But even with the use of all cores (benchmark was done single-core) the API could not handle the mass of requests.

[FlorianKoerner]

sharp and resvg have been the fastest in my tests so far. I disabled the system fonts for resvg to get even better values here. (They only need to be enabled for "initials"). And if I limit the size of the PNG avatars, more avatars can be created in the same time. Benchmark results:

Single Core

512x512px

sharp x 68.13 ops/sec ±2.28% (72 runs sampled)
resvg x 80.35 ops/sec ±1.62% (76 runs sampled)

256x256px

sharp x 148 ops/sec ±1.88% (78 runs sampled)
resvg x 244 ops/sec ±1.60% (82 runs sampled)

128x128px

sharp x 231 ops/sec ±1.59% (83 runs sampled)
resvg x 584 ops/sec ±1.64% (83 runs sampled)

Multi Core

512x512px

sharp x 109 ops/sec ±2.08% (68 runs sampled)
resvg x 145 ops/sec ±3.03% (70 runs sampled)

256x256px

sharp x 234 ops/sec ±1.71% (79 runs sampled)
resvg x 424 ops/sec ±3.49% (78 runs sampled)

128x128px

sharp x 352 ops/sec ±1.65% (83 runs sampled)
resvg x 964 ops/sec ±3.01% (74 runs sampled)

584 ops/sec in single core is fast enough for support in the official API instance, I think. The avatar sizes are then limited to 128px. That should be enough in most cases. Even on Retina displays this is still 64px.

If larger resolutions are needed for PNG avatars, you have to host the API yourself. I think this should be a good compromise.

[Kyzegs]

Thank you for the hard work. I do not know of ways to speed this up no. The avatar size limit should not be an issue in most cases.

[FlorianKoerner]

The first alpha version of the upcoming API with PNG support is now available.

You can find the documentation here:
https://api.dicebear.com/docs

I would recommend to use only the 4.x routes for now. Version 5.0 is still the alpha version and quite buggy.

Example URL:
https://api.dicebear.com/4.x/adventurer/png?seed=john-doe

[FlorianKoerner]

It is now officially supported.

#179

[yisibl]

I'm glad that resvg-js is working well. Now we've also added a playground: https://resvg-js.vercel.app/

[logemann]

Is PNG really supported inside the NPM package? Cant see anything in the API documentation here: https://avatars.dicebear.com/docs/installation

The other mentioned URL https://api.dicebear.com/docs is 404.

Thanks for any input

[FlorianKoerner]

Hi @logemann

only the HTTP-API and CLI supports the PNG format. This is not planned for the JS library because of the different target platforms.

If you want to convert an SVG to PNG, you can do it as follows:

Browser

import { createAvatar } from "@dicebear/avatars";
import * as style from "@dicebear/adventurer";

const size = 512;

const avatar = createAvatar(style, {
    size: size,
    dataUri: true,
});

const canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;

const context = canvas.getContext("2d");

var img = document.createElement("img");
img.width = size;
img.height = size;

img.setAttribute("src", avatar);

img.onload = function () {
    context.drawImage(img, 0, 0, size, size);

    const png = canvas.toDataURL("image/png");
};

NodeJS

npm install @resvg/resvg-js

import { createAvatar } from "@dicebear/avatars";
import * as style from "@dicebear/adventurer";
import { render } from '@resvg/resvg-js';

const size = 512;

const avatar = createAvatar(style, {
    size: size,
    dataUri: true,
});

const png = render(avatar);

[logemann]

ah thanks. Thought i looked in the wrong docs. And thanks for the resvg pointer. I started trying out different solutions with mixed results in terms of performance and footprint but resvg looks nice.