Picture

To create a new image on a page, click + (W) in the left dock and select Picture. You can upload an image file, paste a direct URL, or add an image from Unsplash. You can also drag and drop an image file on the workspace to create a Picture widget.

To improve loading times:

• Resize images to the dimensions you need.
• Compress them to reduce file size.
• Use modern formats such as WebP when possible.
• Remove unnecessary image data, such as metadata.

Optimized images load faster while maintaining good visual quality.

Basic editing

Click the Picture widget to access its controls, which appear on the right side. You can add a Border, set Radius, change Opacity, and use Crop and Rotation controls for simple editing.

For an image border, you can set its thickness in pixels (minimum 1px), choose a color, and adjust its opacity. You can also save the border color as a swatch for future use.

The Radius option works in two modes:

• Automatic—rounds all the corners of the image simultaneously.
• Independent—lets you set a different radius for each corner.

In the Rotate menu, you can rotate the image by a specific number of degrees. You can also flip the image vertically or horizontally.

After you upload an image, it scales to fit the width and height of the widget container. To enlarge the image, simply drag the sides of the widget. If you need to adjust the widget to the size of the original image, go to the Crop attribute and move the slider to see what percentage of the original image size the current widget represents.

You can check the exact size of a widget in pixels using the X shortcut. Select the Picture widget and press X. The widget's dimensions will appear, and you can adjust its size by dragging the blue frame around it.

To stretch your picture proportionally to the screen, select Full-width or Full-height under Position in the widget controls.

Progressive images

If your project has a lot of content to load, you can streamline it by using lower-quality placeholders for images. To activate this option, enter Preview Mode and open the Viewer settings panel, then enable Progressive Images. Blurred placeholders will now be shown instead of actual images while your project is loading.

Alt tags for pictures

To add an alt attribute to your image, click the Semantics attribute in your widget settings and enter text in the pop-up window. The attribute will then appear in the source code of your project. Learn more about alt tags here. 

Image links

You can make any image clickable. In the right-hand menu, click Link and choose the type of link you want to add. Learn more about links here. 

Lightbox

If LigIf Lightbox is enabled, an image will expand to full screen when clicked. Learn more about this feature here. 

Animation and effects

Images can move, fade, rotate, or change size when they load, enter the screen, are hovered over, or clicked.

To get started quickly, choose one of the pre-configured interactions in Presets. 

Images in Mobile view 

When you add a mobile or tablet view, the Picture widget adjusts automatically to fit the new screen size. You can then move the image or place it differently without affecting its position in the desktop view.

Radius, opacity, and border settings don’t synchronize between layouts. This means you can select different values for the same widget in the desktop, tablet, and mobile versions of your project. Learn more about widgets in mobile and tablet layouts. 

Image replacement

There are three ways to replace an image:

1. Click on the Picture icon in the Picture widget control and choose a file.

2. Drag and drop a new image directly onto the Picture icon in the Picture widget control.

3. Drag and drop a new image over the old one.

Retina screen optimization

When you upload an image, Editor automatically compresses it to the actual size of the widget and preserves a higher-resolution version for Retina-like displays. This way, the published project loads faster for most visitors, while anyone with a Retina display or a similar high-PPI screen sees a larger image within the same Picture widget.

FAQs

Why do my images load slowly?

Large or complex images can slow down your project. First, check the image dimensions and file size. If the image is larger than needed, resize and optimize it before uploading.

You can also:

• Remove unnecessary elements from SVG files and optimize them with SVGOMG or SVG Minify.
• Export GIFs at the same dimensions as the Picture widget to avoid additional scaling.
• Replace slow GIFs with animated WebP or APNG files.

After optimizing an image, upload the new version and republish your project.

Does Readymag support SVG files?

Yes. Readymag supports SVG files in both the Picture and Slideshow widgets. However, some SVGs may not display or behave as expected because of the way they were created or exported.

Why did my SVG change color or become partially invisible?

This can happen when an SVG’s styles are changed or overwritten during export. Exporting the file from Figma or using Inline Styles in Adobe Illustrator may help prevent this issue. These are known options, but other SVG editors may also work.

For more information, see this CSS-Tricks article.

Why don’t some parts of my SVG respond to interactions?

SVGs use pointer events to determine which parts can respond to actions, such as opening a link. If an interactive part of your SVG doesn’t respond, check how pointer events are configured in the file.

For more information, see the MDN documentation on pointer-events.

Why are the corners of this GIF not rounded?

Some GIFs may not display rounded corners correctly because of how they were built or scaled. Try uploading a version that matches the widget’s exact dimensions.

You can also remove the current GIF and upload it again. Replacing the image often resolves the issue.

How can I prepare a GIF before uploading it?

Use an image optimization tool to reduce the GIF’s file size and export it at the required dimensions. Ezgif is one tool you can use.