Since many of our clients use MailChimp for e-newsletters and such, creating graphics for branded sign-up forms is not out of the ordinary. We don't do it every day, but we do tinker around when someone needs assistance. Over the past few weeks, we've been building a website for Define Bottle, and it was killing me that the header graphic on their MailChimp form was looking fuzzy. I must have created 10 different files trying to find a solution. I followed MailChimp's online instructions to a T, but I was left baffled as to why my perfectly-sized graphic saved out at max quality was looking less than stellar.

Today, I found the solution and I'm sharing it just in case you've run into the same issue.

First, let me show you what the header graphic looked like originally when I uploaded it to MailChimp by using the "design header" option in their drag-and-drop builder.

Eww. Horrible. Even though MailChimp said I could upload a graphic with "any width x any height," my 600 x 152 image made it look like I was trying to make do with something half the size. In another window, it told me I needed an image with a width of 600 pixels. Oookay, but my image IS 600 pixels wide!!

Then, I decided to start over and delete the header graphic entirely. My form builder now looked like this:

Instead of clicking on "design header," I clicked on "use text." A window popped up, giving me the option to insert an image:

After clicking on the image icon, another window popped up and I browsed my computer for the same header graphic I used previously.

After checking the dimensions, keeping the proportions, and typing in the Alt Text, I clicked Save. This brought me back to the form builder, at which point I hit Save and Exit. What do I see now? A CLEAR header looking just as it should!

[hr]

With regards to the comments below about removing or decreasing the space between the bottom of the header and the top of the form, this visual might help: