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 srcset.
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 height to auto. This will allow the browser to calculate the appropriate height for your image based on the width.
img {
max-width: 100%;
height: auto;
}
You can prevent the editor adding the width and height attributes with the image_size_attributes option. This option can be applied to:
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.