Our OG image is always blurry when we use Facebook’s Sharing Debugger tool to get a sense of how the image would look.
We tried a few ways to resolve this:
- Saving the image @ 2x, 3x
- Increasing resolution to 600, and even 1200
- Saving the image as PNG-24, PNG or even JPEG (we read the latter compresses less than PNG
- Making the text in the image crisp/strong/smooth with anti-aliasing
- Saving image for web
We have also added those og:image tags to the header code section.
No improvement whatsoever.
For reference, this is how it looks in Photoshop:
Surely, our eyes aren’t playing tricks on us 
What are we doing wrong? 
Here is my site Read-Only LINK
Maybe it’s just me, your OG image looks not too bad
Have you compared the file size of your original image before and after uploading to Webflow? Usually Webflow compresses images for performance.
If Webflow is responsible for the degradation, you could also host the image on some other domain, where you are in control of the image and it’s quality!
You can set the URL in the settings of any page
Hey there! Thanks for your input. The image with dark grey background is the original image. This is how crisp we want our image to be when people share on Facebook.
Just checked the original file size and the file size on Webflow. You’re right! There is some difference with the size.
So sorry to ask for a bit more details - this is our first time building a website. How exactly do we host an image on another domain? We have a custom domain with Hover. We know the bit about connecting Webflow and Hover from the project’s Settings side. And then? Do we simply create a new project on Webflow, create a new page and just insert the image there?
No need to be sorry 
There’s a plethora of image hoster available, you could also upload it to Google drive or Dropbox and use the share link.
Keep in mind, the og images usually are not displayed that big on social networks and the like, most probably the image is fine as is
Hi again
We tried uploading the image to Google Drive and used the share link.
On Webflow Designer mode, the image looks great under the OG settings. But on the Debugger, it is still fuzzy once when scrape the site a few times? Have we just been staring at this too long? 
Screenshot 2020-06-18 at 4.47.28 PM|690x378, 75%
Hi there @skinpores!
Do you notice a low res when viewing the OG images when it is shared as a preview on social media?
Let me know, and I would be more than happy to continue helping out here.
My best,
Riley
1 Like
Hi Riley,
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.
Isn’t this just Facebooks own crappy resizer making it fuzzy? Try making a smaller image. Find the actual dimensions of the facebook debugger image and try uploading a version that’s the same. That way their internal resizer won’t dick around with your image.
1 Like
If fb is the only affected node, the issue lays probably there
