Articles on: General questions (f.a.q.)

How do I optimise my images for retina displays?

To optimise an image for high-density (Retina) screens, upload it at twice the width and height it will appear at on the canvas, then set the image's Image quality to Retina 2× in the editor. A high-density screen shows more than one physical pixel for every display pixel, so an image needs about twice as many pixels as its displayed size to look sharp. These screens are standard on most phones and tablets and on many laptops.


Preparing an image for Retina screens


The Retina 2× image quality setting displays an Image element at half the image's pixel width and height, so every displayed pixel has two image pixels behind it. To prepare and place a Retina image:


  1. Decide how large the image will appear on the canvas, in pixels (for example 800 × 600).
  2. Export the image at twice that width and height (in this example, 1600 × 1200).
  3. Upload the image and add it to the canvas.
  4. Right-click the image on the canvas.
  5. Go to Image quality and choose Retina 2×.


Each option in the Image quality menu shows the element size it produces in brackets, for example Retina 2× (800 × 600). A check mark shows the active option. Original displays the image at its full pixel size.


The Image quality option is greyed out when the image is set to fill the full width, the full height or the full screen.


Setting Retina quality on an Image button


The Image button element has its own quality switch. Retina 2× displays the button's image at half its pixel width and height, which keeps it sharp on high-density (Retina) screens. To set it:


  1. Select the Image button element on the canvas.
  2. In the right panel, go to the Images block.
  3. Click the button below the Hover image field. It shows the current setting, Original or Retina 2×, and each click switches to the other setting.


This button is disabled until you choose an image in the Image field.


Image size limits


Maglr applies these limits to image uploads:


  • Each image file can be up to 10 MB. When you add an image in the editor (by dragging it onto the canvas or onto the Media tab, or by pasting it), this applies to the file after compression.
  • Landscape JPG, PNG and WebP images larger than 5760 × 3240 pixels are scaled down to fit within that size.
  • SVG and GIF files are not resized or compressed.


Because landscape uploads are capped at 5760 × 3240 pixels, the largest size a landscape image can appear at with Retina 2× image quality is 2880 × 1620 pixels on the canvas.


When you add an image in the editor by dragging it onto the canvas or onto the Media tab in the right panel, or by pasting it, JPG, PNG and WebP files are also compressed:


  • JPG and WebP images are re-saved at 80% quality.
  • PNG images without transparency are converted to JPG.
  • PNG images with transparency stay PNG, unless the file is larger than 10 MB. In that case it is converted to JPG, and the editor shows a message that transparency has been removed.


Images you upload in the File manager (the window that opens when you choose an image, for example when you click Choose an image in an Image element's settings) are not compressed. This applies to both the Upload an image area and the Upload button on the My images tab.


Choosing an image format


Maglr supports JPG/JPEG, PNG, WebP, SVG and GIF images. Each format suits a different kind of image:


  • JPG/JPEG: best for photographs and for images used as a background.
  • PNG: best for images with a transparent background, for example a logo or a cut-out product photo.
  • WebP: suitable for both photographs and images with transparency, and usually produces smaller files than JPG or PNG.
  • SVG: best for vector images, such as logos and icons. Vector images are made up of shapes and stay sharp at any size, so an SVG does not need a Retina version.
  • GIF: best for short animations made of a sequence of image frames.


The Retina 2× image quality setting is useful for pixel-based images: JPG, PNG, WebP and GIF.


Frequently asked questions


Do Retina images make my page load slower?


Yes, Retina images make a page heavier to load. Maglr serves the same image file to every visitor, whatever their screen, and the browser scales it down on standard screens. An image exported at twice its displayed size is a larger file, so every visitor downloads more data. Use Retina 2× where sharpness matters most, such as images that contain text, logos and detailed photos.


Why is the Image quality option greyed out?


The Image quality option in the editor's right-click menu is greyed out when the image is set to fill the full width, the full height or the full screen. To use Image quality, select the image, and in the right panel's size options choose the option with the tooltip "Manually adjust the element frame." instead of the full-width, full-height or fullscreen option.


Why did my PNG turn into a JPG?


When you add a PNG image in the editor by dragging it onto the canvas or onto the Media tab in the right panel, or by pasting it, it is converted to JPG if it has no transparency. PNG images with transparency stay PNG, unless the file is larger than 10 MB. If a transparent PNG is converted, the editor shows a message that its transparency has been removed. PNG images you upload in the File manager (the window that opens when you choose an image) stay PNG.


Do SVG images need a Retina version?


No. SVG images are vector images made up of shapes, so they stay sharp at any size on every screen. You do not need to export an SVG at twice its displayed size.


What is the largest image I can use at Retina 2×?


The largest size a landscape image can appear at with Retina 2× image quality is 2880 × 1620 pixels on the canvas, because landscape JPG, PNG and WebP uploads larger than 5760 × 3240 pixels are scaled down to fit within that size. Each image file can be up to 10 MB.


How do I check whether an image is set to Retina 2×?


In the editor, right-click the image on the canvas and go to Image quality. A check mark next to Retina 2× means the image is displayed at Retina quality. If Current with the element's size is checked instead, the element's size matches neither Original nor Retina 2×, for example because the element was resized.

Updated on: 15/10/2026