facebook messenger og:image cropping - html

I have some issues with my website image preview when I share my website as private message on Facebook (in messenger not Facebook post). In my html homepage I use og:image and I tested with two different image (obviously not in the same time) size 200x200 and 600x315 (I also try by specify the width and height with og:image:width and og:image:height but nothing change).
When I share the website link (with 200x200 image) on facebook messenger (as private message in chat to a friend) I obtain on desktop a preview (in the small chat on bottom or directly in messenger) with my website description on the right and my website image not cropped on the left and this is correct due to using an image small than 600x315. On messenger mobile instead I see the image cropped on top and the description on bottom and this bad.
Then I try, as recommend by facebook, to use an image 600x315 and in this case the result got worse because on desktop I see in the small chat the website description on the right and the image cropped on the left and If I open messenger I see a large image not cropped on top and the description on bottom. On messenger mobile instead I see the image cropped on top and the description on bottom.

Related

Image isn’t showing in nav bar. The image is located properly and briefly showed before the website loads over it

I am creating a website the my nav bar which is two images is not loading. The two images flash up in their right places with a white background before the rest of the website loads.
See code below
https://wtools.io/paste-code/bJ9n
https://wtools.io/paste-code/bJ9m
Image I want loading in nav is drum stick
I tried Z axis.
The image loads when in a different div but it’s not in the right place and the website isn’t as responsive with it.

blurry video thumbnails in shopify theme

I've an issue with blurry video thumbnails with a shopify theme (Flex from Out of the Sandbox). The image in the middle is a blurry video thumbnail, whereas the top and bottom one are regular sharp product images. Link to sample product.
I tested the content within different environments:
The video itself is sharp, which is visible when it's being streamed
-> video is not the issue
The video thumbnail is sharp on another theme (Debut from Shopify)
-> Shopify CDN is not the issue, must be the theme I am using
I also uploaded a cover jpeg within Shopify admin which didn't change anything.
I couldn't identify the problem by inspecting with the browser dev tools. Can somebody give me a hint how to fix this?
In your liquid code the image URL filter is set to '300x300' (see below image)
You may just remove this or set it to 1024x1024 for better image.
Hope this info will help you.
Best of luck

TVTopShelfCarouselItem title display on top of image

I have implemented a tvOS 13 fullscreen top shelf extension with TVTopShelfCarouselItems that have a imageURL and a previewVideoURL set.
The item's title however is only displayed when the video is playing, not while the image is shown. It doesn't matter if the items have or don't have a previewVideoURL set.
The behaviour is different in Apple's TV app that show's the title also on top of the image (for movies that don't have the title in the poster).
Is there a way to achieve this behaviour?
After further investigation of Apple's TV app behaviour, it seems that Apple works around this issue by embedding the title in the image.
Because the title on top of the image is also visible when the information overlay is hidden.
I filled an enhancement request feedback with Apple.

Large image getting automatically scaled down to a blurry image on webpage

I've uploaded an image which is not blurry at all but once I display that image on the home page it looks like image 1 (very blurry).
image 1
The original image is not blurry at all. The graph was created in excel, I zoomed up real close, took a print scr (as opposed to snipping tool as with snipping tool it does get blurry) then put it in paint and cropped it out and saved it as a PNG.
Any suggestions?
If you put your image as it is and don't change the dimensions of your image, its's should looks fine (not blur). but if you change your image dimensions and force image to bigger than it's original size, it must be blur.
for more detail please mention your webpage link.

Images not visible through smartphone

www.michaelpeyron.com/wp
That's a demo of a site i'm working on. Whenever I visit it in browser and I reduce the window to smartphone size all images are there. But when I use my iphone 6 and visit the site, the images of instagram, twitter and facebook just isn't there.
I've zero clues about what the reason can be behind this behavior.
The twitter, facebook and instagram images are all from: https://fortawesome.github.io/Font-Awesome/cheatsheet/