Recommended Media Attachment Format¶
The first three example are our recommendation on how to format image, video, and audio media attachments. Further properties are possible, and might make it into this recommendation at one point. Examples:
- Focal point and blurhash, see Mastodon
- fps (frames per second) for videos
The final example cannot be recommended yet as it is not widely supported. However, it illustrates how one can provide multiple versions of the media attachments. A high quality and low quality video in this case. The low quality video is enough for most use cases, and is 40 times smaller.
!!! info This recommendation is work in progress. A description of why these choices will hopefully appear as a FEP
Examples¶
Example 1¶
activity
{
"@context": [
"https://www.w3.org/ns/activitystreams",
{
"Hashtag": "as:Hashtag",
"sensitive": "as:sensitive"
}
],
"type": "Create",
"actor": "http://pasture-one-actor/actor",
"to": [
"http://mbin/u/oscar",
"https://www.w3.org/ns/activitystreams#Public"
],
"id": "http://pasture-one-actor/actor/ZvzMlFgIR-k",
"published": "2025-01-14T15:43:11Z",
"object": {
"type": "Note",
"attributedTo": "http://pasture-one-actor/actor",
"to": [
"https://www.w3.org/ns/activitystreams#Public",
"http://mbin/u/oscar"
],
"id": "http://pasture-one-actor/actor/sZ6HF_5rmsk",
"published": "2025-01-14T15:43:11Z",
"@context": [
"https://www.w3.org/ns/activitystreams",
"https://www.w3.org/ns/credentials/v2",
{
"size": "https://joinpeertube.org/ns#size"
}
],
"content": "Recommended Image Format",
"attachment": [
{
"type": "Image",
"name": "A beautiful cow",
"url": "http://pasture-one-actor/assets/cow.jpg",
"width": 100,
"height": 162,
"mediaType": "image/jpeg",
"digestMultibase": "zQmaeDPzhNL32WQZnnzB1H6QJWvvFNEHdViDB71yrxyXU1t",
"size": 9045
}
],
"cc": []
}
}
mbin
{
"content": "<div class=\"content\">\n<p>Recommended Image Format</p>\n</div>",
"html": "<blockquote class=\"section post subject\" data-action=\"notifications:Notification@window->subject#notification\" data-controller=\"post subject mentions\" id=\"post-17\">\n<header>\n<a class=\"user-inline\" data-action=\"mouseover->mentions#user_popup mouseout->mentions#user_popup_out\" data-mentions-username-param=\"@actor@pasture-one-actor\" href=\"/u/@actor@pasture-one-actor\" title=\"@actor@pasture-one-actor\">\n actor <i aria-description=\"This user is new (active for less than 30 days)\" class=\"fa-solid fa-leaf new-user-icon\" title=\"This user is new (active for less than 30 days)\"></i>\n</a>\n<span>, </span>\n<a class=\"link-muted\" href=\"/m/random/p/17/Recommended-Image-Format\"><time class=\"timeago\" datetime=\"2025-01-14T15:43:11+00:00\" title=\"2025-01-14T15:43:11+00:00\">1 second ago \n</time></a>\n</header>\n<figure>\n<a data-action=\"mouseover->mentions#user_popup mouseout->mentions#user_popup_out\" data-mentions-username-param=\"actor@pasture-one-actor\" href=\"/u/@actor@pasture-one-actor\">\n<div class=\"no-avatar\"></div>\n</a>\n</figure>\n<div class=\"content\">\n<p>Recommended Image Format</p>\n</div>\n<aside class=\"vote\">\n<form action=\"/pf/17?choice=0\" class=\"vote__up\" method=\"post\">\n<button aria-label=\"Favorite\" data-action=\"subject#vote\" title=\"Favorite\" type=\"submit\">\n<span data-subject-target=\"favCounter\">0</span> <span><i aria-hidden=\"true\" class=\"fa-solid fa-arrow-up\"></i></span>\n</button>\n</form>\n</aside>\n<footer>\n<figure>\n<figcaption class=\"hidden glightbox-desc thumb-alt-17-1\">\n A beautiful cow\n </figcaption>\n<div class=\"figure-container\">\n<div class=\"figure-thumb\">\n<a class=\"thumb\" data-description=\".thumb-alt-17-1\" href=\"https://mbin.domain.tdl/media/6e/40/6e403ee33c2817a06af46b6e362c054aec3b43057ff32d2f7ac7761761e6e1ff.jpg\">\n<img alt=\"A beautiful cow\" loading=\"lazy\" src=\"http://mbin/media/cache/resolve/post_thumb/6e/40/6e403ee33c2817a06af46b6e362c054aec3b43057ff32d2f7ac7761761e6e1ff.jpg\" title=\"A beautiful cow\"/>\n</a>\n</div>\n<div class=\"figure-badge\">\n<div class=\"figure-badge-label\">ALT</div>\n</div>\n</div>\n</figure>\n<menu>\n<li>\n<a class=\"stretched-link\" data-action=\"subject#getForm\" href=\"/m/random/p/17/Recommended-Image-Format/reply\">Reply</a>\n</li>\n<li>\n<form action=\"/pb/17\" method=\"post\">\n<button class=\"boost-link stretched-link\" data-action=\"subject#favourite\" type=\"submit\">\n Boost <span class=\"hidden\" data-subject-target=\"upvoteCounter\">(0)</span>\n</button>\n</form>\n</li>\n<li class=\"dropdown\">\n<button class=\"stretched-link\" data-subject-target=\"more\">More</button>\n<ul class=\"dropdown__menu\" data-controller=\"clipboard\">\n<li>\n<a class=\"\" data-action=\"subject#getForm\" href=\"/pr/17\">\n Report\n </a>\n</li>\n<li>\n<a class=\"\" href=\"/m/random/p/17/Recommended-Image-Format/votes?type=up\">\n Activity\n </a>\n</li>\n<li class=\"dropdown__separator\"></li>\n<li>\n<a href=\"http://pasture-one-actor/actor/sZ6HF_5rmsk\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">\n Open original URL\n </a>\n</li>\n<li>\n<a data-action=\"clipboard#copy\" href=\"http://pasture-one-actor/actor/sZ6HF_5rmsk\" rel=\"nofollow noopener noreferrer\">\n Copy original URL\n </a>\n</li>\n<li>\n<a data-action=\"clipboard#copy\" href=\"/m/random/p/17/Recommended-Image-Format\">\n Copy Mbin URL\n </a>\n</li>\n</ul>\n</li>\n<li data-subject-target=\"loader\" style=\"display:none\">\n<div class=\"loader\" role=\"status\">\n<span class=\"visually-hidden\">Loading...</span>\n</div>\n</li>\n</menu>\n<div class=\"js-container\" data-subject-target=\"container\">\n</div>\n</footer>\n</blockquote>"
}
Example 2¶
activity
{
"@context": [
"https://www.w3.org/ns/activitystreams",
{
"Hashtag": "as:Hashtag",
"sensitive": "as:sensitive"
}
],
"type": "Create",
"actor": "http://pasture-one-actor/actor",
"to": [
"http://mbin/u/oscar",
"https://www.w3.org/ns/activitystreams#Public"
],
"id": "http://pasture-one-actor/actor/U4M-VY-1OZA",
"published": "2025-01-14T15:43:12Z",
"object": {
"type": "Note",
"attributedTo": "http://pasture-one-actor/actor",
"to": [
"https://www.w3.org/ns/activitystreams#Public",
"http://mbin/u/oscar"
],
"id": "http://pasture-one-actor/actor/mI7KuUf4vRI",
"published": "2025-01-14T15:43:12Z",
"@context": [
"https://www.w3.org/ns/activitystreams",
"https://www.w3.org/ns/credentials/v2",
{
"size": "https://joinpeertube.org/ns#size"
}
],
"content": "Recommended Video Attachment",
"attachment": [
{
"type": "Video",
"url": "http://pasture-one-actor/assets/cow_eating.mp4",
"name": "A beautiful cow eating",
"width": 256,
"height": 144,
"mediaType": "video/mp4",
"digestMultibase": "zQmSzK5qEe5tpjwGMhmjx9RvVoPkWhEmCwxP2s7wPMpKMoK",
"size": 54373,
"duration": "PT3S"
}
],
"cc": []
}
}
no result
Example 3¶
activity
{
"@context": [
"https://www.w3.org/ns/activitystreams",
{
"Hashtag": "as:Hashtag",
"sensitive": "as:sensitive"
}
],
"type": "Create",
"actor": "http://pasture-one-actor/actor",
"to": [
"http://mbin/u/oscar",
"https://www.w3.org/ns/activitystreams#Public"
],
"id": "http://pasture-one-actor/actor/XH4GnTTdJ1U",
"published": "2025-01-14T15:43:27Z",
"object": {
"type": "Note",
"attributedTo": "http://pasture-one-actor/actor",
"to": [
"https://www.w3.org/ns/activitystreams#Public",
"http://mbin/u/oscar"
],
"id": "http://pasture-one-actor/actor/Ng0jDlNZvps",
"published": "2025-01-14T15:43:27Z",
"@context": [
"https://www.w3.org/ns/activitystreams",
"https://www.w3.org/ns/credentials/v2",
{
"size": "https://joinpeertube.org/ns#size"
}
],
"content": "Recommended Audio Format",
"attachment": [
{
"type": "Audio",
"url": "http://pasture-one-actor/assets/cow_moo.mp3",
"name": "A cow mooing",
"mediaType": "audio/mpeg",
"digestMultibase": "zQmSXTyLCPqoiGoUUwKRMKgFdddaAUkvQNr29nhB6tahb9Z",
"size": 67709,
"duration": "PT2.1S"
}
],
"cc": []
}
}
mbin
{
"content": "<div class=\"content\">\n<p>Recommended Audio Format</p>\n</div>",
"html": "<blockquote class=\"section post subject\" data-action=\"notifications:Notification@window->subject#notification\" data-controller=\"post subject mentions\" id=\"post-19\">\n<header>\n<a class=\"user-inline\" data-action=\"mouseover->mentions#user_popup mouseout->mentions#user_popup_out\" data-mentions-username-param=\"@actor@pasture-one-actor\" href=\"/u/@actor@pasture-one-actor\" title=\"@actor@pasture-one-actor\">\n actor <i aria-description=\"This user is new (active for less than 30 days)\" class=\"fa-solid fa-leaf new-user-icon\" title=\"This user is new (active for less than 30 days)\"></i>\n</a>\n<span>, </span>\n<a class=\"link-muted\" href=\"/m/random/p/19/Recommended-Audio-Format\"><time class=\"timeago\" datetime=\"2025-01-14T15:43:27+00:00\" title=\"2025-01-14T15:43:27+00:00\">2 seconds ago \n</time></a>\n</header>\n<figure>\n<a data-action=\"mouseover->mentions#user_popup mouseout->mentions#user_popup_out\" data-mentions-username-param=\"actor@pasture-one-actor\" href=\"/u/@actor@pasture-one-actor\">\n<div class=\"no-avatar\"></div>\n</a>\n</figure>\n<div class=\"content\">\n<p>Recommended Audio Format</p>\n</div>\n<aside class=\"vote\">\n<form action=\"/pf/19?choice=0\" class=\"vote__up\" method=\"post\">\n<button aria-label=\"Favorite\" data-action=\"subject#vote\" title=\"Favorite\" type=\"submit\">\n<span data-subject-target=\"favCounter\">0</span> <span><i aria-hidden=\"true\" class=\"fa-solid fa-arrow-up\"></i></span>\n</button>\n</form>\n</aside>\n<footer>\n<menu>\n<li>\n<a class=\"stretched-link\" data-action=\"subject#getForm\" href=\"/m/random/p/19/Recommended-Audio-Format/reply\">Reply</a>\n</li>\n<li>\n<form action=\"/pb/19\" method=\"post\">\n<button class=\"boost-link stretched-link\" data-action=\"subject#favourite\" type=\"submit\">\n Boost <span class=\"hidden\" data-subject-target=\"upvoteCounter\">(0)</span>\n</button>\n</form>\n</li>\n<li class=\"dropdown\">\n<button class=\"stretched-link\" data-subject-target=\"more\">More</button>\n<ul class=\"dropdown__menu\" data-controller=\"clipboard\">\n<li>\n<a class=\"\" data-action=\"subject#getForm\" href=\"/pr/19\">\n Report\n </a>\n</li>\n<li>\n<a class=\"\" href=\"/m/random/p/19/Recommended-Audio-Format/votes?type=up\">\n Activity\n </a>\n</li>\n<li class=\"dropdown__separator\"></li>\n<li>\n<a href=\"http://pasture-one-actor/actor/Ng0jDlNZvps\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">\n Open original URL\n </a>\n</li>\n<li>\n<a data-action=\"clipboard#copy\" href=\"http://pasture-one-actor/actor/Ng0jDlNZvps\" rel=\"nofollow noopener noreferrer\">\n Copy original URL\n </a>\n</li>\n<li>\n<a data-action=\"clipboard#copy\" href=\"/m/random/p/19/Recommended-Audio-Format\">\n Copy Mbin URL\n </a>\n</li>\n</ul>\n</li>\n<li data-subject-target=\"loader\" style=\"display:none\">\n<div class=\"loader\" role=\"status\">\n<span class=\"visually-hidden\">Loading...</span>\n</div>\n</li>\n</menu>\n<div class=\"js-container\" data-subject-target=\"container\">\n</div>\n</footer>\n</blockquote>"
}
Example 4¶
activity
{
"@context": [
"https://www.w3.org/ns/activitystreams",
{
"Hashtag": "as:Hashtag",
"sensitive": "as:sensitive"
}
],
"type": "Create",
"actor": "http://pasture-one-actor/actor",
"to": [
"http://mbin/u/oscar",
"https://www.w3.org/ns/activitystreams#Public"
],
"id": "http://pasture-one-actor/actor/2aNsMWuoEbo",
"published": "2025-01-14T15:43:29Z",
"object": {
"type": "Note",
"attributedTo": "http://pasture-one-actor/actor",
"to": [
"https://www.w3.org/ns/activitystreams#Public",
"http://mbin/u/oscar"
],
"id": "http://pasture-one-actor/actor/pso4Xuq5vEo",
"published": "2025-01-14T15:43:29Z",
"@context": [
"https://www.w3.org/ns/activitystreams",
"https://www.w3.org/ns/credentials/v2",
{
"size": "https://joinpeertube.org/ns#size"
}
],
"content": "Multiple formats for video",
"attachment": [
{
"type": "Video",
"name": "A beautiful cow eating",
"url": [
{
"type": "Link",
"size": 54373,
"digest": "zQmSzK5qEe5tpjwGMhmjx9RvVoPkWhEmCwxP2s7wPMpKMoK",
"width": 256,
"height": 144,
"href": "http://pasture-one-actor/assets/cow_eating.mp4",
"mediaType": "video/mp4"
},
{
"type": "Link",
"size": 2271723,
"digest": "zQme2X4rgWuRdmAtGGMSEbdoeRQ2NAL2VptcdRGTYDZbSKG",
"width": 1920,
"height": 1080,
"href": "http://pasture-one-actor/assets/cow_eating_hd.mp4",
"mediaType": "video/mp4"
}
],
"duration": "PT3S"
}
],
"cc": []
}
}
no result