When users access the Learner Portal on a mobile or desktop device, Admins may ensure an image from the Tovuti WYSIWYG Editor displays correctly.
From the Admin Portal, navigate to the WYSIWYG Editor > click the Image icon
Upload two versions of the image: one with dimensions for desktop and one with dimensions for mobile. Test different dimensions to determine what works best for the image.
Select the images and copy the provided URLs for each.
Go to the Responsive tab. Click the “+” button (1) to add a responsive image option.
In the first option, paste the URL (2) for the desktop image. In the second option, paste the URL for the mobile image.
Input 1 for the x-value (3) of the desktop image and a value over 1 (1.1) for the x-value of the mobile image (4).
Desktops use physical pixels to render images; therefore, inputting a ratio of 1 renders the image as defined by the dimensions. Mobile devices use virtual pixels to render webpages designed for desktops. For this reason, mobile devices always have a Pixel Ratio (virtual to physical pixels) of greater than 1.
Inputting 1.1 for the x-value of the mobile image fulfills the requirements for creating the responsive image. Test different ratios above 1 and view the rendered image on different mobile devices.