How do you setup responsive images for IOS and Android?

Wappler General How To
#1

I have a client that wants to supply and use many graphics that are preset for IOS and Android. So the images are intended to be supplied like this (and this is for just one image!)

> images (folder)
    > 0.75x (folder)
        logoldpi.png (img for Android)
    > 1.5x (folder)
        logohdpi.png (img for Android)
    > 1x (folder)
        logomdpi.png (img for Android)
        logo.png (img for IOS)
    > 2x (folder)
        logoxhdpi.png (img for Android)
        logo@2x.png (img for IOS)
    > 3x (folder)
        logoxxhdpi.png (img for Android)
        logo@3x.png (img for IOS)
    > 4x (folder)
        logoxxxhdpi.png (img for Android)
    > SVG (folder)
        logo.svg

These are supposed to be the best way to take advantage of Apple’s Retina screens and other high resolution displays where the device-pixel ratio is greater than 1.

How do you manage images like this?

Is there a Wappler way to do this?

Do you use

  • <img srcset=""> ?
  • <picture> <source srcset="" media=""> <img srcset="" src=""> ?
  • or something else?

All the images could be in one folder, and we could reduce the number of image options if that will help.

#2

Could you not use Dynamic Lazy Load and specify your sizes there for responsiveness?

#3

I have been looking at that via Responsive Images with Lazy Load and srcset but I wondered if there were any other ways of working.

It’ll be a real pain in the backside if we have to do this with hundreds of images :frowning:

#4

It’s bad enough working with the images for the initial splash screen of an app let alone any more than that! :slight_smile:

Good luck Riggers!

:smiley:

2 Likes
#5

Have a look at

There are many more functions besides resizing.

In your case you would store one image an an S3 bucket and the link to the image will do the rest.