Problem: I am using Hello.js hello.api() to share image and text based content.
It shares as per provided values and it shares images which are uploaded on public domain. I am using Public azure container for image sharing, when I am sharing Azure based blob (jpg/png image) using same procedure the image reduces in size as comes next to the URL content as shown below.
Expected Behavior: Description text, then shared azure blob based image and after that URL which was shared with content should come as shown in expected behavior.
expected behavior:
Question:
Even when the blob is public and can be accessed from any user on any browser with actual dimensions, why LinkedIn is not rendering that image after post is shared. As per the guidelines image is within the image sharing limit.
Image dimensions:
Width 1600 px
Height 300 px
Ashish,
Do you have content-type set for your blobs? If you don't set that then the blob may not be treated as an image by browsers.
Also, if nothing works you can always create a dummy page on your website that hosts that image and then share a link to that page.
Related
When utilising Firebase Storage to store imagery, for example, user avatars, is there a way that you can request a smaller, thumbnail sized serving of the image?
I have searched Google and documentation and I have been unable to come up with a result. Currently my app utilising Firebase Storage URLs experiences a minor delay prior to loading images due to the fact that it I am requesting large images to fill tiny avatars.
Is there a resource I am overlooking that specifies the available parameters for this URL? (of which token & alt are two I'm aware of).
Thank you for the assistance in advance.
Auto-resizing images upon read is not a feature of Firebase Storage. The typical solution is to create variants of the images during upload, for example through the Resize Images extension.
I'm creating sort of a tutorial application and have to display images from firebase storage with a step-by-step tutorial. Currently I'm using the .getDownloadUrl function and am displaying the images using Cached Network Images(External library) with the URL. The images are replaced when the step is completed and it takes at least 2-3 seconds to load an image and can get quite irritating for a user. Also, to minimize latency I shifted the Cloud Storage location nearby to where a user would be, this improved the speed slightly. Is there a better way to display images, apart from storing the links on Cloud Firestore or saving all the URLs in one list at the start.
The most common approach is to compress/resize (or both) your images. By doing this you have a few options:
1. You can display the thumbnail by default and only load the full image (or load it in the background) when the user requests it (eg. they click on details about the tutorial)
2. Load a different version of the image depending on the screen size (you don't need to display an image meant for desktop on a mobile device)
3. Replace the old image with the compressed one. Depending on what the content is, you probably don't need images larger than 200kb, and that's being generous.
You could also consider storing your images using a next gen format, such as WebP as it is considered one of the most efficient image types. But, it's not yet supported on all devices, so you'd want to include a fallback type.
You said you're caching the images which is a good step to reduce load times. You also said you shifted the storage location to be closer to the users. You could also try to find a CDN that is even closer to your user's locations (probably diminishing returns).
You seem to be against storing the downloadUrls in your database. This would help as all you'd have to do is load the image, instead of ping the bucket for the url and then load it.
Another potential solution for your use case could be to download the images for this tutorial, as well as the next one so when the user clicks next the images are already downloaded.
Unfortunately there isn't a lot else you can do. There's a lot of data packed into an image and it takes some time to load and render it
We've set up a new mini-site with extensive social sharing, including LinkedIn. Lots of OpenGraph tagging, the works. We have chosen specific images to be shown when sharing by using the og:image meta property.
The images work fine on Facebook and Pinterest, but are not working properly on LinkedIn. Here's the OG image tagging:
<meta property="og:image" content="https://img.mshanken.com/d/wso/Articles/2016/ST_TheBreakers070516_1600.jpg">
But if you click the LinkedIn icon we have set up at the bottom of our page, you end up on a share page that looks like this, which does NOT show the image:
Weirder still, if you inspect that share preview, the image IS in the source code:
<div class="image-thumbs-container">
<img src="https://media.licdn.com/media-proxy/ext?w=180&h=110&f=c&hash=q0uvWygJS2HJrhZZ2qZGdYu2Tig%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6jnhxUzw8p4aCKqEH-50hKCoaTFXP-RFTovozTPCKqZsXfeLS-xzl5HHRU4kZnLrT9AnPhFZO5KoyAfNpxi4m_ZMc" width="130" alt="Preview of the share image" data-orig-url="https://img.mshanken.com/d/wso/Articles/2016/ST_TheBreakers070516_1600.jpg" data-width="" data-height="" data-size="" data-position="1" class="active">
</div>
What do we need to do to get that image showing up on LinkedIn shares?
I was having the same issue last night. Spent hours researching solutions. Finally I contacted LinkedIn about this issue and they responded right away. Their development team has implemented a new tool called "Post Inspector", which allows you to optimize content sharing. Literally, in just minutes this worked.
All you have to do is type in your URL and they do all the busy work i.e. verifying correct code of properties such as image, author, title, description, publication date etc. Not only do they verify, they also tell you what to include and what is missing.
Here is the website to use Post Inspector:
https://www.linkedin.com/post-inspector/
Couple of things it could be:
The dimensions 1600x900 and size of 220kb are within LinkedIn's requirements. However, your aspect is 16:9 instead of 4:1 / 1:4.
Max file size: 1 MB
Minimum image dimensions: 80 x 150 pixels
Recommended aspect ratio: 4:1 or 1:4
Making Your Website Shareable on LinkedIn
Your image URI is https, it could be they are unable to retrieve your image. Have you tried with an http image?
Note: If the image meets the requirements, but it still does not
appear in updates on LinkedIn, your website may be blocking us from
pulling the image or the image may be located on a protected directory
or website.
Making Your Website Shareable on LinkedIn
Was the image change from the first time LinkedIn crawled your page for the image? They do cache for ~7 days.
The first time that LinkedIn's crawlers visit a webpage when asked to
share content via a URL, the data it finds (Open Graph values or our
own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description,
upload a new image, fix a typo in the title, etc., you will not see
the change represented during any subsequent attempts to share the
page until the cache has expired and the crawler is forced to revisit
the page to retrieve fresh content.
Shared Content Caching
Chiming in from the future - I faced this issue today as our site update wasn't displaying the proper image. In my case the solution was simple: try posting the link like so: https://url.com/?jhskjsh and it forced linked in to fetch the meta tags again which then displayed my image, as opposed to the grey square it previously had.
I am starting to develop a mobile application and have some issues with the images.
In fact I am transforming an existing website to a mobile app, so I am using the existing database with the existing pictures too.
The problem is that the images have a really good quality (5MB each) and I have more than 100 images to include on the app.
Is there any website who can transform the image online and give a link.
For example the image is here
http://myWebSite.com/img1.jpeg
I want a website like that
http://compressWebSite/myWebSite.com/img1.jpeg
PS : I don't have access to the website server to optimise the images. I have only access to the link of each image from the database.
Based on what you say, your requirements are
Only have URL of the images
Want to send the URL of the images to a service to compress the size down (with similar image quality)
Reference just the compressed image URL
If thats the case, you can refer to TinyPNG or Kraken.io services
I noticed the pixel array is only one image, I wonder if it is dynamically created on a page request and then cached? Is that possible to do with .NET?
I wouldn't be supprised if the entire page was completely static. It looks like nothing more than an image with an Area Map over the top of it, the query string just changes the image from the previous cached one, probably incremented when he was selling pixels.
http://milliondollarhomepage.com/img-pix/image-map.png?r=476
There's no reason why you can't dynamically generate the image server-side and cache it. So yes it's possible.
It's a single giant image with an image map
You can see this by viewing the source.
Also, being that the image has a querystring parameter, I'm assuming that the image generation and map generation is all being done server side.
src="img-pix/image-map.png?r=323"
And "YES" this is possible to do entirely in .NET