Zola by default allows basic images in Markdown articles:
In practice, this creates issues, e.g. when you're including a high-resolution image, such as a screenshot done on a Mac with Retina display. Look at the below screenshot for example:
Even when viewing on a retina/high-resolution display, the screenshot will look blown up.
Simply scaling down the image would "solve" that, but at the cost of resolution.
AFAIU, the proper solution is to use srcset of HTML5 and provide 2 assets - the scaled-down version of the image in the src tag, and then the original one in the srcset:
<img src="image_scaled_down.jpg" srcset="image_original.jpg 2x"/>
With Zola, you can use the following shortcode, which uses Zola's resize_image function to scale down the image:
{% set mdata = get_image_metadata(path=path) %}
{% set w = (mdata.width / 2) | int %}
{% set h = (mdata.height / 2) | int %}
{% set image = resize_image(path=path, width=w, height=h, op="fit_width") %}
<img src="{{ image.url }}" srcset="/{{path}} 2x"/>
To use this shortcode, copy it into the file templates/shortcodes/hires_image.html and then invoke it like the following:
{{ hires_image(path="path_relative_to/content_folder/img.jpg") }}
Like this, the above screenshot looks like:
I was a bit surprized that this feature was not built-in.