Create responsive image srcset attribute with PHP

responsiveImageSrcset.php

<?php

function responsiveImageSrcset($url, $options = []) {
  // Doc: https://github.com/area17/a17-behaviors/wiki/responsiveImageSrcset
  if (!$url) {
    return '';
  }

  $opts = [
    'sizes' => [200,400,600,1000,1600,2200,2800],
    'overwrite' => true,
    'defaultParams' => true,
    ...$options,
  ];

  if (isset($opts['params'])) {
    unset($opts['params']);
  }
  $opts['params'] = $opts['defaultParams'] === false ? [
    ...($options['params'] ?? []),
  ] : [
    'q' => 75,
    'fm' => 'auto',
    'auto' => 'compress,format',
    'fit' => 'min',
    ...($options['params'] ?? []),
  ];

  $srcset = '';
  $imgUrl = strtok($url, '?');
  $params = [];
  if (gettype(parse_url($url, PHP_URL_QUERY)) !== 'NULL') {
    parse_str(parse_url($url, PHP_URL_QUERY), $params);
  }
  $sizesLength = count($opts['sizes']);

  if ($opts['overwrite']) {
    $params = [
      ...$params,
      ...$opts['params'],
    ];
  } else {
    $params = [
      ...$opts['params'],
      ...$params,
    ];
  }

  foreach($opts['sizes'] as $index=>$size) {
    $params['w'] = $size;
    $params['width'] = $size;
    $sizeParams = http_build_query($params);
    $comma = $index < $sizesLength - 1 ? ', ' : '';
    $srcset .= "{$imgUrl}?{$sizeParams} {$size}w{$comma}";
  };

  return $srcset;
};

z_usage.php

<?php

echo "\n";
echo "\n";

$baseImgUrl = 'https://area17.imgix.net/0000/image.jpg';
$complexImgUrl = 'https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1480';

$srcset = responsiveImageSrcset($baseImgUrl);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=2800&width=2800 2800w';

echo "srcset from basic url, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($complexImgUrl);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=200&fm=auto&auto=compress%2Cformat&fit=min&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=400&fm=auto&auto=compress%2Cformat&fit=min&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=600&fm=auto&auto=compress%2Cformat&fit=min&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=1000&fm=auto&auto=compress%2Cformat&fit=min&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=1600&fm=auto&auto=compress%2Cformat&fit=min&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=2200&fm=auto&auto=compress%2Cformat&fit=min&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=75&w=2800&fm=auto&auto=compress%2Cformat&fit=min&width=2800 2800w';

echo "srcset from url with search params, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($baseImgUrl, [
  'sizes' => [50, 100]
]);

$expected = 'https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=50&width=50 50w, https://area17.imgix.net/0000/image.jpg?q=75&fm=auto&auto=compress%2Cformat&fit=min&w=100&width=100 100w';

echo "generates custom sizes ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($baseImgUrl, [
  'params' => [
    'q' => 60
  ]
]);

$expected = 'https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=60&fm=auto&auto=compress%2Cformat&fit=min&w=2800&width=2800 2800w';

echo "adds param to basic url, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($complexImgUrl, [
  'params' => [
    'q' => 60,
    'blur' => 20,
  ]
]);

$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=200&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=400&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=600&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1000&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1600&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2200&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2800&fm=auto&auto=compress%2Cformat&fit=min&blur=20&width=2800 2800w';

echo "overwrites param on url with search params, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($complexImgUrl, [
  'overwrite' => false,
  'params' => [
    'q' => 75,
    'blur' => 20,
  ],
]);

$expected = 'https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=90&fm=auto&auto=compress%2Cformat&fit=min&blur=20&px=10&w=2800&width=2800 2800w';

echo "doesn\'t overwrite params on url with search params, using defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ~~~~~~~~~

$srcset = responsiveImageSrcset($baseImgUrl, [ 'defaultParams' => false ]);
$expected = 'https://area17.imgix.net/0000/image.jpg?w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?w=2800&width=2800 2800w';

echo "srcset from basic url, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($complexImgUrl, [ 'defaultParams' => false ]);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=90&w=2800&width=2800 2800w';

echo "srcset from url with search params, no default ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($baseImgUrl, [
  'defaultParams' => false,
  'params' => [
    'q' => 60
  ]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?q=60&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=60&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=60&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=60&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=60&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=60&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=60&w=2800&width=2800 2800w';

echo "adds param to basic url, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($complexImgUrl, [
  'defaultParams' => false,
  'params' => [
    'q' => 60,
    'blur' => 20,
  ]
]);
$expected = 'https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=200&blur=20&width=200 200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=400&blur=20&width=400 400w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=600&blur=20&width=600 600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1000&blur=20&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=1600&blur=20&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2200&blur=20&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?px=10&q=60&w=2800&blur=20&width=2800 2800w';

echo "overwrites param on url with search params, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";

// ---

$srcset = responsiveImageSrcset($complexImgUrl, [
  'defaultParams' => false,
  'overwrite' => false,
  'params' => [
    'q' => 75,
    'blur' => 20,
  ]
]);

$expected = 'https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=200&width=200 200w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=400&width=400 400w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=600&width=600 600w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=1000&width=1000 1000w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=1600&width=1600 1600w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=2200&width=2200 2200w, https://area17.imgix.net/0000/image.jpg?q=90&blur=20&px=10&w=2800&width=2800 2800w';

echo "doesn\'t overwrites params on url with search params, no defaults ".($srcset === $expected ? "✅" : "❌");
echo "\n";
echo "EXPECTED: ".$expected;
echo "\n";
echo "RECEIVED: ".$sizes;
echo "\n\n";