Holy moly a lot of the complexity is handed for you these days (Next Image, built-in browser support for lazy loading, etc.)

The Old Way

Cropping versus non-cropping.

Picture element. Passing different images manually for high resolutions and screen sizes. From mdn, “The HTML element contains zero or more “source” elements and one “img” element to offer alternative versions of an image for different display/device scenarios.

<picture>
      <source srcset="<?php echo get_theme_file_uri('images/hero--large.jpg 1920w, images/hero--large-hi-dpi.jpg 3840w');?>" media="(min-width: 1380px)">
      <source srcset="<?php echo get_theme_file_uri('images/hero--medium.jpg 1380w, images/hero--medium-hi-dpi.jpg 2760w');?>" media="(min-width: 990px)">
      <source srcset="<?php echo get_theme_file_uri('images/hero--small.jpg 990w, images/hero--small-hi-dpi.jpg 1980w');?>" media="(min-width: 640px)">
      <img srcset="<?php echo get_theme_file_uri('images/hero--smaller.jpg 640w, images/hero--smaller-hi-dpi.jpg 1280w');?>" alt="Coastal view of ocean and the mountains" class="large-hero__image">
  </picture>

Libraries like lazysizes are not really needed anymore since the loading: eager/lazy spec.

So instead of:

<img class="lazyload" sizes="(min-width: 970px) 976px, 100vw" data-srcset=<?php echo get_theme_file_uri("images/first-trip.jpg 976w, images/first-trip-hi-dpi.jpg 1952w");?>  alt="Couple walking down a street">

We have:

<img src="image.jpg" alt="..." loading="lazy">

Old Dev Trick

The dev trick of having image overlays for testing with dimensions so you could more easily see which image was loaded.