OG-Bilder, Social-Cards, Zertifikate, dynamische Grafiken - aus deinen eigenen Templates, in deiner eigenen Schrift.
curl -H "x-api-key: KEY" -H "content-type: application/json" \
-d '{"html":"Hallo","css":".c{font:700 48px sans-serif}","width":1200,"height":630}' \
https://api.apiwerk.info/v1/image -o card.png
Jeder Beitrag, den jemand aus deinem Shop teilt, sieht bei LinkedIn und WhatsApp gleich aus: dasselbe graue Standardbild, weil niemand Zeit hat, für 200 Artikel einzeln eine Grafik zu bauen. Und die wenigen Vorlagen, die es gibt, liegen in einem Programm, das genau eine Person im Team bedienen kann. Fällt die aus, gibt es gar keine Bilder mehr.
| Zweck | width × height | Bemerkung |
|---|---|---|
| Open-Graph-Vorschau (LinkedIn, Facebook, WhatsApp, Slack) | 1200 × 630 | Verhältnis 1,91 : 1, der De-facto-Standard |
| Große Karte bei X | 1200 × 600 | Verhältnis 2 : 1 |
| Quadratisch (Instagram, Profilkacheln) | 1080 × 1080 | Verhältnis 1 : 1 |
| Zertifikat, A4 quer | 1754 × 1240 | 150 dpi im Viewport, mit scale=2 also 300 dpi in der Datei |
Achtung bei der Pixeldichte: scale steht hier standardmäßig auf 2, nicht auf 1 wie beim Screenshot. width=1200&height=630 liefert also ein PNG mit 2400 × 1260 Pixeln. Wer exakt 1200 × 630 braucht, setzt scale=1. Der Viewport selbst darf 16 bis 3840 Pixel breit und 16 bis 2160 Pixel hoch sein, die Skalierung kommt obendrauf. Ohne Angabe rendert die API 800 × 418 bei Qualität 90 und bricht nach 20 Sekunden ab.
Zwei Fallen bei fester Größe. Erstens der Standardrand: Dein HTML wird ohne CSS-Reset in die Seite gesetzt, Chromium gibt body also seine voreingestellten 8 Pixel Außenabstand — ohne body{margin:0} im css-Feld bekommt jedes Open-Graph-Bild einen schmalen hellen Rahmen. Zweitens der Überlauf: Diese API nimmt den Ausschnitt auf, nicht die ganze Seite. Ist der Inhalt höher als height, wird er unten abgeschnitten. Wenn die Höhe vom Inhalt abhängt — Zertifikate mit langen Namen, Zitatkacheln mit variablem Text —, gib einen selector auf den äußeren Container an; dann wird genau dieses Element in seiner tatsächlichen Höhe aufgenommen. transparent=true wirkt nur bei PNG, weil JPEG keine Transparenz kennt.
Gerendert wird in einem Linux-Container. Arial, Helvetica, Calibri und Segoe UI sind dort nicht installiert. Für Arial, Helvetica, Times New Roman und Courier New springt die metrikgleiche Liberation-Familie ein: Der Zeilenumbruch bleibt, die Form der Buchstaben ändert sich leicht. Für Calibri und Segoe UI gibt es keinen metrikgleichen Ersatz — dort verschiebt sich auch der Umbruch, und ein knapp gesetzter Titel kann eine Zeile länger werden. Wer font-family: Arial schreibt und sich über andere Buchstaben wundert, sieht genau diesen Effekt.
Zwei Wege sind verlässlich, und beide haben eine Bedingung, die im Browser nicht gilt:
localhost, aus einem privaten Netz oder von einem Host, der dorthin auflöst, werden abgebrochen — und die Schrift fehlt kommentarlos.Vor der Aufnahme wartet der Renderer auf document.fonts.ready. Das deckt alles ab, was im CSS deklariert ist — eine Schrift, die erst per JavaScript nachgeladen wird, wird nicht abgewartet. Die Felder html und css dürfen je bis zu 2 MB groß sein; eine eingebettete WOFF2-Schrift passt da bequem hinein.
Überall, wo ein Bild gebraucht wird, dessen Inhalt sich ändert: das Share-Bild mit Artikel-Titel, das Zertifikat mit Teilnehmernamen, die Preis-Kachel mit Tagespreis. Statt Grafikprogramm: eine HTML-Vorlage, ein API-Aufruf, fertig ist das PNG.
Ja — jedes Vorschaubild, das beim Teilen einer apiwerk.info-Seite erscheint, erzeugt genau diese API live. Das Produkt betreibt seine eigene Website mit.
PNG (auch mit transparentem Hintergrund) und JPEG in frei wählbarer Größe, auch mit 2x-Auflösung für scharfe Retina-Darstellung. Für Open-Graph-Bilder sind 1200×630 der Standard.
Ja — Webfonts per @font-face oder eingebettete Base64-Schriften funktionieren wie im Browser. Damit bleiben Vorschaubilder und Zertifikate exakt im Marken-Design.
Ein typisches 1200×630-Bild ist in ein bis zwei Sekunden fertig, inklusive Font-Rendering. Für Serien lassen sich Aufrufe parallelisieren; die Warteschlange sorgt für stabile Zeiten.
Aktuell ist alles in der Beta komplett kostenlos — keine Kreditkarte, keine Laufzeit. Nach dem Verkaufsstart beginnen die Tarife bei 7,00 € pro Monat (1.000 Aufrufe) — bewusst rund die Hälfte des üblichen Marktpreises. Wer in der Beta dabei ist, wird vor jeder Umstellung informiert.
E-Mail-Adresse in das Formular auf dieser Seite eintragen — der API-Schlüssel erscheint sofort, ohne Bestätigungs-Wartezeit. Damit hast du 1.000 Aufrufe pro Monat frei. Der Schlüssel wird als Hash gespeichert und nur einmal angezeigt, also direkt sicher ablegen.
Keine Kreditkarte, keine Wartezeit. E-Mail rein, Schlüssel raus.
Marktfuehrer: 14 $ für 1.000 Bilder — wir starten bei der Haelfte.
| Stufe | Renders/Monat | später €/Monat |
|---|---|---|
| Frei | 50 | immer kostenlos |
| Start | 1.000 | 7,00 |
| Wachstum | 10.000 | 34,50 |
| Skala | 50.000 | 94,50 |
Alle vier Produkte · Betrieb in der EU · private Netze für Render-Ziele gesperrt
Verwandt: Screenshot-API · PDF-API · Website-Archiv · QR-Code-API
E-Mail eintragen, Schlüssel erscheint sofort auf der Seite. Kein Konto, keine Kreditkarte, keine Freischaltung durch uns.
Ein einziger HTTP-Aufruf mit deinem Schlüssel im Kopf — aus jeder Programmiersprache, jedem Framework, jedem Automatisierungswerkzeug.
Du bekommst sauberes JSON oder die fertige Datei zurück. Fehler kommen als klare deutsche Meldung, nicht als Rätsel.
curl -H "x-api-key: KEY" -H "content-type: application/json" \
-d '{"html":"<div class=c>Hallo</div>","css":".c{font:700 48px sans-serif}","width":1200,"height":630}' \
https://api.apiwerk.info/v1/image -o card.png
Wir legen die Preise jetzt schon offen, damit du planen kannst. Beta-Nutzer werden rechtzeitig informiert, bevor sich etwas ändert — niemand wird automatisch in einen bezahlten Tarif überführt.
Alle Preise zuzüglich Umsatzsteuer. Monatlich kündbar, keine Mindestlaufzeit, keine Einrichtungsgebühr.