Hugo uses a CommonMark-spec Markdown engine called Goldmark. The CommonMark spec has no way to specify attribute lists for inline or block elements - and to preserve those attributes (width and height), we fall back to HTML when saving the image elements in the Markdown file.
CloudCannon automatically adds size attributes (width, height, sizes) to the HTML for images uploaded in the Content Editor and Editable Regions.
This allows browsers to size
<img> elements before CSS and images are loaded, preventing "pop-in." Otherwise, the page can shift around in front of the viewer as images are loaded, and elements are resized.
These attributes are also required for
srcset attributes to work properly. Browsers assume by default that the width of an image is 100vw. If the image has a
srcset but no explicit size attributes, it will appear full width regardless of the
In cases where these size attributes are not right for your layout, some simple CSS can ensure that your images are sized correctly on the page. Define a width for your images, then set
auto. This will allow the browser to calculate the appropriate height for your image based on the width.
You can prevent the editor adding the
height attributes with the
image_size_attributes option. This option can be applied to: