Thanks in advance for looking into this. We are pretty discouraged by this point…
When it was shared as a preview on Twitter, everything was perfect. But on Facebook, the OG image was always fuzzy despite how we save it, the resolution we use, or the image size we have (1200px by 630px or higher while staying within the 1:91 ratio). Increasing the resolution marginally helped the text on the left, but did nothing for the text on the bottle. On our screen, the image was always crisp on Photoshop (whether at 100%, or if we zoom in/out), and under Webflow’s OG preview.
We also downloaded the file from Webflow’s image URL link, and all looked great.
We even tried:
- Flattening the image before saving the file
- Merging the layers first before saving
- Saving the background with the text on the left with the 1200px by 630px size (tried resolution 72ppi, 144,ppi, 200ppi, 300ppi, 600ppi, and 1200ppi) as a separate file, made sure that the smart object (bottle label) has the same ppi, then duplicate these layers to the background with text file before merging visible or flatten the image before saving. We tried not merging visible nor flattening, and just saved the file as PNG with their layers. We tried flattening the layers for the smart object and then bringing it to the background with text file. Still no improvement by the time we preview on Facebook.
We also used one of our existing hero images (the one with file name ending with ‘portrait’) in Asset to see if the text on the bottle would be blurry when we preview on Facebook. Those seemed ok. So we try to use the hero image PNG file, extended the background and added the text on the left. Then go through the saving process, uploading to asset, clicking on the URL etc. Everything looked decent…till we test preview.
The hero image had a height of 2048px. So we tried to recreate the OG image with a height of 2048px (while respecting 1:91 ratio). Again, all looked great on Webflow, on the URL link, when we downloaded the image, on Photoshop, on Twitter…till we preview on Facebook.
Nothing we did seem to improve the text on the bottle. We can still see those details clearly on Photoshop and under Webflow’s OG preview regardless of how we save the file, so long the resolution is adequate. But somehow that was never the case on Facebook. So we don’t know if it’s just a Facebook issue?
Ps. Sorry we are trying so many different attempts! Not designers here.