Hi Umbracions, I try to create cropping images. I create at the moment a blog, where I would like for each article a hero image: I created for the image property cropping settings. HeroBanner has the cropping 1280x720. But I'm to dumb to access it in the html. My code looks like this at the moment:

csharp
<img src="@Model.ArticleHeroImage?.MediaUrl()" style="width: 900px" />
        <img src="@Model.ArticleHeroImage.LocalCrops" />
        <slimsy-picture media-item="Url.GetCropUrl(Model.ArticleHeroImage?.MediaUrl()" css-class="mx-auto" render-lqip="true" alt-text="Attention, Zombie articles incoming" width="1280" height="720" decorative="false"></slimsy-picture>

To be fair I must say I don't understand slimsy to 100% yet. As far as I know it takes a image for example 1920x1080 and if I watch my website on a mobile devices the image gets loaded with worse image quality because on the phone I don't need the full blown up image. I googled quite a lot with umbraco cms but I couldn't really find a good tutorial. I know there is focal point setting on node tree basis or globally... Is there some article or a person which can me tell in detail how cropping, focal points and/or slimsy work together? At the moment I have on my website only very big and not really optimized images and I would like to change thath (https://danobe.dev) I would glad if someone could bring on some light to this mysterium for me. How do cropping, focal point and slimsy picture play together? In which situation should I use what? The end goal: Make images on my website more beautyful and better optimized for different resolutions. Would be glad if someone could hint me into the right direction. Kind regards, Daniel https://cdn.discordapp.com/attachments/1165619753218494524/1165619753767936091/Bildschirmfoto_2023-10-22_um_13.50.22.png?ex=654782fd&is=65350dfd&hm=98369f2bdf8bee5cc2077a3c3d3601b692931764584cc8ea197758450ba1e3c2&

Think the fault lies here

I don't know if it was you, but I had a similar thread where I asked how to handle images. And there I was told when I want to change aspect ratio I can't use slimsy... because it allows only images with the same aspect ratio. If I try your code I get this error: Der Typ "Microsoft.AspNetCore.Html.IHtmlContent" kann nicht implizit in "Umbraco.Cms.Core.Models.MediaWithCrops" konvertiert werden. Es ist bereits eine explizite Konvertierung vorhanden (möglicherweise fehlt eine Umwandlung). The main goal is to set up website with nice images and let the accordingly resize with website's width. Would it better if I abandon slimsy packet and use picture element with src-set and max-min window with? I could create a component and pass the according data in all points of the website to that component to make it beautiful? In the end the images are really good optimized, all webp format and image size is about 300-500kbyte per image. So it probably wouldn't really make sense to downscale them even more, only for a very small internet connection benefit. Does it make sense what I write here and what I would like to accomplish? At the moment I read everything about lazy loading and how to setup the picture html element ... Like this: https://dev.opera.com/articles/responsive-images/ https://jakearchibald.com/2015/anatomy-of-responsive-images/ https://dev.opera.com/articles/responsive-images/ I want to use for all images webp format, I don't care if perople browsers do not support it. pixel density is also not my problem I do not want to create extra images with better pixel density. Cropping would be important so that the images look clean and tidy I hope I could explain my problem in a more clear way