Logo for facebook & Whatsapp gets pretty blurry. Why?

[scar2k]

Hi,

i tried to make an updated facebook and whatsapp logo for a friend. I completely remade it in Designer. No matter how i export it, it looks messy on mobile and little size screens. I tried jpeg and png with different sizes. 

My export setting were: PNG-24 and 300x300 as well as 600x600 and bigger. Bigger makes it way worse. I followed the guidlines given by facebook support pages. But nothing seems to help. I know text on logos is a bit supoptimal, but that outcome is to bad for my taste.

Do i have to change settings on my side and in Designer or does it have something to do with facebook compression? Any help is appreciated.

Greetings =)

 Facebook on Desktop

 Whatsapp/facebook on mobile

logo_source.afdesign

[AlainP]

Can you make your original file available so we could have a look at it?

[scar2k]

Of course, i added a source file to the original post.

[Gabe]

Hi @scar2k,

If the file looks fine on Desktop Facebook and not on the mobile platform, there's nothing to do with our software, as that's a post operation. If the file looks fine when you preview it, that's our job done. Past that point, it's the 3rd party responsibility to distribute the image and to compress it.

One thing to mention. Your colour profile used is "ColorNegative". I suggest you use sRGB as the image will be converted to sRGB by Facebook anyways. 

Thanks,

Gabe.

[scar2k]

That was no critic on the program. I knew the problem was me or facebook. =) Thanks for the tip with the color palette, i will change that. It was not set by intention. But may it have to to with the document settings set to cmyk?

[Gabe]

The compression will have nothing to do with the colour space. It's not a great idea to distribute the photo in CMYK, because CMYK is mainly for professional print and not for digital use, and has a narrower colour spectrum. 

[scar2k]

Yeah i picked CMYK because it is build with print in mind. I just exported a copy for the facebook profile so that's why i used it. Thx for the explanation, i will keep that in mind next time around.

[reesh]

On 11/17/2018 at 12:28 PM, scar2k said:

Hi,

i tried to make an updated facebook and whatsapp logo for a friend. I completely remade it in Designer. No matter how i export it, it looks messy on mobile and little size screens. I tried jpeg and png with different sizes. 

My export setting were: PNG-24 and 300x300 as well as 600x600 and bigger. Bigger makes it way worse. I followed the guidlines given by facebook support pages. But nothing seems to help. I know text on logos is a bit supoptimal, but that outcome is to bad for my taste.

Do i have to change settings on my side and in Designer or does it have something to do with facebook compression? Any help is appreciated.

Greetings 😃

 Facebook on Desktop

 Whatsapp https://fmwhat.download/ /facebook on mobile

logo_source.afdesign

some possible solutions to improve the outcome.

Export Format:

For logos, it's generally recommended to use PNG format as it supports transparency and preserves the quality of text and graphics.
Stick with PNG-24 as it provides the highest quality and supports millions of colors.
Export Size:

Facebook recommends using a minimum size of 180x180 pixels for profile pictures and 820x312 pixels for cover photos.
WhatsApp profile pictures should be at least 192x192 pixels.
Consider exporting your logos at these recommended sizes to ensure they display properly on both mobile and desktop devices.
Compression and Optimization:

Facebook and WhatsApp apply compression to uploaded images, which can affect the quality.
To minimize the impact of compression, make sure your exported logos are already optimized for web use.
Use image optimization tools or plugins to reduce file size without sacrificing too much quality.
Text Optimization:

As you mentioned, text on logos can be challenging due to compression and resizing.
To improve legibility, use a font size that is large enough to be clear even at smaller sizes.
Consider simplifying the text or using a bolder font to enhance visibility.
Test and Iterate:

Experiment with different export settings and sizes to find the optimal balance between file size and quality.
Test your logos on various devices and screen sizes to ensure they appear crisp and legible.

[Patrick Connor]

@reesh

Welcome to the Serif Affinity forums 😶

According to https://copyleaks.com/ai-content-detector both this and your other post were written by AI, and you do not seem to be a registered Affinity user.  So although they may be a potentially useful answers, we would prefer replies here to be personal experience based.

Would you care to say anything else/real before your account is banned?

[debraspicher]

On 11/18/2018 at 12:03 PM, scar2k said:

Yeah i picked CMYK because it is build with print in mind. I just exported a copy for the facebook profile so that's why i used it. Thx for the explanation, i will keep that in mind next time around.

I know it's a side conversation, but for design purposes I really recommend for web to create a web-export preset. Most importantly, you want to convert your image to a sRGB color profile and then embed, which will convert your CMYK document to a color space that is handled more gracefully when redistributed on the web (since sRGB is the fallback when color profile recognition fails). (Tap/Click below to preview) This will give the best results. I understand the post is about blurriness, but a shift in color can also result in poor sharpness (and thus poor legibility/recognition, the main reason to deal with the blurriness).



Web browsers by default will display images at sRGB unless another profile is embedded. CMYK is not predictably displayed by web browsers, so in many cases it will simply fallback to sRGB and result in a color shift...

However, the issue for you will not be the CMYK support once you push it out to another website. Facebook probably accounts for the profile ... but in many cases, sites when handling the upload simply won't recognize the color profile in backend since it's entirely dependent on the person who wrote the code whether color profiles are even processed or not, thus the profile can be dropped, and inevitably it'll lead to a color shift. Thumbnails are a good example of this. The file when clicked and viewed may look different because the profile is maintain, but the thumbnail often is missed on upload and thus may shift back to sRGB. So what I'm basically saying is not all websites will handle color profiling with great care (many simply won't). The other thing to consider, if a user or someone downloads your image and decides to reuse from this website (maybe even you or page staff...), it's entirely possible whatever app/website use they use to redistribute the image will lose the color profile.

Therefore, it is very important for images meant for wide distribution/recognition across the web to use sRGB as its embedded profile. Even if the image loses the embedded profile, the fallback is always sRGB so it shouldn't color shift. If you're uploading for your own portfolio or "artistic" display on a website meant for creative viewing, then it's perfectly acceptable to use a different profile like Adobe RGB. But definitely not CMYK because it's really not designed for web display and so support for it for superficial...


As for the blurriness.... I recommend to stick with Facebook guidelines and dimensions. This will give you the best result. If you are only testing on one mobile device, you must check others (preferably Android and iOS) to be sure it's not a device-specific setting to see whether the issue crops back or not...

Resources for you:

Web Browser Tester (CMYK checker) ... FWIW, My browser (FF Developer) does not support, but Chrome did when I last checked... YMMV

https://chromachecker.com/info/en/page/webbrowser

 

Edit: Ideally, you'd want to "recreate" the above logo for a web/RGB version, anyway. (Note: CMYK is not RGB). Also, on your future tests, pay attention to the thin stroke around the logo and the lettering... essentially,to create an Artboard at FB's recommended size... and then just "rescale" the graphic. Pay attention to pixel snapping to maintain sharpness of the text upon output (convert text to curves to align) and maybe up the stroke a tad to "match" similar output/aesthetic to the print-capable version for branding purposes... and of course, consider small details such as how well this looks as an icon... it might help to play with a black and white version so you can play around with legibility at very small sizes. Remember, the graphic is going to be viewed in a variety of lighting conditions in mobile...