Render responsive image into a block Drupal 8 Example

ImageRenderExampleBlockResponsive.php

<?php

/**
 * @file
 * Contains Drupal\mymodule\Plugin\Block\ImageRenderExampleBlockResponsive.
 */

namespace Drupal\mymodule\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\file\Entity\File;

/**
 * Provides a 'ImageRenderExampleBlockResponsive' block.
 *
 * @Block(
 *  id = "mymodule_imagerenderexampleblockresponsive",
 *  admin_label = @Translation("MyModule Image Render Example Responsive"),
 * )
 */
class ImageRenderExampleBlockResponsive extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    // Load file with file id 1.
    $file = File::load(1);
    if ($file) {
      $variables = array(
        'responsive_image_style_id' => 'responsive_thumbnail',
        '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' => $logo_build,
      ];
    } else {
      // Image not found, return empty block.
      return [];
    }
  }
}

This is a very fragile way of doing this. For example, even if the image comes back as inValid you will still attempt to build the image. This will cause the site to throw an error and not work.

render $logo_build in twig ?

if you return the array without an identifier like below:
return array( $logo_build );
the render array gets output directly and in my case the picture element gets rendered where I placed it within my Display Suite (DS) layout.

The context where I use this is also in the build function but in the realm of DsFieldBase. Because I need the randomness (multivalue image field where I pick a random one on each request) a can not use the cacheability stuff.

class TeaserboxRandomImage extends DsFieldBase {
    public function build() { 

    ...

    // return responsive image array
    return array(
      $random_teaser_image
    );
  }
}

The full class is available as a gist over at my gists

In order to retrieve the html:
$responsive_image = $renderer->renderRoot($logo_build);