Is there a specific size limit for Open Graph image preview(gif in this case) for a URL in iMessage? It seems like some of my smaller GIFs will load, where as the others just show a URL w/ no preview even though I have verified the correct property for og:image has been set.
Yes, indeed Apple has a limit on how big icon and image/video may be combined. The limit is 10 MB as stated in this video Apples video on rich links in iMessage.
The limit is as specified by Apple is 10 MB for all og: items combined(photo & icon).
Related
Please, I need your help.
I'm dealing with a background video for our homepage. This section has 100vh and is full-width. I'm using DIVI as a builder.
We hired a professional videographer to record a video for us. Now he asks me what should be the ideal:
frame size
frame rate
codec
file size
I've done some research and it seems like that the ideals are:
frame size: 1280 x 720
frame rate: 30FPS
codec: I don't know
file size: the less the better
Please, does anyone have any experience with background video? I'm pretty lost.
Also, would you upload it in the WordPress media library or would you use Vimeo/YouTube? I think you can't use YouTube as a background video, correct?
Thanks a lot!
Frame size:
1280 x 720 (=720p) means HD quality, which is quite good, but it is rather up to you, what quality do you find acceptable. Often 1920 x 1080 pixel (=1080p, fullHD) is used for background videos, like my main background video source is https://coverr.co/ where you can download free videos, specifically made for the purpose of being background videos. Those are 1920 x 1080 big. I would say, if you can ask for multiple files, ask for both, 720p and 1080p quality to be able to make a good decision.
The file size is connected to this, so the smaller frame sized video you will use, the smaller file size you will get.
Frame rate:
You could take a look at this image:
https://miro.medium.com/max/1300/1*uMlkXIMNF4VIZoi85NZ3aQ.png
to see what it means.
Movies on blu ray, dvd and cinema use 24 FPS, so that should be enough for you too. Here as well, the lower FPS means less filesize.
Codec:
h264
I'm a WordPress plugin developer and we always suggest this, when our users cannot figure out how to create a video, that plays on all browsers. So far it worked out well for everyone.
YouTube vs Vimeo vs MP4:
By default you cannot make Youtube videos to be backgrounds. There are some coding tricks, which might works, but I wouldn't suggest it.
Vimeo only allows background videos for Pro Vimeo users.
Using mp4 is simple, and also it works better in mobile and tablet devices. Some devices are opening up their Vimeo/Youtube applications automatically, when a Vimeo or Youtube video is started on a website. This is quite bad and your page will end up without background.
You should also note, that most browsers (even on desktop) only allow you to play videos automatically, if you will mute the video in the html code:
https://www.w3schools.com/tags/att_video_muted.asp
What #Gabor said.
1080p (1920 x 1080) is a good resolution for desktop.
If your user is on a mobile or other small-form-factor device it would be good if you could have the choice of 720p (1280x720) or even 360p (360x640). Those will save data downloads and fit the smaller devices. Look for a plugin that delivers the appropriate size video. You'll need a video file for each resolution.
Or don't show background video on users' mobile devices.
In your design think through what will happen in portrait mode. You probably want to clip off the right and left sides of the video material, so the center part fills the screen. So, the action should be in the center.
Is this video huge? Does it play for many minutes? If not, you absolutely should host it on your own site. Why get involved with, and pay for, some third-party media service if you don't have to? If it's really large (> 10MiB or so) you probably should ask another question and give more details.
Put no audio tracks in your background video files. Browsers restrict the playing of audio in background video, so there's no need to make your files fatter with audio tracks that won't play. (If you have audio, consider hosting a separate file to send users who click on the video to view it; most users won't.)
Use .mp4 files with H.264 video in them (one file per resolution). Other stuff, like webm with vp8 video, might generate smaller file sizes. But they don't play in as many makes and models of browser (I'm looking at you, Apple Safari.)
The video, in H.264 parlance, should be coded in the so-called Constrained Baseline Profile. It saves power when played on mobile devices and works better on slower devices.
Ask your videographer to give you streaming mp4 files (also known as fragmented mp4): they can start playing as soon as the first frame is downloaded.
Ask your videographer for advice about file bitrate. Your 1080p files should look decent coded with variable bit rate with a target of one megabit / second (8 seconds per megabyte). Your lower-resolution files will need a smaller bitrate: that's the point of them after all. But, your bitrate may vary. Action/adventure movies need a higher bitrate to look good than do talking heads.
As #Gabor mentioned, 24 frames/sec should be fine. 15 frames/sec is marginal. Ask your videographer what looks best for the material they created for you. Sometimes material shot at 30 frames/sec looks choppy at 24. (The way H.264 video works, once you get below 24 frames/sec the savings in file size aren't as dramatic as you might guess. 15 frames/sec takes more than half the file size of 30 frames/sec.)
I use linkedin v2 api and i`m having two problems:
1 - We have customer reports that when posting with us, the reach of the post is reduced dramatically.
2 - In addition, we find that when you publish an image via the API, Linkedin is adding a gray border. Even for images that follow the pattern indicated by your documentation.
Can you help with this issues?
unfortunately, LinkedIn is still sending people here from there support. I will not be able to answer question 1. But for question 2 you should check out the following:
Click here for more information about the images
We recommend that you upload rich media in 1200 x 627 aspect ratio. Images uploaded in the recommended 1200 x 627 ratio are automatically displayed on the mobile app with white padding on the top/bottom or sides of the image, to fit the ratio without being cropped. Although a 3:2 aspect ratio, or 1200 x 800, displays fully without padding, we recommend using the industry-standard 1200 x 627 ratio. Link share thumbnail image uploads are displayed in a 2:1 ratio. Limit text in rich media images to the center of the image in a title-safe area.
Please go through this link https://www.linkedin.com/help/linkedin/topics/6227/6237/81310/customizing-an-image-and-title-when-posting-a-url-on-your-linkedin-page?lang=en
I'd like to know how to increase the page upload time by compressing the images on my site, including the exit pop up gif?
Loading time is about 5 seconds.
It was built by WP.
How to fix this issue?
Please, tell me the way.
Thanks.
Your image files are likely too large. This is probably because your images have a very high resolution and/or are too large.
If you only need an image to be, say 400 x 500 pixels and your actual image is 1600 x 2000 pixels, you have an unnecessarily large image that will slow down your load time. You can reduce image size right in WordPress using their image editor.
You can also use tools like Photoshop to compress images so that they are smaller files and more web-friendly. Use Photoshop's "save for web" feature and reduce the image quality.
More detailed answers here.
in this page for instance:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.diveboard.com%2Fdennis.arreborg%2FD5wJDrE
I have the og:image tag pointing to http://st2.diveboard.com/222/25135_daa7a025d22d2acb8102d6ca8ddb284f_large.jpeg
which is :
dentify 25135_daa7a025d22d2acb8102d6ca8ddb284f_large.jpeg
25135_daa7a025d22d2acb8102d6ca8ddb284f_large.jpeg JPEG 1279x799 1279x799+0+0 8-bit DirectClass 228KB 0.000u 0:00.000
Yet on Facebook debug I get a strange error message :
og:image should be larger:
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://st5.diveboard.com/222/22562_8e364ce284eaa3ecb3f8ab5c84789310_large.jpeg' will be used instead.
any clue ?
I did a Facebook share on http://www.diveboard.com/dennis.arreborg/D5wJDrE and it correctly used image http://st5.diveboard.com/222/22562_8e364ce284eaa3ecb3f8ab5c84789310_large.jpeg. So no image size problem there.
I encountered situations with my own website in which images were not given as options to include in the share, although they met the size requirments: picture must be at least 50px by 50px (though minimum 200px by 200px is preferred) and have a maximum aspect ratio of 3:1. Just trying to share again solved the problem, and I read somewhere in the Facebook docs that you need to give Facebook 24 hours to somehow update itself for new images on your site.
I would love to give you references to the corresponding Facebook docs, but can't find it back, because they are being changed all the time, I guess.
In our client's website, favicon.ico file has several sizes from 8x8 to 32x32. I expect the 16x16 to show in browser tab, but instead it shows 8x8 icon in white frame. Why does this happen and what workarounds are there?
Favicon should be 16x16 or 32x32 at 8-bit or 24-bit, according to http://en.wikipedia.org/wiki/Favicon#Standardization_and_implementation
But in my experience, try to get the favicon to have file size 1.12KB like Google, StackOverflow etc :P
try clearing cache and rebooting. See here
Your favicon is 24 X 24, try making it 32 X 32.