Built with Readz
LEARN MORE

Images: Styling & Properties

Images are an essential part of your content. This article will explain some of the fundamental concepts for images, and will show you how to scale and position your images and manage its properties (incl size).
Supported media formats (next to streaming video) for Readz include;
- jpg
-png
- svg
- gif
- WebP
- MP4
Image Elements - Styling Options
When you open the Styling panel from the panel to the left of the canvas, the panel below will open up, offering you the following options:
  • set the Display or scaling properties
  • set the Position of the image
  • select more image filters
  • set opacity
  • set padding
  • set borders
  • ...
You can find the styling tab in the panel on the left of the canvas. Select an image, click the Styling tab and the Image Styling panel will open.
Display options
For image elements, you have three display (or scaling) options available to define how the image will interact with its container, which is the actual media element. In all three options, the image's aspect ratio is maintained.
  • fill: the image will stretch to completely fill its container. Some parts of the image can be hidden.
  • fit width: the image will stretch to fit the width of its container, and the container will stretch to show the image completely.
  • contain: the image will stretch up to the available height or width of the container, whichever is smallest. Some negative space can occur in the container.
Position Options
With the position options, you can move the image around within its container (the image element). You can either move the blue dot around or enter the desired position values directly.
The example below shows how position affects your design:
For images with a 'Fill' display, this will affect what part of the image is visible.
For images with a 'Contain' display, it will determine how the image fits into the container.
Images that have a 'Fit width' display are completely shown, so the position option will have no effect.
The example for 'Contain' below shows how the image moves to the right of its container when you change the position accordingly, creating some white space on the left.
More Options: Filters
You can add filters to your images. These are available under the 'More Image Options'. Clicking the arrow will open up the panel and show you these options:
Here are some examples for these filters:
You can add multiple filters on a single image, you can save these onto a style sheet, and as shown below, you can add these filters to your hover effects:
Image Properties
When you open the Properties panel from the panel to the left of the canvas, the panel below will open up, offering you the following options:
  • replace the image
  • change the image file name
  • set the image tag
  • set the size and resolution
  • additional options like auto-optimize and 'zoom upon click'
Replace image
To replace an image from with the Image Properties panel, click 'Replace Image' in the image thumbnail.

The media bank will open in the right panel. Now select the desired image by clicking on the image thumbnail in the media bank.
Image file name and Alt tag
To edit the image file name and/or the image Alt tag, hover over the text field you want to change. A pencil icon will appear. Click to edit the text.
Image size and resolution
The image file size is a crucial factor for fast-loading pages. Large images can impact reader satisfaction and also your search engine rankings.

In this part of the panel you can see the current size of your image and its resolution. To lower the size of your image, you can lower its resolution. The aspect ratio will be maintained, so lowering either width or height will do.
When you reduce the image resolution, a message will appear indicating that the image resolution change will take place when you save the project..
Auto-optimize
The Readz platform will automatically optimize your images for you to help optimize loading speed. If you do not want this to happen for a specific image, you can turn the auto-optimize setting off here. It is recommended to keep the setting on for practically all situations. An example would be a jewelry shop with an image that has to offer an extremely high resolution for when potential buyers want to zoom in. This would then be combined with 'Zoom upon click' (see below).
Zoom upon click
'Zoom upon click' will allow your users to see an enlarged version of your image when they click the image.

For mobile, the user will need to pinch the image with two fingers to zoom in. For desktop, readers will need to click on the image. Labeling the image with a small text or icon to signify that one can zoom in the image, for example, “Pinch to zoom” is recommended.
If you only want to allow zooming on either desktop or mobile, you need to use two separate image elements, one for desktop and one for mobile in the Media Library In that case one of the images will have the zoom checked and the other unchecked. The mobile image on desktop can be hidden by shutting the eye down in the Index panel and the same for the desktop image on mobile.
Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
© 2022 Readz All Rights Reserved