Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Photo and Video sizes #36

Open
grantcodes opened this issue Dec 6, 2018 · 2 comments
Open

Photo and Video sizes #36

grantcodes opened this issue Dec 6, 2018 · 2 comments

Comments

@grantcodes
Copy link

There is a well documented issue that img and video tags without a preset width and height cause pages to repaint when the media is loaded.

In order to get a truly smooth web reader experience I think microsub servers will need to return height and width for at least the media properties (photo, video & featured).

Outside of that sizes for images and videos inside html content would be great too, but I imagine that would be much harder to accomplish

@aaronpk
Copy link
Member

aaronpk commented Dec 6, 2018

That's a great point, and it seems like a reasonable thing for the server to do. It's also possible that the server might be already resizing/caching these images itself, so doesn't sound like a huge stretch. Of course the client should also be prepared to handle the case when the dimensions aren't in the response still, but this sounds like a good way for a server to be able to help out the client.

@grantcodes
Copy link
Author

Yes absolutely.

As for implementation, I think for content that is already html just injecting width and height attributes onto images and videos is probably fine.

For the photo, video and featured properties I am not sure what the best option is. I don't think there is any microformats representation for width and height yet. In my micropub endpoint library I use something similar to how references work for like-of, repost-of. Something along these lines:

'media-refs': {
  'https://photo.com/photo.jpg': {
    width: 400,
    height: 200,
  },
  'https://photo.com/photo2.jpg': {
    width: 900,
    height: 300,
  },
}

It could also be expanded in the future to provide things like resized images and srcsets etc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants