# Embed inline images

> Reference an attachment from your HTML with a cid: source so an image renders inline in the body of the email.

You can embed an image directly in the HTML body of an email instead of hosting it on an external server. The image travels with the message as an [attachment](https://www.sendping.co/docs/emails/attachments), and the HTML references it by a **content id** (`cid`).

> **Warning:** Inline images (and any attachment) are not supported on the [batch endpoint](https://www.sendping.co/docs/api/emails-batch). Use a single [POST /emails](https://www.sendping.co/docs/api/emails-send) when you need to embed an image.

## How it works

1. **Add a cid: reference in the HTML** — Use the `cid:` prefix in the `src` of an `<img>` tag, e.g. `<img src="cid:logo-image">`. The value after `cid:` is an arbitrary id you choose; it must be under 128 characters.
2. **Set content_id on the attachment** — Add the same id as the `content_id` field of the matching attachment object. SendPing links the `<img>` to the attachment by this id when it assembles the message.

## Remote image

Reference a hosted image with `path`. SendPing fetches and base64-encodes it for you at send time (the fetch is SSRF-guarded), so you do not need to encode anything yourself.

**Node.js**

```js
import { SendPing } from 'sendping';

const mb = new SendPing('mb_xxxxxxxxx');

const { data, error } = await mb.emails.send({
  "from": "Acme <hello@yourdomain.com>",
  "to": ["delivered@test.sendping.co"],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "path": "https://files.example.com/logo.png",
      "filename": "logo.png",
      "content_id": "logo-image"
    }
  ]
});
console.log({ data, error });
```

**Ruby**

```ruby
require "sendping"

SendPing.api_key = "mb_xxxxxxxxx"

SendPing::Emails.send({
  "from": "Acme <hello@yourdomain.com>",
  "to": [
    "delivered@test.sendping.co"
  ],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "path": "https://files.example.com/logo.png",
      "filename": "logo.png",
      "content_id": "logo-image"
    }
  ]
})
```

**PHP**

```php
<?php
require 'vendor/autoload.php';

use SendPing\SendPing;

$sendping = SendPing::client('mb_xxxxxxxxx');

$sendping->emails->send([
  'from' => "Acme <hello@yourdomain.com>",
  'to' => [
    "delivered@test.sendping.co"
  ],
  'subject' => "Thank you for contacting us",
  'html' => "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  'attachments' => [
    [
      'path' => "https://files.example.com/logo.png",
      'filename' => "logo.png",
      'content_id' => "logo-image"
    ]
  ]
]);
```

**Python**

```python
import sendping

sendping.api_key = "mb_xxxxxxxxx"

sendping.Emails.send({
  "from": "Acme <hello@yourdomain.com>",
  "to": [
    "delivered@test.sendping.co"
  ],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "path": "https://files.example.com/logo.png",
      "filename": "logo.png",
      "content_id": "logo-image"
    }
  ]
})
```

**Go**

```go
import "github.com/shekhu10/sendping-sdks/sendping-go"

client := sendping.NewClient("mb_xxxxxxxxx")

sent, err := client.Emails.Send(&sendping.SendEmailRequest{
    From:    "Acme <hello@yourdomain.com>",
    To:      []string{"delivered@test.sendping.co"},
    Subject: "Thank you for contacting us",
    Html:    "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
    Attachments: []sendping.Attachment{
        {
            Path:      "https://files.example.com/logo.png",
            Filename:  "logo.png",
            ContentId: "logo-image",
        },
    },
})
```

**Rust**

```rust
use sendping::{Attachment, SendEmailOptions, SendPing};

let mb = SendPing::new("mb_xxxxxxxxx");

let params = SendEmailOptions::new(
    "Acme <hello@yourdomain.com>",
    ["delivered@test.sendping.co"],
    "Thank you for contacting us",
)
.with_html("<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>")
.with_attachment(Attachment::from_path("logo.png", "https://files.example.com/logo.png")
        .with_content_id("logo-image"));
let _sent = mb.emails.send(params).await?;
```

**Java**

```java
import co.sendping.SendPing;
import co.sendping.SendPingResponse;
import co.sendping.requests.Attachment;
import co.sendping.requests.SendEmailRequest;

SendPing sendping = new SendPing("mb_xxxxxxxxx");

SendEmailRequest request = SendEmailRequest.builder()
        .from("Acme <hello@yourdomain.com>")
        .to("delivered@test.sendping.co")
        .subject("Thank you for contacting us")
        .html("<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>")
        .attachment(Attachment.builder()
                .path("https://files.example.com/logo.png")
                .filename("logo.png")
                .contentId("logo-image")
                .build())
        .build();

SendPingResponse response = sendping.emails().send(request);
```

**.NET**

```csharp
using SendPing;

ISendPing sendping = SendPingClient.Create("mb_xxxxxxxxx");

var resp = await sendping.EmailSendAsync(new EmailMessage
{
    From = "Acme <hello@yourdomain.com>",
    To = "delivered@test.sendping.co",
    Subject = "Thank you for contacting us",
    HtmlBody = "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
    Attachments = new List<EmailAttachment>
    {
        new()
        {
            Path = "https://files.example.com/logo.png",
            Filename = "logo.png",
            ContentId = "logo-image",
        },
    },
});
```

**cURL**

```bash
curl -X POST 'https://www.sendping.co/api/emails' \
  -H 'Authorization: Bearer mb_xxxxxxxxx' \
  -H 'Content-Type: application/json' \
  -d '{
  "from": "Acme <hello@yourdomain.com>",
  "to": ["delivered@test.sendping.co"],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "path": "https://files.example.com/logo.png",
      "filename": "logo.png",
      "content_id": "logo-image"
    }
  ]
}'
```

## Local image

To inline a file from disk, read it and base64-encode the bytes into the `content` field, then point the `content_id` at the matching `cid`.

**Node.js**

```js
import { SendPing } from 'sendping';

const mb = new SendPing('mb_xxxxxxxxx');

const { data, error } = await mb.emails.send({
  "from": "Acme <hello@yourdomain.com>",
  "to": ["delivered@test.sendping.co"],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "content": "iVBORw0KGgoAAAANS...base64...",
      "filename": "logo.png",
      "content_type": "image/png",
      "content_id": "logo-image"
    }
  ]
});
console.log({ data, error });
```

**Ruby**

```ruby
require "sendping"

SendPing.api_key = "mb_xxxxxxxxx"

SendPing::Emails.send({
  "from": "Acme <hello@yourdomain.com>",
  "to": [
    "delivered@test.sendping.co"
  ],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "content": "iVBORw0KGgoAAAANS...base64...",
      "filename": "logo.png",
      "content_type": "image/png",
      "content_id": "logo-image"
    }
  ]
})
```

**PHP**

```php
<?php
require 'vendor/autoload.php';

use SendPing\SendPing;

$sendping = SendPing::client('mb_xxxxxxxxx');

$sendping->emails->send([
  'from' => "Acme <hello@yourdomain.com>",
  'to' => [
    "delivered@test.sendping.co"
  ],
  'subject' => "Thank you for contacting us",
  'html' => "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  'attachments' => [
    [
      'content' => "iVBORw0KGgoAAAANS...base64...",
      'filename' => "logo.png",
      'content_type' => "image/png",
      'content_id' => "logo-image"
    ]
  ]
]);
```

**Python**

```python
import sendping

sendping.api_key = "mb_xxxxxxxxx"

sendping.Emails.send({
  "from": "Acme <hello@yourdomain.com>",
  "to": [
    "delivered@test.sendping.co"
  ],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "content": "iVBORw0KGgoAAAANS...base64...",
      "filename": "logo.png",
      "content_type": "image/png",
      "content_id": "logo-image"
    }
  ]
})
```

**Go**

```go
import "github.com/shekhu10/sendping-sdks/sendping-go"

client := sendping.NewClient("mb_xxxxxxxxx")

sent, err := client.Emails.Send(&sendping.SendEmailRequest{
    From:    "Acme <hello@yourdomain.com>",
    To:      []string{"delivered@test.sendping.co"},
    Subject: "Thank you for contacting us",
    Html:    "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
    Attachments: []sendping.Attachment{
        {
            Content:     "iVBORw0KGgoAAAANS...base64...",
            Filename:    "logo.png",
            ContentType: "image/png",
            ContentId:   "logo-image",
        },
    },
})
```

**Rust**

```rust
use sendping::{Attachment, SendEmailOptions, SendPing};

let mb = SendPing::new("mb_xxxxxxxxx");

let params = SendEmailOptions::new(
    "Acme <hello@yourdomain.com>",
    ["delivered@test.sendping.co"],
    "Thank you for contacting us",
)
.with_html("<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>")
.with_attachment(Attachment::from_content("logo.png", "iVBORw0KGgoAAAANS...base64...")
        .with_content_type("image/png")
        .with_content_id("logo-image"));
let _sent = mb.emails.send(params).await?;
```

**Java**

```java
import co.sendping.SendPing;
import co.sendping.SendPingResponse;
import co.sendping.requests.Attachment;
import co.sendping.requests.SendEmailRequest;

SendPing sendping = new SendPing("mb_xxxxxxxxx");

SendEmailRequest request = SendEmailRequest.builder()
        .from("Acme <hello@yourdomain.com>")
        .to("delivered@test.sendping.co")
        .subject("Thank you for contacting us")
        .html("<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>")
        .attachment(Attachment.builder()
                .content("iVBORw0KGgoAAAANS...base64...")
                .filename("logo.png")
                .contentType("image/png")
                .contentId("logo-image")
                .build())
        .build();

SendPingResponse response = sendping.emails().send(request);
```

**.NET**

```csharp
using SendPing;

ISendPing sendping = SendPingClient.Create("mb_xxxxxxxxx");

var resp = await sendping.EmailSendAsync(new EmailMessage
{
    From = "Acme <hello@yourdomain.com>",
    To = "delivered@test.sendping.co",
    Subject = "Thank you for contacting us",
    HtmlBody = "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
    Attachments = new List<EmailAttachment>
    {
        new()
        {
            Content = "iVBORw0KGgoAAAANS...base64...",
            Filename = "logo.png",
            ContentType = "image/png",
            ContentId = "logo-image",
        },
    },
});
```

**cURL**

```bash
curl -X POST 'https://www.sendping.co/api/emails' \
  -H 'Authorization: Bearer mb_xxxxxxxxx' \
  -H 'Content-Type: application/json' \
  -d '{
  "from": "Acme <hello@yourdomain.com>",
  "to": ["delivered@test.sendping.co"],
  "subject": "Thank you for contacting us",
  "html": "<p>Here is our <img src=\"cid:logo-image\"/> inline logo</p>",
  "attachments": [
    {
      "content": "iVBORw0KGgoAAAANS...base64...",
      "filename": "logo.png",
      "content_type": "image/png",
      "content_id": "logo-image"
    }
  ]
}'
```

## Things to keep in mind

- When you inline a **local** image you must base64-encode it yourself in `content`. With a **remote** `path`, SendPing fetches and encodes it for you.
- Inline images increase the total size of the email — they count toward the per-email (40 MB) [size limit](https://www.sendping.co/docs/emails/attachments).
- Some clients (especially webmail) may reject or strip inline images. Where it matters, host the image and link to it normally instead.
- Set a `content_type` (e.g. `image/png`) or a `filename` (e.g. `logo.png`) so receiving clients render the image correctly.

> **Note:** All [attachment requirements and limits](https://www.sendping.co/docs/emails/attachments) apply to inline images, since an inline image is just an attachment referenced from the HTML.