Load and render responsive image from field in Drupal 8

d8-responsive-image-programmatically.php

<?php

function _load_header_image($variables) {
  if ($node = $variables['node']) {
    // Load main_image
    $file = $node->field_main_image->entity;
    if ($file) {
      $variables = array(
        'responsive_image_style_id' => 'header_image',
        'uri' => $file->getFileUri(),
      );
      // The image.factory service will check if our image is valid.
      $image = \Drupal::service('image.factory')->get($file->getFileUri());
      if ($image->isValid()) {
        $variables['width'] = $image->getWidth();
        $variables['height'] = $image->getHeight();
      }
      else {
        $variables['width'] = $variables['height'] = NULL;
      }
      $logo_build = [
        '#theme' => 'responsive_image',
        '#width' => $variables['width'],
        '#height' => $variables['height'],
        '#responsive_image_style_id' => $variables['responsive_image_style_id'],
        '#uri' => $variables['uri'],
      ];
      // Add the file entity to the cache dependencies.
      // This will clear our cache when this entity updates.
      $renderer = \Drupal::service('renderer');
      $renderer->addCacheableDependency($logo_build, $file);

      // Return the render array as block content.
      return $logo_build;
    }
  }
  return NULL;
}

@leymannx that saved my day!

I have a view returning an image with a responsive image style of type "Gallery thumbnail" and needed to have the same images in my view template but with a different responsive image style (that is "slider" to show them in a slider) and your code worked like a charm.

    // Preprocess slider images
    foreach ($view->result as $reference) {

      // Define responsive image display options
      $display_options = [
        'label'    => 'hidden',
        'type'     => 'responsive_image',
        'settings' => [
          'responsive_image_style' => 'slider',
        ],
      ];

      // Get image, apply display options
      $image = $reference->_entity->get('field_media_image')->view($display_options);

      // Render
      $responsive_image = render($image);

      // Set slider_images variable for template
      $variables['slider_images'][] = [
        'responsive_image' => $responsive_image
      ];
    }

//reference field for a media entity, with multiple values.

function MYTHEME_preprocess_node__CONTENT_TYPE(&$variables) {
  $display_options = [
    'label'    => 'hidden',
    'type'     => 'responsive_image',
    'settings' => [
      'responsive_image_style' => 'property_hero',
    ],
  ];
  foreach ($variables['node']->get('field_hero_images')->getValue() as $key => $value) {
    $media = Media::load($value['target_id']);
    $responsive_image = $media->field_media_image->view($display_options);
    $variables['hero_images'][] = [
      'hero_image' => $responsive_image
    ];
  }
}

Hi, I like the approach from @leymannx
Any chance to add a class to the responsive image?
In twig you can add a class to responsive image style using:
{% set responsiveImage = {
'#theme': 'responsive_image',
'#responsive_image_style_id': 'display_image_gallery',
'#uri': imagePath,
'#alt': altText,
'#attributes': { class: 'img-responsive' },
} %}