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><img></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 & 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>© 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.