Building both hero crops is the easy half. Plenty of teams then ship both, rendering each one and hiding the loser with display:none, which pulls down every byte the phone will never paint. That trades a cropping problem for a bandwidth problem, and you come out behind. The 2024 Web Almanac put the median largest image on a mobile page at 135 KB, and the 90th percentile at 1002 KB. One stray desktop asset drops you past the worst tenth of the web before your real hero has rendered. What makes it hard to catch is that it looks perfect. A hidden download passes every visual review you'll ever run. So I check the waterfall, not the mockup. It takes about ninety seconds. Open the network panel on a real phone profile, load the page cold, and count the hero assets that actually arrived. One is correct. Two means your media conditions overlap, or something hidden is still fetching. Worth knowing how rare the correct version is. That same chapter found the picture element on 9.3% of mobile pages. Art direction still isn't a crowded field. https://www.duskolicanin.com/blog/portrait-vs-landscape-hero-media-mobile