[docutils:feature-requests] #102 Image height/width attributes

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.

1. 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/).

2. 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 as `style="height: 12px;"`.



---

**[feature-requests:#102] Image height/width attributes**

**Status:** open
**Group:** None
**Created:** Wed Dec 20, 2023 02:35 PM UTC by toastal
**Last Updated:** Wed Jan 03, 2024 12:00 PM UTC
**Owner:** nobody


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.

1. 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
2. A good CSP (Content Security Policy) should never include `unsafe-inline` as 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.


---

Sent from sourceforge.net because [email protected] is subscribed to https://sourceforge.net/p/docutils/feature-requests/

To unsubscribe from further messages, a project admin can change settings at https://sourceforge.net/p/docutils/admin/feature-requests/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.