Articles on: The editor

Image

The Image element places a picture on your page inside a frame, the box you move and resize on the canvas. You choose how the picture fits that frame.



Adding an image


You can add an image to the canvas in five ways.


From your computer: drag an image file onto the canvas. The editor uploads it and places it as an Image element.


With the Image element:


  1. Click Add in the left bar.
  2. Under Elements, drag Image onto the canvas.
  3. In the right panel, under Image, click Choose an image.
  4. Select an image from the media library, or upload a new one.


From the Media tab: open the Media tab in the right panel and drag an image onto the canvas. To upload new images there, drag files from your computer into the Media tab.


From the clipboard: copy a screenshot or an image, then paste it onto the canvas with Ctrl+V (Windows) or Cmd+V (Mac). The editor uploads it and places it as an Image element.


From the Assets section of the Add panel: click Add in the left bar, then under Assets choose My library (your media library) or Search online (stock photos and videos), and drag an image onto the canvas.


The media library holds the images and videos you have uploaded, so you can reuse an image on other pages and in other publications without uploading it again.


Choosing how an image fits its frame


To choose how an image fits its frame:


  1. Select the image on the canvas.
  2. In the right panel, open the Element tab and then the Settings tab (wrench icon).
  3. In the Image block, choose Proportional, Fill, Fit, Stretch or Original.
  4. For Fill, Fit or Original, click or drag in the small preview to set the focal point: the part of the image that stays in view, or where the image sits in the frame.


The five fit options work like this:


  • Proportional: the frame takes on the image's own proportions, so the whole image shows without cropping or empty space. When you resize the frame, it keeps those proportions. This is the default for a new image.
  • Fill: the image covers the whole frame in its own proportions. Parts of the image that don't fit are cut off. Use the focal point to choose which part stays visible.
  • Fit: the whole image fits inside the frame in its own proportions. If the frame's proportions differ from the image's, empty space remains, and the frame's background shows through. Use the focal point to choose where the image sits.
  • Stretch: the image is stretched to the frame's width and height. If the frame's proportions differ from the image's, the image is distorted.
  • Original: the image keeps its original pixel size, and the frame shows the part of it that fits. Use the focal point to position the image, and the Repeat setting (No repeat, Horizontally, Vertically or Both) to tile it across the frame.


Below the fit options, the Image block also has a Crop button for cropping the image.


Using an image as a full-screen background


An image becomes a full-screen background when its frame covers the whole screen and the image fills that frame. To set this up:


  1. Select the image on the canvas. It must not be inside a group and must not be rotated.
  2. In the right panel, open the Element tab and then the Settings tab (wrench icon).
  3. Under Auto size, click the full-screen option. Its hover text reads "Place the element frame across 100% of the screen width and -height."
  4. In the Image block, choose Fill, so the image covers the screen without distortion or empty space.


The Auto size options also include full width and full height. The full-width, full-height and full-screen options are unavailable while the image is inside a group or rotated. See Sizing elements for all Auto size options.


Supported file types


You can upload JPG (JPEG), PNG, GIF, SVG and WebP images. For simple vector graphics, such as logos and icons, use SVG: SVG files are uploaded unchanged and stay sharp at any size.


What happens to an image when you upload it


When you drag an image onto the canvas, paste it, or upload it in the Media tab, the editor prepares it before uploading:


  • JPG, PNG and WebP images are compressed and scaled down to fit within 5760 × 3240 pixels (3240 × 5760 for a portrait image).
  • A PNG without transparency is saved as a JPG.
  • A PNG with transparency stays a PNG, unless it is larger than 10 MB. In that case it is saved as a JPG, loses its transparency, and the editor shows the message "Transparency has been removed from the following image: [file name]. Manually export the image to keep its transparency."
  • SVG and GIF files are uploaded unchanged, so GIF animations are kept. Because they aren't compressed, an SVG or GIF file can be at most 10 MB.


Images you upload through Choose an image are handled by the media library instead. The image file can be at most 10 MB. It keeps its file type, so a transparent PNG stays transparent, and JPG, PNG and WebP images are scaled down to fit within 5760 pixels wide and 3240 pixels high, whatever their orientation.


Frequently asked questions


Why did my transparent PNG get a background after uploading?


When you drag a PNG image with transparency that is larger than 10 MB onto the canvas, paste it, or upload it in the Media tab, it is saved as a JPG, and JPG doesn't support transparency. The editor shows a message naming the image. To keep the transparency, export the image yourself at a smaller file size, under 10 MB, and upload it again.


Is there a maximum image size?


It depends on how you upload it. When you drag a JPG, PNG or WebP image onto the canvas, paste it, or upload it in the Media tab, it is scaled down to fit within 5760 × 3240 pixels (3240 × 5760 for a portrait image). When you upload it through Choose an image, the image file can be at most 10 MB, and it is scaled down to fit within 5760 pixels wide and 3240 pixels high, whatever its orientation. Smaller images keep their size. SVG and GIF files are uploaded unchanged, so with any upload method an SVG or GIF file can be at most 10 MB.


Can I use an image from another publication?


Yes. The media library holds the images and videos you have uploaded across your publications, so you can place an image you uploaded for one publication in another without uploading it again.


Why can't I select full screen for my image?


The full-width, full-height and full-screen Auto size options are unavailable when the Image element is inside a group or rotated. Move the image out of the group, or set its rotation back to 0, to use these options.


What is the difference between Proportional and Fit?


With Proportional, the frame takes on the image's proportions, so the whole image shows with no empty space. With Fit, the frame keeps the size you give it, and the whole image fits inside it in its own proportions; if the shapes differ, empty space remains around the image.

Updated on: 20/10/2026