spec: Image size

[akabekobeko]

Goals

Allow widht and height attributes of <img> to be specified as Markdown.

• May want to specify the size on demand for each image that appears in the sentence, such as novel illustrations
• By explicitly specifying the size, it becomes a countermeasure against the layout shift problem in the image table on the web browser

There is also a way to deal with #9 instead of <img>. In that case it would be ![](sample.jpg){width=100px height=100px}.

Markdown:

1. width/height

![alt](sample.jpg "title" width="100px" height="100px")

• Specify attributes individually
• Uses quotes to support CSS definable sizes

2. size

![alt](sample.jpg "title" size="100px","100px")

• width/height specified by one
• In order of width,height
• Uses quotes to support CSS definable sizes
• If it is a single specification, use width
• Parse may be tedious due to nested structure

HTML

<img src="sample.jpg" alt="alt" title="title" width="100px" height="100px">

Prior Art

GitHub Flavored Markdown Spec (6.7 Images) is not supported. There may be other Markdown dialects.

Discussion

Refer to the following for web browser related support regarding layout shift (problem).

• Compute img/video aspect ratio from width and height HTML attributes - Chrome Platform Status
• Mapping the width and height attributes of media container elements to their aspect-ratio - Web メディア技術 | MDN
• Release Notes - Safari Technology Preview - Safari - Apple Developer

  • Added support for using valid non-zero width and height attributes to become the default aspect ratio of <img>

[akabekobeko]

Additional:

• Units for CSS size may not need to be escaped with double quotes as there are no spaces or commas
  • ![alt](sample.jpg "title" width="100px" height="100px") to ![alt](sample.jpg "title" width=100px height=100px)
  • ![alt](sample.jpg "title" size="100px","100px") to ![alt](sample.jpg "title" size=100px,100px)
• Title notation follows GFM
  • It is better to give attributes and property names so that you can recognize that they are not in GFM
• It is arguable whether width/height or size is better
  • It is preferable to use either one because it will not cause confusion.
• It is also effective to use spec: Attributes on headings and other elements #9 without using this notation
  • This is also one of the purposes to discuss additional policy of attribute value.

[spring-raining]

I have two concerns about this suggestion.

• Setting width or height attribute is not the only way to define the size of the figures. CSS also defines apparent size of images (like this), then obviously it can achieve the separation of semantics and styles.
• size argument may occur confusion with img's sizes attribute.

However, a versatile feature that setting HTML attributes seems to be convenient! I'd like to discuss further proper specification.

[uetchy]

With #9, you can assign arbitrary attributes.

vfm

![](image.png){width=100px height=100px}

html

<img src="image.png" width="100px" height="100px">

As this spec seems too similar to custom attributes spec in terms of its goal, it would be better to be resolved as duplicated.
Any objection?

[akabekobeko]

Shall we take a vote?

1. Add image formats like this suggestion
2. Support with custom attribute with spec: Attributes on headings and other elements #9

1 = 👍
2 = 👎

While making my own proposal, I've felt enough with #9.

[akabekobeko]

I think #9 is enough for the members who are currently participating in the discussion, including myself. Perhaps more votes will be added in the future, too.

This issue is dismissed as we have provided a way to specify the size of the <img> on demand and have confirmed the custom attribute policy.

In the future, if you have any requests or suggestions regarding attributes, I thought it would be good to present this issue with #9.