Responsive images in OutSystems

Published in

ITNEXT

4 min readMar 6, 2024

How to load different images depending on the screen width or pixel density, using the picture html tag.

Almost every application uses images and probably every OutSystems developer uses the most simple implementation for it: just drag the image widget from Service Studio toolbox to the the screen.

It’s simple and it works.

This will add an html img tag, with an src attribute and load a file into the browser.
Note: the data-image attribute, is added and used by the OS platform.

<img data-image src="my-image.jpg">

But this will always load the same image, no matter the device we are using.
What if I want to use a small image on a phone and a larger image on a desktop? Or a higher density image when my retina screen allows it?

Meet the <picture> tag!

The <picture> tag has been around for some time now and available in all major browsers since 2014.

A simple usage could look like this:

<picture>
  <source
      media="(min-width:1600px)"
      srcset="large-image.jpg, large-image-2@.jpg 2x">
  <source
      media="(min-width:1024px)"
      srcset="medium-image.jpg, medium-image-2@.jpg 2x">
  <img
      srcset="default-image-2@.jpg 2x"
      src="default-image.jpg">
</picture>

Lets drill down:

if the screen width is higher than 1600px, the file large-image.jpg is loaded, and if the the screen pixel density is a retina 2x, it will load a specific file large-image-2@.jpg;
if the screen width is between 1024px and 1600px, it will load a file medium-image.jpg or medium-image-2@.jpg;
if the screen is below 1024px it will load the default-image.jpg file or the retina version as well;

There are many more usages for the <source> tag and you can check them out at
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
If you want to know more about HTML evolution check out the Web Hypertext Application Technology Working Group
https://whatwg.org/

Cool. Now for our beloved platform.

How to use it in OutSystems?

1 - Create the HTML

First of all, we need the HTML Element widget from Service Studio.
This widget gives us the possibility to add any HTML to our Blocks or Screens.

By default when we drag it it assumes a span, but we can type picture.

Inside of it we can add several more child elements with the tag source.

And inside the sources tags, we can add any attribute we may need.

In my code I also added a media query to determine which image to load depending on the screen width.

2 - The image URL

For this construction we need to use the image URL.
We can use any existing image in our modules or any image from the cloud.

For the images added in our modules, they are deployed with a Runtime Path making them available to be used by our code.

I have an example where we display an image of a mouse when the screen width is below 600px. If its higher it displays an image of a lion.

Notice that the second image (the lion) is only loaded by the browser when it reaches a specific screen width: if the screen is always small, the image is never loaded saving download bandwidth.

When should we use this?

There are many use cases where this capability is necessary:

on a phone you might have a squared or vertical rectangle image and on a large desktop a landscape version with a 16:9 ratio. The same image content with different crops and canvas sizes.
if you have a public facing site with commercial purposes, you might want to display different images when the screen allows a higher pixel density.
If you are concerned about mobile network speed, you might load a compressed version (smaller size in kb) on smaller screens and better quality version (bigger size in kb) for desktop devices.

What are your thoughts on this?

If you enjoyed this article, press the Clap button 👏

Check out the other articles and reach me in the comments!
Visit my Youtube Channel