When an image is made editable in a Blocks Edit template, you can choose to upload a new image in its place either from your local computer, or if setup, from a source, like an FTP or CDN.
You also have the option to add a link on the image, and set its alt text.
Image sizing
By default, an image’s size is determined from how its placeholder image is setup in the template. So when you go to upload a new image in its place, the image’s original dimensions and size properties are used.
You can upload any image that is the same size or bigger than the placeholder image. When uploading, you are given the option to crop the image based on the original image’s dimensions. If the image is larger, it gets scaled down to the placeholder image’s size. If the image is lower in resolution than the placeholder, you're prompted to upload one that is a higher resolution.
This applies to JPG, PNG, WebP, and AVIF files and also compresses the image for optimal load time. GIF and SVG files do not get resized or cropped. And PNG files have the option to skip compression for cases where the PNG has already been sized and compressed as needed.
If you set an auto height on your image, the cropping and scaling will only constrain to the width and allow for the height to adjust. And vice versa with auto width.
Resizable images
If you want to allow a template image placeholder to resize to the image that’s uploaded, you can use the resizable option. This will skip the cropping modal and the image gets resized to both the width and height of the uploaded image.
It will however still take into account pixel density of the original template image. For example, if the template image is 200 pixels wide, but the HTML output is set to 100 pixels, it will use that 2:1 ratio for deciding on the size that’s output for the uploaded image.
You can use min-width and max-width, and min-height and max-height style properties to set size limits for the output. So using the 2:1 ratio pixel density example above, if max-width is set to 600 pixels and your new image is 2000 pixels wide, it gets scaled down to 1200 pixels.
For all the details on the editable image properties you can set, take a look at the docs.
