#102 Image height/width attributes
When setting :width: or :height: on an image, the output is a <image style="width: $W; height: $H">. This isn’t the expected out put as there are & have been width & height attributes for the <img> tag for a long time. One might assume this is the same affect, but there are some important problems & why I think this is a bug for incorrect implementation.
- Tools like Lighthouse, et al. show users to have width/height as a optimization so the browser can calculate & the image size properly without having to do a layout shift which is great
- A good CSP (Content Security Policy) should never include
unsafe-inlineas this can be an attack surface but the output of:width:&:height:do just this.
The way to solve this to keep out unneeded inline style practice for good CSP but still have the width/height is to just use <img width="$W" height="$H"> (at least when units are not specified).
What I may not be accounting for: units. 12px is not the same as 12rem or 12ex or 12vw. However, what I had input in my image was just plain ol’ integers got back something I didn’t expect: a) something using px (I‘m exclusively using relative unit like em, rem, etc.) and b) not using the attributes since the number I gave had no units.
Ticket moved from /p/docutils/bugs/478/
Thank you for the report.
The reason for using the "style" attribute to set the image size is the need to accomodate relative units. Using it for absolute units¹ as well is done to make the code simpler and the behaviour more predictable.
AFAIK, specifying image size via a CSS style also prevents layout shifts so this may be a "false positive" by Lighthouse (but see also https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/).
Safeguarding via "Content Security Policy" is less important for the main use case of Doctuils-generated HTML documents -- static HTML pages.
It may become important if the Docutils output is used as building block in dynamic pages that allow "user feedback".
We need to find a consensus, whether this merits a complication of the code with conditional use of "style" vs. "width"/"height" or could be cared for using of the new "CSP: style-src-attr" directive.
¹Absolute units include "plain ol integers". E.g.,
height="12"is the same height asstyle="height: 12px;".I think attributes are the way to go since they’re mapped to aspect-ratio.
Consider some theme adding
img { max-width: 100% }: With the size set via CSS, this gives us a squished image. With the size set via attributes, it works perfectly. Demo: https://codepen.io/flying-sheep/pen/qBwNbObSpecifying the aspect-ratio via unitless "width" and "hight" is by now a valid use case. Users get a way to prevent layout shifts (e.g. specifying
:scale: 100) while we retain the possibilty to overwrite document wide image dimension rules in a CSS stylesheet for a particular image in the "image" directive.As this is a backwards-incompatible change with the potential to break existing documents, it must be announced. See [r9617].
Related
Commit: [r9617]
Fixed in [r9928]. Thank you for the report and discussion.
Related
Commit: [r9928]