PageSourceSearch

https://www.base64-image.de/api/docs

html base64-image.de collected 2026-10-02 05:53:25 UTC 50,247 bytes, 1,157 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>API Documentation - Base64 Image Encoder</title>
7
8    
9    <meta name="description"
10          content="API documentation for the Base64 Image Encoder. Convert images to base64 encoding programmatically.">
11    <meta name="viewport" content="width=device-width, initial-scale=1">
12    <meta name="author" content="Geek Cell GmbH"/>
13    <meta name="csrf-token" content="oFdWcO53KZ6Z1OAW9miOTTCFWQx6nVMbETK8TC3A">
14    <meta name="google-site-verification" content="_Qx_yVYLrO0ToyccVzvN519rYxKKhfQM3QXkJAZHBLE"/>
15    <meta name="google-adsense-account" content="ca-pub-6838470397339292">
16
17    
18    <link rel="canonical" href="https://www.base64-image.de/api/docs" />
19
20    
21    
22    
23        <meta property="og:type" content="website" />
24    <meta property="og:site_name" content="base64-image.de" />
25    <meta property="og:url" content="https://www.base64-image.de/api/docs" />
26    <meta property="og:locale" content="en_US" />
27    <meta property="og:title" content="API Documentation - Base64 Image Encoder" />
28    <meta property="og:description" content="API documentation for the Base64 Image Encoder. Convert images to base64 encoding programmatically." />
29    <meta property="og:image" content="https://www.base64-image.de/img/og-default.png" />
30
31    
32    <meta name="twitter:card" content="summary_large_image" />
33    <meta name="twitter:title" content="API Documentation - Base64 Image Encoder" />
34    <meta name="twitter:description" content="API documentation for the Base64 Image Encoder. Convert images to base64 encoding programmatically." />
35    <meta name="twitter:image" content="https://www.base64-image.de/img/og-default.png" />
36
37    
38    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
39    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
40    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
41    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
42    <link rel="manifest" href="/site.webmanifest">
43    <meta name="theme-color" content="#1E40AF">
44
45                
46    <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.list-item][wire\:loading\.list-item], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}dialog#livewire-error::backdrop {background-color: rgba(0, 0, 0, .6);}</style>
47
48    
49                <link rel="preload" href="/build/assets/bricolage-grotesque-latin-DLoelf7F.woff2" as="font" type="font/woff2" crossorigin>
50                <link rel="preload" href="/build/assets/bricolage-grotesque-latin-ext-CcLUaPy7.woff2" as="font" type="font/woff2" crossorigin>
51                <link rel="preload" href="/build/assets/Phosphor-DtdjzkpE.woff2" as="font" type="font/woff2" crossorigin>
52                <link rel="preload" href="/build/assets/Phosphor-Fill-D4CDmGRg.woff2" as="font" type="font/woff2" crossorigin>
53    
54    
55    <link rel="preload" as="style" href="https://www.base64-image.de/build/assets/base-B110zl2p.css" /><link rel="stylesheet" href="https://www.base64-image.de/build/assets/base-B110zl2p.css" data-navigate-track="reload" />    
56    
57        
57<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="322fa531-bee4-44f6-b5fd-4d9246d43c49"
58            data-blockingmode="auto" type="text/javascript"></script>
58
59    
59<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript" async></script>
59
60        </head>
61<body>
62
63<a href="#main-content" class="visually-hidden-focusable">Skip to content</a>
64
65<header id="header">
66    <div class="container">
67        <div class="header-inner">
68            <div id="header-logo">
69                <a href="/">
70                    <span class="logo-text">base64-image</span><span class="logo-tld">.de</span>
71                </a>
72            </div>
73            <div class="header-nav">
74                <a id="menu-button-mobile"
75                   href="#"
76                   aria-label="Toggle menu"
77                   aria-expanded="false"
78                   onclick="toggleMobileMenu(); return false;">
79                    <span class="burger-icon">
80                        <span></span><span></span><span></span>
81                    </span>
82                </a>
83
84                <ul id="menu">
85                    <li class="menu-item ">
86    <a href="https://www.base64-image.de/tutorial">
87        <i class="ph ph-book-open"></i>
88        Tutorial
89    </a>
90</li>
91<li class="menu-item ">
92    <a href="https://www.base64-image.de/faq">
93        <i class="ph ph-question"></i>
94        FAQ
95    </a>
96</li>
97<li class="menu-item ">
98    <a href="https://www.base64-image.de/donation">
99        <i class="ph ph-heart"></i>
100        Donation
101    </a>
102</li>
103<li class="menu-item ">
104    <a href="https://www.base64-image.de/api">
105        <i class="ph ph-code"></i>
106        API
107    </a>
108</li>
109<li class="menu-item menu-login">
110    <a href="https://www.base64-image.de/login">
111        <i class="ph ph-sign-in"></i>
112        Login
113    </a>
114</li>
115                </ul>
116            </div>
117        </div>
118    </div>
119</header>
120<div id="menu-container-mobile">
121    <div class="container">
122        <ul id="menu-mobile">
123            <li class="menu-item ">
124    <a href="https://www.base64-image.de/tutorial">
125        <i class="ph ph-book-open"></i>
126        Tutorial
127    </a>
128</li>
129<li class="menu-item ">
130    <a href="https://www.base64-image.de/faq">
131        <i class="ph ph-question"></i>
132        FAQ
133    </a>
134</li>
135<li class="menu-item ">
136    <a href="https://www.base64-image.de/donation">
137        <i class="ph ph-heart"></i>
138        Donation
139    </a>
140</li>
141<li class="menu-item ">
142    <a href="https://www.base64-image.de/api">
143        <i class="ph ph-code"></i>
144        API
145    </a>
146</li>
147<li class="menu-item menu-login">
148    <a href="https://www.base64-image.de/login">
149        <i class="ph ph-sign-in"></i>
150        Login
151    </a>
152</li>
153        </ul>
154    </div>
155</div>
156
157<main id="main-content">
158    <div class="content-page api-docs">
159
160    
161    <div class="page-hero">
162    <div class="page-hero-content">
163                <h1>API documentation</h1>
164                    <p class="page-hero-subtitle">Convert images to base64 encoding programmatically. Integrate with any language in minutes.</p>
165                            <div class="page-hero-badges"><div class="page-hero-badge"><i class="ph ph-globe"></i> Base URL: <code>https://www.base64-image.de/api/v1</code></div><div class="page-hero-badge"><a href="/openapi.yaml" class="page-hero-link"><i class="ph ph-file-code"></i> OpenAPI Spec</a></div></div>
166                            <p class="page-hero-updated"><i class="ph ph-clock-clockwise"></i> Last updated: April 2026</p>
167            </div>
168    </div>
169
170    
171    <div class="api-toc">
172        <div class="api-toc-title">Quick navigation</div>
173        <ul class="api-toc-list">
174            <li><a href="#auth"><i class="ph ph-key"></i> Authentication</a></li>
175            <li><a href="#endpoints"><i class="ph ph-plug"></i> Endpoints</a></li>
176            <li><a href="#rate-limits"><i class="ph ph-timer"></i> Rate Limits</a></li>
177            <li><a href="#errors"><i class="ph ph-warning"></i> Error Codes</a></li>
178            <li><a href="#examples"><i class="ph ph-code"></i> Code Examples</a></li>
179        </ul>
180    </div>
181
182    
183    <div class="api-section" id="auth">
184        <h3><i class="ph ph-key"></i> Authentication</h3>
185        <p>
186            All API requests require a Bearer token. Create tokens in your
187                            Dashboard after <a href="https://www.base64-image.de/auth/github">logging in with GitHub</a>.
188                    </p>
189        <p>Include the token in the <code>Authorization</code> header:</p>
190        <pre class="language-bash"><code class="language-bash">Authorization: Bearer YOUR_API_TOKEN</code></pre>
191        <p>Requests without a valid token receive a <code>401 Unauthenticated</code> response. Banned users receive <code>403 Forbidden</code>.</p>
192
193        <p>If a conversion would exceed your remaining tokens, the API returns <code>402</code> with an <code>insufficient_tokens</code> error.</p>
194    </div>
195
196    
197    <div class="api-section" id="endpoints">
198        <h3><i class="ph ph-plug"></i> Endpoints</h3>
199        <p>All endpoints are prefixed with <code>/api/v1</code> and require authentication. Encode endpoints additionally require sufficient token balance.</p>
200
201        <h4>Encode single image</h4>
202        <div class="endpoint-box">
203            <span class="method-badge method-post">POST</span>
204            <span>/api/v1/encode</span>
205        </div>
206        <p>Upload a single image file as <code>multipart/form-data</code>.</p>
207        <table class="param-table">
208            <thead><tr><th>Parameter</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
209            <tbody>
210                <tr>
211                    <td><code>image</code></td>
212                    <td>file</td>
213                    <td><span class="param-required">required</span></td>
214                    <td>Image file. Accepted formats: jpg, jpeg, jfif, png, gif, bmp, svg, webp, ico, tiff, tif, avif, heic, heif. Max 5 MB.</td>
215                </tr>
216                <tr>
217                    <td><code>optimize-images</code></td>
218                    <td>string</td>
219                    <td><span class="param-optional">optional</span></td>
220                    <td>Set to <code>"true"</code> to optimize JPEG/PNG before encoding (jpegoptim/optipng). Default: false.</td>
221                </tr>
222                <tr>
223                    <td><code>format</code></td>
224                    <td>string</td>
225                    <td><span class="param-optional">optional</span></td>
226                    <td>Controls the format of the <code>output</code> field. Values: <code>raw</code> (default), <code>data_uri</code>, <code>image</code>, <code>css</code>, <code>css_full</code>, <code>markdown</code>, <code>json</code>.</td>
227                </tr>
228                <tr>
229                    <td><code>max_width</code></td>
230                    <td>integer</td>
231                    <td><span class="param-optional">optional</span></td>
232                    <td>Maximum width in pixels (1-4096). Aspect ratio is preserved.</td>
233                </tr>
234                <tr>
235                    <td><code>max_height</code></td>
236                    <td>integer</td>
237                    <td><span class="param-optional">optional</span></td>
238                    <td>Maximum height in pixels (1-4096). Aspect ratio is preserved.</td>
239                </tr>
240                <tr>
241                    <td><code>quality</code></td>
242                    <td>integer</td>
243                    <td><span class="param-optional">optional</span></td>
244                    <td>Output quality for JPEG/WebP (1-100). Default: 80.</td>
245                </tr>
246                <tr>
247                    <td><code>output_format</code></td>
248                    <td>string</td>
249                    <td><span class="param-optional">optional</span></td>
250                    <td>Convert to a different image format. Values: <code>jpeg</code>, <code>png</code>, <code>webp</code>.</td>
251                </tr>
252            </tbody>
253        </table>
254        <div class="response-label"><span class="status-badge-sm">200</span> Response</div>
255        <div class="code-block">
256            <div class="code-block-header">
257                <span class="code-block-lang lang-json"><span class="lang-dot"></span> JSON</span>
258                <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
259            </div>
260        <pre class="language-json"><code class="language-json">{
261    "name": "photo.jpg",
262    "extension": "webp",
263    "size": 32150,
264    "size_encoded": 42867,
265    "mime_type": "image/webp",
266    "width": 512,
267    "height": 384,
268    "convert_time": 0.042,
269    "optimized": 0,
270    "resized": true,
271    "converted": true,
272    "original_width": 1600,
273    "original_height": 1200,
274    "original_size": 45231,
275    "output": "UklGRl4CAABXRUJQVlA...",
276    "tokens_used": 1
277}</code></pre>
278        </div>
279        <p>The <code>output</code> field format depends on the <code>format</code> parameter. By default it contains the raw base64 string. Set <code>format=image</code> to get a ready-to-use <code>&lt;img&gt;</code> tag, <code>format=css</code> for a CSS background rule, etc.</p>
280
281        <h4>Encode batch (up to 20 images)</h4>
282        <div class="endpoint-box">
283            <span class="method-badge method-post">POST</span>
284            <span>/api/v1/encode/batch</span>
285        </div>
286        <p>Upload multiple image files. Each file is processed individually and deducts tokens separately.</p>
287        <table class="param-table">
288            <thead><tr><th>
288Parameter</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
289            <tbody>
290                <tr>
291                    <td><code>images[]</code></td>
292                    <td>file[]</td>
293                    <td><span class="param-required">required</span></td>
294                    <td>Array of image files. Maximum 20 files per request.</td>
295                </tr>
296                <tr>
297                    <td><code>optimize-images</code></td>
298                    <td>string</td>
299                    <td><span class="param-optional">optional</span></td>
300                    <td>Set to <code>"true"</code> to optimize all images before encoding.</td>
301                </tr>
302                <tr>
303                    <td><code>format</code></td>
304                    <td>string</td>
305                    <td><span class="param-optional">optional</span></td>
306                    <td>Controls the format of the <code>output</code> field per result. Values: <code>raw</code> (default), <code>data_uri</code>, <code>image</code>, <code>css</code>, <code>css_full</code>, <code>markdown</code>, <code>json</code>.</td>
307                </tr>
308            </tbody>
309        </table>
310        <div class="response-label"><span class="status-badge-sm">200</span> Response</div>
311        <div class="code-block">
312            <div class="code-block-header">
313                <span class="code-block-lang lang-json"><span class="lang-dot"></span> JSON</span>
314                <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
315            </div>
316        <pre class="language-json"><code class="language-json">{
317    "results": [
318        {
319            "name": "photo1.jpg",
320            "extension": "jpg",
321            "size": 45231,
322            "size_encoded": 60308,
323            "mime_type": "image/jpeg",
324            "width": 800,
325            "height": 600,
326            "convert_time": 0.042,
327            "optimized": 0,
328            "output": "/9j/4AAQSkZJRg...",
329            "tokens_used": 1
330        },
331        {
332            "name": "icon.png",
333            "extension": "png",
334            "size": 2105430,
335            "size_encoded": 2807240,
336            "mime_type": "image/png",
337            "width": 512,
338            "height": 512,
339            "convert_time": 0.118,
340            "optimized": 1,
341            "output": "iVBORw0KGgoAAAA...",
342            "tokens_used": 3
343        }
344    ]
345}</code></pre>
346        </div>
347        <p>If a single file in the batch fails (e.g. wrong format), its entry contains <code>error</code> and <code>message</code> fields instead of the output data. Other files are still processed.</p>
348
349        <h4>Check usage</h4>
350        <div class="endpoint-box">
351            <span class="method-badge method-get">GET</span>
352            <span>/api/v1/usage</span>
353        </div>
354        <p>Returns your current token balance, usage stats, and pricing tiers.</p>
355        <div class="response-label"><span class="status-badge-sm">200</span> Response</div>
356        <div class="code-block">
357            <div class="code-block-header">
358                <span class="code-block-lang lang-json"><span class="lang-dot"></span> JSON</span>
359                <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
360            </div>
361        <pre class="language-json"><code class="language-json">{
362    "total_remaining": 9587,
363    "api_calls_this_month": 13,
364    "tokens_used_this_month": 18,
365    "token_tiers": [
366        { "up_to_mb": 1, "tokens": 1 },
367        { "up_to_mb": 2, "tokens": 2 },
368        { "up_to_mb": 3, "tokens": 3 },
369        { "up_to_mb": 4, "tokens": 4 },
370        { "up_to_mb": 5, "tokens": 5 }
371    ],
372    "max_file_size_mb": 5,
373    "rate_limit": {
374        "requests_per_minute": 60
375    }
376}</code></pre>
377        </div>
378
379        <h4>List tokens</h4>
380        <div class="endpoint-box">
381            <span class="method-badge method-get">GET</span>
382            <span>/api/v1/tokens</span>
383        </div>
384        <p>Returns all API keys for the authenticated user.</p>
385        <div class="response-label"><span class="status-badge-sm">200</span> Response</div>
386        <div class="code-block">
387            <div class="code-block-header">
388                <span class="code-block-lang lang-json"><span class="lang-dot"></span> JSON</span>
389                <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
390            </div>
391        <pre class="language-json"><code class="language-json">{
392    "tokens": [
393        {
394            "id": 1,
395            "name": "My Project",
396            "last_used_at": "2026-03-27T14:30:00+00:00",
397            "created_at": "2026-03-01T10:00:00+00:00"
398        }
399    ]
400}</code></pre>
401        </div>
402    </div>
403
404    
405    <div class="api-section" id="rate-limits">
406        <h3><i class="ph ph-timer"></i> Rate limits</h3>
407        <p>API requests are rate-limited per user:</p>
408        <div class="rate-limit-box">
409            <div class="rate-card">
410                <div class="rate-value">60</div>
411                <div class="rate-label">requests per minute</div>
412            </div>
413        </div>
414        <p>Every API response includes rate limit headers:</p>
415        <table class="status-table">
416            <thead><tr><th>Header</th><th>Description</th></tr></thead>
417            <tbody>
418                <tr><td><code>X-RateLimit-Limit</code></td><td>Maximum requests per minute</td></tr>
419                <tr><td><code>X-RateLimit-Remaining</code></td><td>Requests remaining in the current window</td></tr>
420                <tr><td><code>Retry-After</code></td><td>Seconds to wait before retrying (only on <code>429</code>)</td></tr>
421            </tbody>
422        </table>
423        <p>When rate-limited, the API responds with <code>429 Too Many Requests</code>.</p>
424    </div>
425
426    
427    <div class="api-section" id="errors">
428        <h3><i class="ph ph-warning"></i> Error codes</h3>
429        <p>All error responses include an <code>error</code> code and a human-readable <code>message</code>:</p>
430        <pre class="language-json"><code class="language-json">{
431    "error": "no_file",
432    "message": "No valid file upload given."
433}</code></pre>
434        <table class="status-table">
435            <thead><tr><th>HTTP</th><th>Error Code</th><th>Description</th></tr></thead>
436            <tbody>
437                <tr>
438                    <td><span class="status-code status-2xx">200</span></td>
439                    <td>-</td>
440                    <td>Success</td>
441                </tr>
442                <tr>
443                    <td><span class="status-code status-4xx">400</span></td>
444                    <td><code>no_file</code></td>
445                    <td>No image file was included in the request</td>
446                </tr>
447                <tr>
448                    <td><span class="status-code status-4xx">401</span></td>
449                    <td>-</td>
450                    <td>Invalid or missing API key</td>
451                </tr>
452                <tr>
453                    <td><span class="status-code status-4xx">402</span></td>
454                    <td><code>quota_exceeded</code></td>
455                    <td>No tokens remaining</td>
456                </tr>
457                <tr>
458                    <td><span class="status-code status-4xx">402</span></td>
459                    <td><code>insufficient_tokens</code></td>
460                    <td>File requires more tokens than you have remaining</td>
461                </tr>
462                <tr>
463                    <td><span class="status-code status-4xx">413</span></td>
464                    <td><code>file_too_large</code></td>
465                    <td>File exceeds maximum size (5 MB)</td>
466                </tr>
467                <tr>
468                    <td><span class="status-code status-4xx">422</span></td>
469                    <td><code>unsupported_format</code></td>
470                    <td>Unsupported file type</td>
471                </tr>
472                <tr>
473                    <td><span class="status-code status-4xx">422</span></td>
474                    <td><code>too_many_files</code></td>
475                    <td>Batch request exceeds 20 files</td>
476                </tr>
477                <tr>
478                    <td><span class="status-code status-4xx">429</span></td>
479                    <td><code>rate_limit_exceeded</code></td>
480                    <td>Rate limit exceeded (60 requests per minute)</td>
481                </tr>
482                <tr>
483                    <td><span class="status-code status-5xx">500</span></td>
484                    <td><code>upload_failed</code></td>
485                    <td>Upload or server processing failed</td>
486                </tr>
487            </tbody>
488        </table>
489    </div>
490
491    
492    <div class="api-section" id="examples">
493        <h3><i class="ph ph-code"></i> Code examples</h3>
494
495        
496        <div class="example-group">
497            <h4>Encode single file</h4>
498            <div class="example-tabs">
499                <button class="active" onclick="switchTab(this, 'single-curl')"><span class="lang-dot dot-bash"></span> cURL</button>
500                <button onclick="switchTab(this, 'single-js')"><span class="lang-dot dot-javascript"></span> JavaScript</button>
501                <button onclick="switchTab(this, 'single-php')"><span class="lang-dot dot-php"></span> PHP</button>
502                <button onclick="switchTab(this, 'single-py')"><span class="lang-dot dot-python"></span> Python</button>
503            </div>
504            <div class="example-tab-panel active" id="single-curl">
505                <div class="code-block">
506                    <div class="code-block-header">
507                        <span class="code-block-lang lang-bash"><span class="lang-dot"></span> cURL</span>
508                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
509                    </div>
510                    <pre class="language-bash"><code class="language-bash">curl -X POST https://www.base64-image.de/api/v1/encode \
511  -H "Authorization: Bearer YOUR_API_TOKEN" \
512  -F "[email protected]" \
513  -F "optimize-images=false" \
514  -F "format=image"</code></pre>
515                </div>
516            </div>
517            <div class="example-tab-panel" id="single-js">
518                <div class="code-block">
519                    <div class="code-block-header">
520                        <span class="code-block-lang lang-javascript"><span class="lang-dot"></span> JavaScript</span>
521                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
522                    </div>
523                    <pre class="language-javascript"><code class="language-javascript">const form = new FormData();
524form.append('image', fileInput.files[0]);
525form.append('optimize-images', 'false');  // optional
526form.append('format', 'image');           // optional: raw, data_uri, image, css, css_full, markdown, json
527
528const response = await fetch('https://www.base64-image.de/api/v1/encode', {
529    method: 'POST',
530    headers: { 'Authorization': 'Bearer YOUR_API_TOKEN' },
531    body: form,
532});
533
534const data = await response.json();
535console.log(data.name);          // "photo.jpg"
536console.log(data.tokens_used);   // 1
537console.log(data.output);        // formatted output (raw base64 by default)</code></pre>
538                </div>
539            </div>
540            <div class="example-tab-panel" id="single-php">
541                <div class="code-block">
542                    <div class="code-block-header">
543                        <span class="code-block-lang lang-php"><span class="lang-dot"></span> PHP</span>
544                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
545                    </div>
546                    <pre class="language-php"><code class="language-php">$client = new \GuzzleHttp\Client();
547
548$response = $client->post('https://www.base64-image.de/api/v1/encode', [
549    'headers' => [
550        'Authorization' => 'Bearer YOUR_API_TOKEN',
551    ],
552    'multipart' => [
553        ['name' => 'image', 'contents' => fopen('photo.jpg', 'r')],
554        ['name' => 'optimize-images', 'contents' => 'false'],  // optional
555        ['name' => 'format', 'contents' => 'image'],           // optional
556    ],
557]);
558
559$data = json_decode($response->getBody(), true);
560echo $data['output'];       // formatted output (raw base64 by default)
561echo $data['tokens_used'];  // 1</code></pre>
562                </div>
563            </div>
564            <div class="example-tab-panel" id="single-py">
565                <div class="code-block">
566                    <div class="code-block-header">
567                        <span class="code-block-lang lang-python"><span class="lang-dot"></span> Python</span>
568                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
569                    </div>
570                    <pre class="language-python"><code class="language-python">import requests
571
572with open('photo.jpg', 'rb') as f:
573    response = requests.post(
574        'https://www.base64-image.de/api/v1/encode',
575        headers={'Authorization': 'Bearer YOUR_API_TOKEN'},
576        files={'image': f},
577        data={'optimize-images': 'false', 'format': 'image'},  # both optional
578    )
579
580data = response.json()
581print(data['name'])          # "photo.jpg"
582print(data['tokens_used'])   # 1
583print(data['output'][:50])   # formatted output (raw base64 by default)</code></pre>
584                </div>
585            </div>
586        </div>
587
588        
589        <div class="example-group">
590            <h4>Batch encode (up to 20 files)</h4>
591            <div class="example-tabs">
592                <button class="active" onclick="switchTab(this, 'batch-curl')"><span class="lang-dot dot-bash"></span> cURL</button>
593                <button onclick="switchTab(this, 'batch-js')"><span class="lang-dot dot-javascript"></span> JavaScript</button>
594                <button onclick="switchTab(this, 'batch-php')"><span class="lang-dot dot-php"></span> PHP</button>
595                <button onclick="switchTab(this, 'batch-py')"><span class="lang-dot dot-python"></span> Python</button>
596            </div>
597            <div class="example-tab-panel active" id="batch-curl">
598                <div class="code-block">
599                    <div class="code-block-header">
600                        <span class="code-block-lang lang-bash"><span class="lang-dot"></span> cURL</span>
601                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
602                    </div>
603                    <pre class="language-bash"><code class="language-bash">curl -X POST https://www.base64-image.de/api/v1/encode/batch \
604  -H "Authorization: Bearer YOUR_API_TOKEN" \
605  -F "images[][email protected]" \
606  -F "images[][email protected]" \
607  -F "images[][email protected]" \
608  -F "optimize-images=false"</code></pre>
609                </div>
610            </div>
611            <div class="example-tab-panel" id="batch-js">
612                <div class="code-block">
613                    <div class="code-block-header">
614                        <span class="code-block-lang lang-javascript"><span class="lang-dot"></span> JavaScript</span>
615                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
616                    </div>
617                    <pre class="language-javascript"><code class="language-javascript">const form = new FormData();
618for (const file of fileInput.files) {
619    form.append('images[]', file);
620}
621form.append('optimize-images', 'false');  // optional
622
623const response = await fetch('https://www.base64-image.de/api/v1/encode/batch', {
624    method: 'POST',
625    headers: { 'Authorization': 'Bearer YOUR_API_TOKEN' },
626    body: form,
627});
628
629const data = await response.json();
630data.results.forEach(result => {
631    if (result.error) {
632        console.error(result.name, result.message);
633    } else {
634        console.log(result.name, result.tokens_used, 'tokens');
635    }
636});</code></pre>
637                </div>
638            </div>
639            <div class="example-tab-panel" id="batch-php">
640                <div class="code-block">
641                    <div class="code-block-header">
642                        <span class="code-block-lang lang-php"><span class="lang-dot"></span> PHP</span>
643                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
644                    </div>
645                    <pre class="language-php"><code class="language-php">$client = new \GuzzleHttp\Client();
646$files = ['photo1.jpg', 'photo2.png', 'icon.svg'];
647
648$multipart = [];
649foreach ($files as $file) {
650    $multipart[] = ['name' => 'images[]', 'contents' => fopen($file, 'r')];
651}
652$multipart[] = ['name' => 'optimize-images', 'contents' => 'false'];
653
654$response = $client->post('https://www.base64-image.de/api/v1/encode/batch', [
655    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN'],
656    'multipart' => $multipart,
657]);
658
659$data = json_decode($response->getBody(), true);
660foreach ($data['results'] as $result) {
661    echo $result['name'] . ': ' . $result['tokens_used'] . " tokens\n";
662}</code></pre>
663                </div>
664            </div>
665            <div class="example-tab-panel" id="batch-py">
666                <div class="code-block">
667                    <div class="code-block-header">
668                        <span class="code-block-lang lang-python"><span class="lang-dot"></span> Python</span>
669                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
670                    </div>
671                    <pre class="language-python"><code class="language-python">import requests
672
673file_paths = ['photo1.jpg', 'photo2.png', 'icon.svg']
674files = [('images[]', open(p, 'rb')) for p in file_paths]
675
676response = requests.post(
677    'https://www.base64-image.de/api/v1/encode/batch',
678    headers={'Authorization': 'Bearer YOUR_API_TOKEN'},
679    files=files,
680    data={'optimize-images': 'false'},  # optional
681)
682
683data = response.json()
684for result in data['results']:
685    if 'error' in result:
686        print(f"Error: {result['name']} - {result['message']}")
687    else:
688        print(f"{result['name']}: {result['tokens_used']} tokens")
689
690for _, fh in files:
691    fh.close()</code></pre>
692                </div>
693            </div>
694        </div>
695
696        
697        <div class="example-group">
698            <h4>Check usage &amp; balance</h4>
699            <div class="example-tabs">
700                <button class="active" onclick="switchTab(this, 'usage-curl')"><span class="lang-dot dot-bash"></span> cURL</button>
701                <button onclick="switchTab(this, 'usage-js')"><span class="lang-dot dot-javascript"></span> JavaScript</button>
702                <button onclick="switchTab(this, 'usage-php')"><span class="lang-dot dot-php"></span> PHP</button>
703                <button onclick="switchTab(this, 'usage-py')"><span class="lang-dot dot-python"></span> Python</button>
704            </div>
705            <div class="example-tab-panel active" id="usage-curl">
706                <div class="code-block">
707                    <div class="code-block-header">
708                        <span class="code-block-lang lang-bash"><span class="lang-dot"></span> cURL</span>
709                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
710                    </div>
711                    <pre class="language-bash"><code class="language-bash"># Check token balance
712curl https://www.base64-image.de/api/v1/usage \
713  -H "Authorization: Bearer YOUR_API_TOKEN"
714
715# List API keys
716curl https://www.base64-image.de/api/v1/tokens \
717  -H "Authorization: Bearer YOUR_API_TOKEN"</code></pre>
718                </div>
719            </div>
720            <div class="example-tab-panel" id="usage-js">
721                <div class="code-block">
722                    <div class="code-block-header">
723                        <span class="code-block-lang lang-javascript"><span class="lang-dot"></span> JavaScript</span>
724                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
725                    </div>
726                    <pre class="language-javascript"><code class="language-javascript">const response = await fetch('https://www.base64-image.de/api/v1/usage', {
727    headers: { 'Authorization': 'Bearer YOUR_API_TOKEN' },
728});
729const balance = await response.json();
730
731console.log(`Total: ${balance.total_remaining}`);
732console.log(`API calls: ${balance.api_calls_this_month}`);</code></pre>
733                </div>
734            </div>
735            <div class="example-tab-panel" id="usage-php">
736                <div class="code-block">
737                    <div class="code-block-header">
738                        <span class="code-block-lang lang-php"><span class="lang-dot"></span> PHP</span>
739                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
740                    </div>
741                    <pre class="language-php"><code class="language-php">$client = new \GuzzleHttp\Client();
742
743$response = $client->get('https://www.base64-image.de/api/v1/usage', [
744    'headers' => ['Authorization' => 'Bearer YOUR_API_TOKEN'],
745]);
746
747$balance = json_decode($response->getBody(), true);
748echo "Total: {$balance['total_remaining']}\n";</code></pre>
749                </div>
750            </div>
751            <div class="example-tab-panel" id="usage-py">
752                <div class="code-block">
753                    <div class="code-block-header">
754                        <span class="code-block-lang lang-python"><span class="lang-dot"></span> Python</span>
755                        <button class="code-block-copy" onclick="copyCode(this)"><i class="ph ph-copy"></i> Copy</button>
756                    </div>
757                    <pre class="language-python"><code class="language-python">import requests
758
759response = requests.get(
760    'https://www.base64-image.de/api/v1/usage',
761    headers={'Authorization': 'Bearer YOUR_API_TOKEN'},
762)
763
764balance = response.json()
765print(f"Total: {balance['total_remaining']}")</code></pre>
766                </div>
767            </div>
768        </div>
769
770    </div>
771
772</div>
773</main>
774
775<!-- ~~~~~~~~ -->
776<!--  Footer  -->
777<!-- ~~~~~~~~ -->
778
779<footer id="footer">
780    <div class="container">
781        <div class="footer-content">
782            <div class="footer-section footer-brand">
783                <h3>base64-image<span class="text-brand">.de</span></h3>
784                <p class="footer-tagline">Free online image to base64 converter</p>
785            </div>
786
787            <div class="footer-section footer-links">
788                <h4>Quick Links</h4>
789                <ul>
790                    <li><a href="/"><i class="ph ph-house"></i> Home</a></li>
791                    <li><a href="/tutorial"><i class="ph ph-book-open"></i> Tutorial</a></li>
792                    <li><a href="/faq"><i class="ph ph-question"></i> FAQ</a></li>
793                    <li><a href="/donation"><i class="ph ph-heart"></i> Donation</a></li>
794                    <li><a href="/api/docs"><i class="ph ph-code"></i> API Docs</a></li>
795                    <li><a href="/support"><i class="ph ph-lifebuoy"></i> Support</a></li>
796                </ul>
797            </div>
798
799            <div class="footer-section footer-legal">
800                <h4>Legal</h4>
801                <ul>
802                    <li><a href="/privacy"><i class="ph ph-shield-check"></i> Privacy Policy</a></li>
803                    <li><a href="/terms-of-use"><i class="ph ph-file-text"></i> Terms of Use</a></li>
804                    <li><a href="/imprint"><i class="ph ph-info"></i> Imprint</a></li>
805                </ul>
806            </div>
807
808            <div class="footer-section footer-info">
809                <h4>About</h4>
810                <p>
811                    Convert images to base64 encoding for use in HTML, CSS, and email templates.
812                    Fast, free, and secure image conversion.
813                </p>
814            </div>
815        </div>
816
817        <div class="footer-bottom">
818            <p>&copy; 2026 Geek Cell GmbH. All rights reserved.</p>
819            <p class="footer-disclaimer">
820                By using this site you accept the <a href="/terms-of-use">terms of use</a>.
821            </p>
822        </div>
823    </div>
824</footer>
825
826<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 826-827
826
827<script async src="https://www.googletagmanager.com/gtag/js?id=
827G-T8942H3445
vendor: 12 bytes, line 827
827"></script>
828<script>
829    
vendor: 157 bytes, lines 829-837
829window.dataLayer = window.dataLayer || [];
830
831    function gtag() {
832        dataLayer.push(arguments);
833    }
834
835    gtag('js', new Date());
836
837    gtag('config', '
837G-T8942H3445
vendor: 4 bytes, line 837
837');
838</script>
838
839
840<script>
841    (function () {
842        if (typeof _bsa !== 'undefined' && _bsa) {
843            _bsa.init(
844                'responsive',
845                'CW7DV2Q7',
846                'placement:wwwbase64-imagede',
847                {
848                    target: '#bsa-ads',
849                    align: 'horizontal',
850                }
851            );
852        }
853    })();
854</script>
854
855
856<!-- Mobile menu toggle + close user dropdown when clicking outside -->
857<script>
858function toggleMobileMenu() {
859    var menu = document.getElementById('menu-container-mobile');
860    var btn = document.getElementById('menu-button-mobile');
861    var isOpen = menu.classList.contains('is-open');
862    menu.classList.toggle('is-open');
863    btn.classList.toggle('is-open');
864    btn.setAttribute('aria-expanded', !isOpen);
865    document.body.classList.toggle('mobile-menu-open', !isOpen);
866}
867
868document.addEventListener('click', function(e) {
869    // Close mobile menu when clicking a nav link
870    var mobileMenu = document.getElementById('menu-container-mobile');
871    if (mobileMenu && mobileMenu.classList.contains('is-open') && e.target.closest('#menu-container-mobile a:not(.user-trigger)')) {
872        toggleMobileMenu();
873    }
874    // Close user dropdown when clicking outside
875    var dropdown = document.getElementById('user-dropdown');
876    if (dropdown && !dropdown.contains(e.target)) {
877        dropdown.classList.remove('open');
878    }
879});
880
881document.addEventListener('keydown', function(e) {
882    if (e.key === 'Escape') {
883        var mobileMenu = document.getElementById('menu-container-mobile');
884        if (mobileMenu && mobileMenu.classList.contains('is-open')) {
885            toggleMobileMenu();
886        }
887        var dropdown = document.getElementById('user-dropdown');
888        if (dropdown) {
889            dropdown.classList.remove('open');
890        }
891    }
892});
893</script>
893
894
895
896<script type="application/ld+json">{
897    "@context": "https://schema.org",
898    "@graph": [
899        {
900            "@type": "WebSite",
901            "name": "base64-image.de",
902            "url": "https://www.base64-image.de",
903            "description": "Online tool to optimize images and convert them to base64 encoding"
904        },
905        {
906            "@type": "SoftwareApplication",
907            "name": "Base64 Image Encoder",
908            "applicationCategory": "UtilitiesApplication",
909            "operatingSystem": "Web",
910            "url": "https://www.base64-image.de",
911            "offers": {
912                "@type": "Offer",
913                "price": "0",
914                "priceCurrency": "USD"
915            }
916        },
917        {
918            "@type": "Organization",
919            "name": "Geek Cell GmbH",
920            "url": "https://www.base64-image.de",
921            "logo": "https://www.base64-image.de/favicon.svg"
922        }
923    ]
924}</script>
924
925
926<script type="application/ld+json">{
927    "@context": "https://schema.org",
928    "@type": "WebAPI",
929    "name": "Base64 Image Encoder API",
930    "description": "REST API to convert images to base64 encoding programmatically. Supports single and batch image encoding with optional optimization.",
931    "documentation": "https://www.base64-image.de/api/docs",
932    "termsOfService": "https://www.base64-image.de/terms-of-use",
933    "provider": {
934        "@type": "Organization",
935        "name": "Geek Cell GmbH",
936        "url": "https://www.base64-image.de"
937    },
938    "offers": {
939        "@type": "Offer",
940        "price": "0",
941        "priceCurrency": "USD",
942        "description": "Free tier included. Additional tokens available for purchase."
943    }
944}</script>
vendor: 1 bytes, line 944
944
945<script type="application/ld+json">{
946    "@context": "https://schema.org",
947    "@type": "BreadcrumbList",
948    "itemListElement": [
949        {
950            "@type": "ListItem",
951            "position": 1,
952            "name": "Home",
953            "item": "https://www.base64-image.de/"
954        },
955        {
956            "@type": "ListItem",
957            "position": 2,
958            "name": "API",
959            "item": "https://www.base64-image.de/api"
960        },
961        {
962            "@type": "ListItem",
963            "position": 3,
964            "name": "API Documentation",
965            "item": "https://www.base64-image.de/api/docs"
966        }
967    ]
968}</script>
968
969<div class="feedback-widget" id="feedback-widget">
970    <div class="feedback-panel" id="feedback-panel">
971        <div class="feedback-panel-header">
972            <h3><i class="ph ph-chat-circle-dots"></i> Send Feedback</h3>
973            <p>We'd love to hear from you</p>
974        </div>
975
976        
977        <div id="feedback-form-container">
978            <div class="feedback-panel-body">
979                
980                <form id="feedback-form" novalidate>
981                                            <div class="feedback-field">
982                            <label for="feedback-name">Name</label>
983                            <input type="text" id="feedback-name" name="name" maxlength="255" required>
984                            <div class="feedback-field-error" data-field="name"></div>
985                        </div>
986                    
987                    <div class="feedback-field">
988                        <label for="feedback-subject">Subject</label>
989                        <input type="text" id="feedback-subject" name="subject" maxlength="255" required>
990                        <div class="feedback-field-error" data-field="subject"></div>
991                    </div>
992
993                    <div class="feedback-field">
994                        <label for="feedback-message">Feedback</label>
995                        <textarea id="feedback-message" name="message" maxlength="5000" rows="4" required></textarea>
996                        <div class="feedback-field-error" data-field="message"></div>
997                    </div>
998
999                    <button type="submit" class="feedback-submit-btn" id="feedback-submit">
1000                        <i class="ph ph-paper-plane-tilt"></i> Send Feedback
1001                    </button>
1002                </form>
1003            </div>
1004        </div>
1005
1006        
1007        <div id="feedback-success" class="feedback-success" style="display: none;">
1008            <i class="ph ph-check-circle"></i>
1009            <h4>Thank you!</h4>
1010            <p>Your feedback has been submitted successfully.</p>
1011        </div>
1012
1013        
1014        <div id="feedback-rate-limit" class="feedback-rate-limit" style="display: none;">
1015            <i class="ph ph-clock"></i>
1016            <h4>Too many requests</h4>
1017            <p>Please wait a moment before submitting again.</p>
1018        </div>
1019    </div>
1020
1021    <button class="feedback-widget-btn" id="feedback-toggle" aria-label="Send feedback" title="Send feedback">
1022        <i class="ph ph-chat-circle-dots"></i>
1023    </button>
1024</div>
1025
1026<script>
1027(function () {
1028    var toggle = document.getElementById('feedback-toggle');
1029    var panel = document.getElementById('feedback-panel');
1030    var form = document.getElementById('feedback-form');
1031    var formContainer = document.getElementById('feedback-form-container');
1032    var successEl = document.getElementById('feedback-success');
1033    var rateLimitEl = document.getElementById('feedback-rate-limit');
1034    var submitBtn = document.getElementById('feedback-submit');
1035    var csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
1036    var userName = "";
1037
1038    toggle.addEventListener('click', function () {
1039        panel.classList.toggle('is-open');
1040    });
1041
1042    // Allow any element with [data-open-feedback] to open the panel
1043    document.querySelectorAll('[data-open-feedback]').forEach(function (el) {
1044        el.addEventListener('click', function (e) {
1045            e.preventDefault();
1046            e.stopPropagation();
1047            panel.classList.add('is-open');
1048        });
1049    });
1050
1051    // Close on Escape
1052    document.addEventListener('keydown', function (e) {
1053        if (e.key === 'Escape' && panel.classList.contains('is-open')) {
1054            panel.classList.remove('is-open');
1055        }
1056    });
1057
1058    // Close when clicking outside
1059    document.addEventListener('click', function (e) {
1060        if (panel.classList.contains('is-open') && !e.target.closest('#feedback-widget')) {
1061            panel.classList.remove('is-open');
1062        }
1063    });
1064
1065    function clearErrors() {
1066        form.querySelectorAll('.feedback-field-error').forEach(function (el) {
1067            el.textContent = '';
1068        });
1069    }
1070
1071    function showErrors(errors) {
1072        clearErrors();
1073        Object.keys(errors).forEach(function (field) {
1074            var el = form.querySelector('[data-field="' + field + '"]');
1075            if (el) el.textContent = errors[field][0];
1076        });
1077    }
1078
1079    form.addEventListener('submit', function (e) {
1080        e.preventDefault();
1081        clearErrors();
1082
1083        var data = {
1084            name: userName || (document.getElementById('feedback-name')?.value || ''),
1085            subject: document.getElementById('feedback-subject').value,
1086            message: document.getElementById('feedback-message').value,
1087        };
1088
1089        submitBtn.disabled = true;
1090        submitBtn.textContent = 'Sending...';
1091
1092        fetch('/feedback', {
1093            method: 'POST',
1094            headers: {
1095                'Content-Type': 'application/json',
1096                'Accept': 'application/json',
1097                'X-CSRF-TOKEN': csrfToken,
1098            },
1099            body: JSON.stringify(data),
1100        })
1101        .then(function (res) {
1102            if (res.status === 429) {
1103                formContainer.style.display = 'none';
1104                rateLimitEl.style.display = 'block';
1105                return;
1106            }
1107            return res.json().then(function (json) {
1108                if (res.ok) {
1109                    formContainer.style.display = 'none';
1110                    successEl.style.display = 'block';
1111                } else if (json.errors) {
1112                    showErrors(json.errors);
1113                }
1114            });
1115        })
1116        .catch(function () {
1117            // Silently fail - user can retry
1118        })
1119        .finally(function () {
1120            submitBtn.disabled = false;
1121            submitBtn.innerHTML = '<i class="ph ph-paper-plane-tilt"></i> Send Feedback';
1122        });
1123    });
1124})();
1125</script>
1125
1126<link rel="modulepreload" as="script" href="https://www.base64-image.de/build/assets/api-docs-highlight-pjzH-LKy.js" /><link rel="modulepreload" as="script" href="https://www.base64-image.de/build/assets/vendor-shiki-BQN0org0.js" />
1126<script type="module" src="https://www.base64-image.de/build/assets/api-docs-highlight-pjzH-LKy.js" data-navigate-track="reload"></script>
1126<script>
1127function copyCode(btn) {
1128    var block = btn.closest('.code-block');
1129    var pre = block.querySelector('pre');
1130    var text = pre.getAttribute('data-shiki-source') || pre.textContent;
1131    navigator.clipboard.writeText(text).then(function() {
1132        var origHTML = btn.innerHTML;
1133        btn.innerHTML = '<i class="ph ph-check"></i> Copied';
1134        btn.classList.add('copied');
1135        setTimeout(function() {
1136            btn.innerHTML = origHTML;
1137            btn.classList.remove('copied');
1138        }, 2000);
1139    });
1140}
1141</script>
vendor: 1 bytes, line 1141
1141
1142<script>
1143    function switchTab(btn, panelId) {
1144        var group = btn.closest('.example-group');
1145        group.querySelectorAll('.example-tabs button').forEach(function(b) {
1146            b.classList.remove('active');
1147        });
1148        group.querySelectorAll('.example-tab-panel').forEach(function(p) {
1149            p.classList.remove('active');
1150        });
1151        btn.classList.add('active');
1152        document.getElementById(panelId).classList.add('active');
1153    }
1154</script>
1154
1155
1156</body>
1157</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.