Hosted Images

For hosted images, Persosa will automatically serve an image with the appropriate width based on the device that's requesting it, decreasing page load speed, especially for mobile devices.

<img> tag

Persosa will set the src attribute to the default uploaded image. The image's srcset attribute will be automatically set to different variants of your image for the following screen widths (in pixels): 480, 768, 900, 1000, 1100, 1200, 1400.

If it hasn't already been set (either on the page or via an attribute modification), sizes will be set to 100vw as a largest-case (if the image is displayed full-width).

Background Image

If the region is not an <img> element, the image will be set as a background image using the CSS background-image property. In this case, we calculate the total width of the screen in "hardware pixels" and request an image with that width (maintaining proportions). On desktop, this means that if the user resizes the window larger they will still have a high-quality image.

Remote Images

Auto image widths are currently only available for hosted images. Remote images are handled as follows:

<img> tag

Persosa will set the src attribute to your image and remove any srcset or sizes attributes that may exist on it. As a result, srcset and sizes can not be a modified attribute on a region that ALSO sets a remote image on an <img> element.

Background Image

If the region is not an <img> element, Persosa will set the image as a background image using the CSS background-image property along with the remote URL provided.

Did this answer your question?