ImageRenderer.php

<?php

class ImageRenderer
{
    const BREAK_POINTS = '1199|991|768|500|320';
    const MOBILE_BREAKPOINT = 2; // which index of BREAK_POINTS is deemed "mobile"?
    const PERCENTAGES = '1|0.8|0.6|0.4|0.3';
    const QUALITY = 75;
    const DIRECTORY = '/_images/remote/';
    const RETINA_IDENTIFIER = '@2x';

    /**
     * @var Client
     */
    private $httpClient;

    /**
     * @param array $options
     * @param Client $httpClient
     */
    public function __construct(Array $options, $httpClient) {
        $this->options = $this->configureOptions($options);
        $this->httpClient = $httpClient;
    }
    
    /**
     * Return a formatted <picture> element with all its sources, and a default <img>
     * Source values will comprise of an un-parsed {exp:ce_img} tag, which will eventually
     * get parsed out by EE later on.
     *
     * @return string
     * @throws Exception
     */
    public function render()
    {
        $images = $this->options['images'];
        $class = $this->options['class'];
        $quality = $this->options['quality'];
        $directory = $this->options['directory'].$this->options['date'];
        $suffix = '_'.$this->options['date'];
        $alt = $this->options['alt'];
        $responsive = $this->options['responsive'];
        
        // Do stuff
    }
    
    private function configureOptions(Array $options)
    {
        $resolver = new OptionsResolver();
        $resolver
            ->setRequired(array(
                'images',
                'date',
            ))
            ->setAllowedTypes('images', 'array')
            ->setAllowedValues('responsive', array('yes', 'no'))
            ->setDefaults(array(
                'quality' => self::QUALITY,
                'breakPoints' => self::BREAK_POINTS,
                'percentages' => self::PERCENTAGES,
                'directory' => self::DIRECTORY,
                'class' => '',
                'alt' => '',
                'responsive' => 'no',
            ))
            ->setNormalizer('breakPoints', function(Options $options, $value) {
                return explode('|', $value);
            })
            ->setNormalizer('percentages', function(Options $options, $value) {
                return explode('|', $value);
            })
            ->setNormalizer('alt', function(Options $options, $value) {
                if ($value) {
                    return ' alt="'. $value .'"';
                }
                return ' alt="" aria-hidden="true" role="presentation"';
            })
            ->setNormalizer('class', function(Options $options, $value) {
                if ($value) {
                    return ' class="'. $value .'"';
                }
                return '';
            })
            ->setNormalizer('responsive', function(Options $options, $value) {
                return $value == 'yes';
            })
        ;

        $imageTypeResolver = new OptionsResolver();
        $imageTypeResolver
            ->setRequired(array('desktop', 'mobile'))
            ->setAllowedTypes('desktop', 'array')
            ->setAllowedTypes('mobile', 'array')
        ;

        $imageParamResolver = new OptionsResolver();
        $imageParamResolver->setRequired(array('src', 'width', 'height'));

        $options = $resolver->resolve($options);
        $options['images'] = $imageTypeResolver->resolve($options['images']);
        $options['images']['desktop'] = $imageParamResolver->resolve($options['images']['desktop']);
        $options['images']['mobile'] = $imageParamResolver->resolve($options['images']['mobile']);

        return $options;
    }

mod.plugin.php

<?php

/**
     * Creates a <picture> element with multiple sources, each source
     * with a Retina and non-Retina image. Requires the original to
     * be of Retina quality.
     *
     * Usage:
     *
     * {exp:plugin:img
     *      src="{image:url}"
     *      date="{image:date_modified}"
     *      width="{image:width}"
     *      height="{image:height}"
     * }
     *
     * @return string
     * @throws Exception
     */
    public function img()
    {
        // At least 1 src, width, and height should be defined.
        $src = ee()->TMPL->fetch_param('src');
        $width = ee()->TMPL->fetch_param('width');
        $height = ee()->TMPL->fetch_param('height');

        $options = array(
            'images' => array(
                'desktop' => array(
                    'src' => $src,
                    'width' => $width,
                    'height' => $height,
                ),
                // If no mobile specific image is defined, use the desktop as fallback.
                'mobile' => array(
                    'src' => ee()->TMPL->fetch_param('src2', $src),
                    'width' => ee()->TMPL->fetch_param('width2', $width),
                    'height' => ee()->TMPL->fetch_param('height2', $height),
                ),
            ),
            'date' => ee()->TMPL->fetch_param('date'),
            'alt' => ee()->TMPL->fetch_param('alt'),
            'class' => ee()->TMPL->fetch_param('class'),
            'responsive' => ee()->TMPL->fetch_param('responsive'),
        );

        if ($quality = ee()->TMPL->fetch_param('quality')) {
            $options['quality'] = $quality;
        }

        $imageRenderer = new ImageRenderer($options, new Client());

        return $imageRenderer->render();
    }