To create a new image on a page click + (W) in the widget bar and select Picture. You can upload an image file, paste a direct URL, or add images from Flickr or Unsplash. You can also drag and drop an image file on the workspace to create a Picture widget.
Note: we support JPG, GIF, PNG, SVG, and BMP files up to 6 MB.
We highly recommend users to optimize their images before uploading them so as to maximize the project’s loading time. Scroll to the end of this article to find out more about adapting your images for Retina screens.
Basic editing
Click on the Picture to access widget controls, which will load on the right side. You can add a Border, set Radius, change Opacity and use Crop control, as well as standard Rotation for simple editing tasks.
The Radius option works in two modes:
- Automatic—all the corners of an image are rounded simultaneously
- Independent—set a different radius for each corner of your image
Radiuses do not synchronize between layouts. That means you can select different settings for the same widget in the desktop, tablet, and mobile versions of your project.
After your image is uploaded, it scales up to the width and height of a widget container. To enlarge the image, simply drag the sides of the widget. If you need to adjust your widget to the size of an original image, go to the Crop attribute: move the slider to check the percentage size of your current widget compared to the original image.
To stretch your picture proportionally with the screen, select the Full-Width or Full-height position under Position in your 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, open project settings and go to the Viewer tab, then enable Progressive images. Blurred placeholders will now be shown instead of actual images while your project is loading.
Alt attributes
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.
The alt text describes what is shown in the picture, increasing the accessibility of your project for visitors who are unable to see images for a variety of reasons. It can compensate for a slow internet connection and support visitors with visual impairment who need screen-reading software. It’s also a good practice for SEO: search crawlers index your alt tags, giving you an opportunity to add target keywords to the images too.
Note: This feature is available on Creator, Professional, and Custom plans.
How to use alt attributes most effectively
- Be precise. Remember that alt texts exist primarily for visitors who can’t see the actual images: your description should accurately reflect what is shown in the picture.
- Keep it short. As long as HTML specifications don’t limit the length of alt tags, it’s better to restrict yourself to 125 characters: a lot of popular screen readers divide text by exactly this amount. At Readymag, alt tags are limited to 100 characters.
- Avoid words like ‘photo’, ‘image’, etc. Both screen readers and search engine crawlers recognize an image by an alt attribute referring to it. There’s no need to add your own designation.
- Don’t try to stuff with keywords. Alt attributes are extremely helpful for SEO, but we always recommend keeping a pleasant user experience the main priority.
Lightbox
If Lightbox is enabled, an image will be expanded to full-screen when clicked on. You can set a color for the lightbox background and adjust its transparency. If you enable ‘Add to gallery’, visitors will be able to switch between the images on your page directly in the Lightbox mode.
You can enable Lightbox for multiple widgets simultaneously: to do so, select these widgets (Shift+click) and turn on Lightbox. The 'Add to Gallery' button can be also activated for several widgets at once.
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 on to the Picture icon in the Picture widget control.
3. Drag and drop a new image over the old one.
Image optimization
When uploading 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 similar screen with high PPI density views a larger image within the same Picture widget.