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!
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: