Relaxed image resizing (less params)

Contribute Feature

AI-generated summary

A discussion on the current image resizing syntax in Discourse, which requires a size argument in the form of |WxH[, perc%], is underway. Artoria2e5 proposes relaxing these constraints to allow for specifying only the width or height while maintaining the aspect ratio, or only the percentage. Several possible extensions are suggested, including:

  • Specifying only the width (|W) or height (|xH) to add the corresponding attribute to the generated img element
  • “Brainless scaling” (|MWxH) to set the maximum dimension without distorting the image
  • Percent-only sizing (![|50%]) to apply the percentage to the real dimensions of the image

However, codinghorror opposes this idea, citing the potential issues with infinite scroll caused by images with unpredictable dimensions. Security considerations are also raised, including the risk of vulnerabilities in image-handling libraries and exposing the server IP when fetching remote images.

1

The current resizing syntax accepts a size argument in the form of |WxH[, perc%], where the WxH part appears always madatory. However, folks (read: I) occasionally want to only specify either the width/height (maintaining ratio, of course) or the percentage only. Will it be a good idea to relax these constraints?

Here’s a list of possible extensions, meant to duplicate the functionalities of MediaWiki’s image sizes:

  • WxH extensions
    • |W (e.g. ![foo|220]) can interpreted as a request to only add a width attribute to the img element generated.
    • |xH (e.g. ![foo|x200]) can interpreted as a request to only add a height attribute to the img element generated.
    • brainless scalng: |MWxH (e.g. ![foo|M200x200]) sets the maximum dimension of the image to 200x200px, but does not distort it when scaling. (Inline style?)
      • usage note: on Wikipedia this is most useful for fitting images into a box of a given size, centered and padded automatically. There aren’t many fixed-size boxes in discourse, so it might be more useful making it an img with margin/padding added to reach the target size. Sounds a bit too complicated though.
    • Most modern browsers does a proportional scaling with only one dimension given. Something along the lines of img { width: auto; height: auto } may be required for older stuff.
    • Only specifying one dimension obviously can cause abrupt layout changes as the image gets loaded. To avoid it, maybe auto-rewrite the expression into the full WxH form on save?
  • percent-only sizing (![|50%])
    • This is the same as [|WxH,perc%], where WxH are the real dimensions of the image.
    • Applying percentages to img’s dimension attributes is awful, so this must get rewritten into the full WxH form.

Security considerations

  • Expanding the expression into a usual WxH form involves opening an image and reading its dimensions. If there’re some vulnerbilities in your image-handling libraries, you may be doomed.
  • Having the server fetch a remote image is a good way to expose the server IP, which might be hidden behind some sort of an anti-DDoS CDN. Maybe only rewrite the sizes on local imgs?
    • Discourse already fetches remote images to generate a metadata section.
2

No, because images that change unpredictably in dimension are anathema to infinite scroll.

3 Likes