â–Ľ
Streaming live at 10am (PST)

How do you host an image on your custom domain?

Hello,

Still finishing our first website. We are experiencing issues with our OG image, and a suggestion to try is to host our image on our custom domain.

But we have no idea how to do that :thinking: Would someone be able to let us know please?

(Not sure if this info is needed, but we have a basic hosting plan here. Got our domain from Hover.com)

Thank :slight_smile:

That’s not quite what I meant. The meta tag for the og image allows any domain and is not restricted to the domain of the document where the meta tag is in.

I’m not sure if hover provides just the domain or if you have additional space there for hosting stuff.
It’s much more easy to just upload the image to any free image hoster that keeps your image and won’t delete it after x days (some do). Your original goal was to circumvent compression of the image through webflow, right?
Was there a problem with hosting the image on gdrive or Dropbox?

Hi again,
Sorry we misinterpret! We got in touch with Hover and there’s no space to host stuff.

We tried hosting the image via Google Drive and Dropbox, but the image was still fuzzy when it went through the Debugger. We upped the image resolution to 2400 while keeping the size at 1200 x 630px, and the image was only marginally better… :confused: Surely, at 2400 an image should be pretty sharp?

We tried 2 free image hosters:

  • ImgBB: on both Webflow OG settings and Debugger, it showed up as a broken image.
  • Techpowerup.org: Shows up okay on Webflow, Debugger fuzzy

We even reached out to Facebook Forum, but we aren’t hopeful we’ll get any response…

Sorry to hear that this is such a hassle :pensive:
Upping the resolution to 2400 is probably overkill and will lead to fringing of small details when viewed at smaller sizes — best keep it at recommended values.
There must be a better solution to this…

  • You did compare the images before and after uploading right?
    Not only for WF itself, but also gdrive etc?
  • Did you check your preset in PS? PPI value? if set to 72ppi this could lead to the (perceived) low quality regardless of resolution
    Did you mean resolution as pixel-per-inch?
  • Is this your first rendevouz with the FB debugger and this problem or did you normally don’t have this issue? Maybe FB debugger compresses the image in some way?
  • did you check the og image without debugger in a browser tab or downloaded it and compared it to the original?

If nothing seems to work, you could try to alter the image, so that the product is displayed larger (in proportion to the image) to circumvent aliasing issues with the text on the bottle?

Can you share some of the links to the images? It may help me to get a better understanding if I can see the images and can compare them better…

Hey!
Thanks for trying to help us so much. We really appreciate this!! Hopefully it hasn’t been a hassle for you, even if it has been for us :slight_smile:

  • You did compare the images before and after uploading right? Yup. Between our original file size (image at 1200px x 630px) with Webflow and GD, the difference is around 2KB. Visually we couldn’t tell the difference. With the 2 free image hosters, we weren’t able to find out the uploaded file size.
  • Did you check your preset in PS? PPI value? if set to 72ppi this could lead to the (perceived) low quality regardless of resolution Yup. We had our 1200 x 630px image set at 300ppi. Is that not sufficient?? Too much? (not designers here)
    *Did you mean resolution as pixel-per-inch? *You meant this, right? *
  • Is this your first rendevouz with the FB debugger and this problem or did you normally don’t have this issue? Maybe FB debugger compresses the image in some way? This is our first time with FB debugger. Clearly, not a great experience for us so far lol
  • did you check the og image without debugger in a browser tab or downloaded it and compared it to the original? We downloaded the image from Webflow URL and GD. Image looked good on both accounts at 100% and when we zoom out. When we zoom in, it started getting fuzzy, but that’s normal? We also checked the resolution of the downloaded image. Still said 300.

We tried enlarging the bottle to fill out the height of the image. Also tried recreating the image altogether, use a thicker stroke for the second line and used a darker color. On both occasions, tried GD and Webflow with the debugger and…:expressionless:

Black text on the left is relatively acceptable. Text on the bottle…not so much. :see_no_evil:

Happy to share the images. Hope it’s ok that we are sharing via GD.
https://drive.google.com/drive/folders/1DCZRg4c_SWTbdS4aXjAmcxm1cIypEPmv?usp=sharing

Thanks! :pray: :pray:

Using your own domain, rather than the default domain, has many benefits, such as branding, but also email deliverability. Add your image sub-domain to your Hyperise account,
Add the DNS records to your domain, Add the DNS records to your domain, Once completed you’ll see a new notification.