How to add links to different parts of an image in email

So you made a newsletter and you're proud of it. You laid it out in Canva or Figma, found a template that just worked, and the export looks exactly the way you pictured it. Now you want to send it out as an email. But some parts of it are supposed to be clickable, a Wikipedia link here, your website there. How do you add links to an image and send it as an email?

The short answer: you slice the image into pieces, rebuild it as an HTML table, and put the link on just the piece that should click. The rest of this post is what that actually takes by hand.

That question was my partner's problem exactly. She and a friend run a newsletter about K-dramas, the friend lays each issue out in Canva and my partner draws illustrations over the top. Each issue has links too, to write-ups on specific K-dramas and to their newsletter site. It looks really nice. But once they exported the design, they had no idea how to add those links to it. So they did what anyone else would do, asked ChatGPT.

What ChatGPT tells you

When you ask ChatGPT how to add links to an image, it gives you the right answer, actually. Normally an image can't hold links, but an email is built in HTML, and HTML supports links fine. The conversation usually goes like this:

You basically keep slicing until you get a square cut around the area that should be linked, then sew everything back up in HTML. It's the standard move, email folks have been doing it for a couple of decades. There are other ways, like image maps, but most email clients ignore those.

Anyway, I was the one tasked with figuring the rest out, because my partner isn't familiar with HTML. She showed me her conversation with the AI and asked if I could do it. I happily obliged. I've been working in tech for years, so I figured it'd be a 10-minute task. It took me about an hour each issue to get an email with working links and no visible seams. There's more to the process than I anticipated (not surprising), so here are the steps, and the parts that caught me off guard. Shortcut at the end, too.

Step one: cutting the image into pieces

So the first thing to do is cut the image into bands and slices. Some tools for that:

Photoshop is the classic tool for this. There's a Slice tool hiding under the crop tool. You drag a slice over each region, run the old Save for Web dialog, and it saves every slice as its own file. It'll even write you an HTML table, though it's web-page HTML, not necessarily the email-friendly kind. If you already pay for Photoshop and know your way around it, this is the best option.

GIMP does the same job for free, if you're willing to hunt for it. You drop guides where the cuts go, run the slice filter buried somewhere in the menus, and it hands you the pieces plus a rough table. A starting point, not a finished email. More on that below.

Figma can slice too, and if you designed there you're already home. Press S for the Slice tool, draw a slice over each region, and every slice becomes its own export. The catch is precision. Slices are loose rectangles, so getting them edge to edge, no gaps and no overlaps, is entirely on you, and there's no HTML at the end, just images. Canva, for the record, can't slice at all. It exports the whole image, which is why you're reading about these other tools in the first place.

Where to cut

From the chat you know the goal: a clean rectangle around each spot you want to link. Bands (horizontal strips) alone won't get you there, because the whole band becomes clickable.

So here's the recipe for one spot. Two horizontal cuts across the full width of the image, one just above the spot, one just below. That gives you three bands, with your spot living in the middle one. Then two vertical cuts inside that middle band only, one on each side of the spot. The band becomes three pieces, left, the spot itself, right, while the bands above and below stay whole. The link goes on the middle piece and nothing else.

Do that for a single link and your one image is now five files.

Five files for one link. Each needs a name you won't mix up, because each one has to land in exactly the right cell (more on that later). When I did this by hand I kept a text file on the side, just a map of which piece went where. Every single issue.

Step two: putting the pieces online

The images have to live somewhere online for the email to render them. Otherwise every image shows up broken, because the code points at files on your computer, and the HTML in an email can't see those.

If you send with Mailchimp, its content studio handles this: upload each piece, copy the URL it hands back. Most email platforms have some version of that file manager, and if you have a website, its media library works too. What doesn't work is anything private or temporary, a Google Drive share link, a folder that gets cleaned up next spring. The email loads these images fresh every time someone opens it, so the URLs have to keep working for as long as the issue sits in inboxes.

Step three: sewing it back together in HTML

Here's the part nobody really talks about. You'd think stacking the images back up is the easy part. It's where my afternoon went.

Email is finicky. The same code renders differently between clients, devices, app versions, even dark mode. It looks fine on one platform and weird on another, a hairline streak here, a small offset there that throws the slices out of line.

Now, I'm no HTML expert, so I consulted the AI on this part too. It was a lot of back and forth, correcting one thing at a time, until the output came out consistent.

The formula that worked is one table for the whole newsletter, one row per band. An uncut band is a single cell holding a single image. A cut band is a row of cells, left piece, linked piece, right piece, with the link wrapped around just the middle image. That's the skeleton. The back and forth was all in the details:

• Every image needs display:block. Email clients treat an image like a line of text sitting on a baseline, which leaves a small gap underneath, so stacked slices get thin lines glowing between the rows. Common enough that Email on Acid, the email-testing company, keeps a whole article on it.
• The table needs its spacing zeroed out, or the client adds its own padding between pieces.
• Every image needs an explicit pixel width, and the widths in a row have to add up exactly. One over and the row wraps. One under and a seam opens.
• Gmail ignores style blocks, so every fix gets written inline, on every image and every cell, again.
• Outlook's web app adds its own gap, 4 or 5 pixels under every image, and display:block doesn't touch it. It needs a different workaround entirely.

So the loop becomes: tweak the HTML, send yourself a test, open it in Gmail, then on your phone, find an issue, fix the HTML, rinse and repeat. The code was free. Your afternoon wasn't.

So I made Mandoline

This is the exact afternoon Mandoline exists for. You upload the newsletter image, draw a rectangle over the spot, and paste the URL it should open. It works out the horizontal and vertical cuts from your boxes, slices the image, puts the pieces online where email can see them, and writes the table HTML with the gap fixes and exact widths already baked in. It also has some tools to help you adjust for hairlines, gaps, or offsets if something looks off. You then copy the HTML into your email tool, send a test email to make sure it looks good, and ship it.

I also integrated Mailchimp, Klaviyo, and HubSpot, so the slices can upload straight into your own account. And with Mailchimp, it can create the draft campaign for you, on plans that allow custom code.

I made this mostly for me, but I figured other people out there might be facing the same issue. So I hope Mandoline can save you an afternoon. Go enjoy a walk or some ice cream.

Quick answers

• Can I make just one part of an image clickable in an email? Yes, that's the whole trick. You can't put a link inside an image, so you cut the image apart and wrap a link around just the piece that should click. Email clients see ordinary images and links, so it works everywhere.
• Do image maps work in email? Mostly no. Image maps work on web pages, but most email clients ignore the map and leave you with a plain image. Slicing is the reliable route.
• Can I do this without Photoshop? Yes. GIMP is free and cuts anywhere you drop a guide, and Figma's slice tool works if you designed there. Plenty of other tools can cut an image too. The table and the email fixes above are still on you either way.
• Why are there gaps between my slices? Email clients sit each image on a text baseline, leaving a few pixels underneath. Add display:block to every image and zero the cell's font size and line height.
• Will AI-generated slice HTML work in Outlook? If it's plain table HTML with inline styles, in principle yes. The hosting, exact widths, and gap fixes are still on you, and Outlook is the client most likely to expose a miss.