CMS Development

egleeson
投稿者 | Elite Partner
投稿者 | Elite Partner

Blurry logo in header/footer

Hi,

 

I've tried a couple logo versions, all hi-res, and they all appear blurry in the header and footer. Any ideas? I've uploaded both png and jpeg files with transparent and non-transparent backgrounds and gone through the CSS to make sure there's no settings in there distorting the logo sizes.

 

Help!

12件の返信
LegUp
メンバー

Blurry logo in header/footer

I followed the instructions on this page and it worked perfectly. I created individual artboards for each logo version (square, horizontal, etc.); also put the artwork on its own layer; used the artboard export tool as described in article; I tested as both a 1x output and a 150ppi.

The 150 ppi came out super crisp.

https://www.quora.com/What-is-the-best-practice-for-exporting-logo-asset-files-in-Illustrator-CC-usi...

0 いいね!
jehlen
参加者

Blurry logo in header/footer

I found a solution that works for me. Instead of uploading an image file, I added a new image and linked it to my logo url from my wordpress website. For whatever reason, the logo in the email is super crisp. 

jennysowyrda
コミュニティーマネージャー
コミュニティーマネージャー

Blurry logo in header/footer

Thanks for sharing @jehlen

0 いいね!
benvanlooy
トップ投稿者 | Platinum Partner
トップ投稿者 | Platinum Partner

Blurry logo in header/footer

0 いいね!
BryZ
メンバー

Blurry logo in header/footer

?noresize does not work. It looks like it does in the builder, but once you send the email it goes back to blurry. Really disspointing. 

liesbethhermans
参加者

Blurry logo in header/footer

I'm having the same issue...

0 いいね!
nstell
参加者

Blurry logo in header/footer

I had this issue for months. Try embedding your logo into a Rich Text Module (and add any custom coding necessary) and use that in place of the Global Logo Module.

 

After several back-and-forths with customer support, it seems like, at least in our case, the Global Logo Module was what was causing the logo to render poorly. According to the support rep I worked with:

 

"As the logo modules are designed to be user friendly there is a bit of a tradeoff to writing the source code in a custom fashion."

 

I was able to come up with a workaround that might provide you with a better image quality. If you look at the 1 column template you will see that there is a rich text module above the logo. I edited the source code of the module to be the following:

 

<div style="max-width: 300px;"><img src="https://xyz123.png" style="max-width: 100%;"></div>" 

liesbethhermans
参加者

Blurry logo in header/footer

What works for me as well is using an .svg format for the logo

0 いいね!
jonathanking
参加者

Blurry logo in header/footer

SVG format will not work in email, so you are still going to have the pixelation issues.

0 いいね!
Anonymous
適用対象外

Blurry logo in header/footer

Hi,

 

Can you share the preview link once?

SaraLynnn1
投稿者

Blurry logo in header/footer

I had this issue too. Try saving your logo as a SVG file and using that--this worked for me and made the logo appear nice and crisp.

0 いいね!
jonathanking
参加者

Blurry logo in header/footer

SVGs won't work for in gmail, so unforatuntely this fix won't work for your email sends.

0 いいね!