Why does the image extension not resize external images?

[FlTr]

The image plugin allows to apply custom sizes for each picture. But this works for self hosted images only. I want to do something like:

[image https://example.com/link/to/a/picture.jpg Example - 50%]

This doesn't work as expected. Width and height are set to zero and therefore ignored during html generation. Link to code line in plugin.

Of course, creating a thumbnail for external images does not make sense. But is this intended behaviour?

[markseuffert]

In short don't do it this way. Resizing external images is not a supported feature.

The reason takes a bit longer to explain. The image extension was made to improve image handling in Markdown. A typical uses case is creating downscaled image thumbnails on your web server for faster page loading time. Another use case is creating cropped image thumbnails on your web server for different aspect ratios, e.g. landscape, portrait, square. For this to work in practice, all images should be stored in your media/images folder.

On the technical side, the HTML img element expects width and height in pixel, no other unit is supported and they are not intended to be used to stretch the image. In theory you could use CSS for image transformation. Lots of possibilities for the adventurous web developer, but you're probably getting better results by using images with specific dimensions. Some online image services let you specify image dimensions in the URL. Here's an example:

<img src="https://images.unsplash.com/photo-1627156863760-f49b81d8ab77?fm=jpg&w=512">
<img src="https://images.unsplash.com/photo-1627156863760-f49b81d8ab77?fm=jpg&w=128">
<img src="https://images.unsplash.com/photo-1627156863760-f49b81d8ab77?fm=jpg&w=64">

[FlTr]

Thanks for the detailed answer. Then I'll have to find a better way for my usecase.