Hey people, I'm wondering on how to implement different images for different devices. At the moment I use the same image without crop for all devices, and it looks bad & ugly (https://danobe.dev) I know that umbraco has the crop option but I think I would like to use different images in size when I use mobil devices. How can I tell umbraco if device is Smartphone send this lower ressolution image instead of the 1920x1080 resolution image? Is there a tutorial on how to handle images on a website using umbraco which goes a bit beyond cropping? That would come in very handy in my opinion, or what would you people recommend me doing in my position? I think cropping the images would break alsmost my website and therefore I'm not sure on how to progress ... Any tipps or ideas how I can handle this? Kind regards, Daniel

It sounds like you want to use a

<picture>

element in the html. Then you can specify all the crops for all the different sizes you need: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

ahh ok, then the image tag requests the proper image? I wasn't sure how umbraco would act if I want 3 different pictures and would send all of them or simply one, but in the picture tag I can set media queries right?

The browsers are smart enough to look at the list of images provided and choose the first one that matches the particulars of where it is, only loading that one image :)

ah okay I get it. I could also specify different images for different devices, right? okay I guess that solves the question

(And then if someone resizes their screen, it can reevaluate that on the fly)

yeah I understand

Awesome

Thank you Rachel for the answer! 🙂

For example:

html
    <picture class="image-full">
        <source media="(min-width:2570px)" srcset="@GetImageUrl("widescreen")">
        <source media="(min-width:1940px)" srcset="@GetImageUrl("large")">
        <source media="(min-width:601px)" srcset="@GetImageUrl("normal")">
        <source media="(max-width:600px)" srcset="@GetMobileImageUrl()">
        <img src="@GetImageUrl("normal")" alt="@(labelURL != null ? labelURL.Name : string.Empty)">
    </picture>

Yeah I see. Have you people some default values for resolution? How many do I need and what resolution I use? What are the most common resolutions used by you? Any tip?

@User May I suggest “people” instead of "guys"? We use gender inclusive language in this Discord. 😀

Depends on your front end design; I tend to stick to the breakpoints defined in that. If you don't have breakpoints in your frontend design, then you could try borrowing what some popular frameworks use - e.g. bootstrap has 576/768/992/1200/1400, tailwind css uses 640/768/1024/1280/1536

hmm, I'm using tailwindcss so I guess I could adapt to these breakpoints I guess! Thats a good idea! 🙂 Thank you, yeah I understand

If you are not changing the aspect ratio of the image, you can use srcset which is less verbose. There is an excellent package available to help: https://marketplace.umbraco.com/package/our.umbraco.slimsy

@Jason I must say I don't understand everything fully yet. I understand lazysizes, which loads images only when in viewport, shows a temporally image until the right one is loaded, and so on... But this plugin autosizes images for different resolutions, is that right? When I have a base image with 3440x1440 it automatically gives different clients different versions of this image, is that right? (Already read the Github page but there is no so much information)

The package includes helpers to automatically provide a list of alternative URLs for different sizes of the same image. The idea of srcset is that it provides the browser with a list of sizes, and their different URLs - the browser can then choose which one to fetch based on viewport width/pixel density etc.

ahhhhaa okay, I get that!

Then I do have in Umbraco to create different crop sizes, which then the Tag Helper automatically creates the corresponding html, is that right?

No, create a single crop (aspect ratio) and let the plugin determine the actual pixel sizes.

aha okay, it would take a picture for exmaple 1920x1080 and downscale it then for mobil devices?

What about

umbraco tag helpers

.. has lazy and responsive support? https://github.com/umbraco-community/Our-Umbraco-TagHelpers#our-img

What about actual different images for different devices? E.g., a portait image and a landscape image with actual different contents, not just different crops. Currenly we have two properties on the document type, Landscape Image and Portrait Image, but couldn't this be moved to the actual Media item somehow? Two images in one media item, so to speak? Is there anything ootb for this?

Nothing OoTB @kdx-perbol, because trying to support two images on one media node gets very complicated quickly. Put simply, if they are different images, then they are different images and need to live inside different media items.