This is a helper script to generate a svg used to load images adapted to the pixel density of the screen using the clown car technique by Estelle Weyl at Clown Car Technique (https://github.com/estelle/clowncar), but using min-device-pixel-ratio and min-resolution instead of min/max-width

clown_car-image_generator.sh

#!/bin/bash

RESOLUTIONS="1 1.25 1.3 1.5 2 3"
BASEDPI=96
INFILE="image.jpg"
OUTFILE="image.svg"
WIDTH_AT_1DPPX=88
IMAGE_TEMPLATE="$(basename $INFILE .jpg)_small"

cat > $OUTFILE <<EOF
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
 <title>img using the Clown Car technique</title>
 <desc>Adaptation of the clown car technique using min-device-pixel-ratio and min-resolution instead of min/max-width. Original technique by Estelle Weyl at Clown Car Technique (https://github.com/estelle/clowncar)</desc>
 <style> 
  svg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
  } 
EOF

for i in $RESOLUTIONS ; do 
	S=$(echo "scale=0; ($WIDTH_AT_1DPPX*$i)/1" | bc) ; 
	DPI=$(echo "scale=0; ($BASEDPI*$i)/1" | bc);
	echo "Generating ${i}dppx/${DPI}dpi/${S}px image";
	IMAGE="$IMAGE_TEMPLATE@${i}x.jpg"

	convert -strip -interlace Plane $INFILE -thumbnail ${S}x${S} $IMAGE; 
	cat >> $OUTFILE <<EOF
@media
only screen and (-webkit-min-device-pixel-ratio: $i),
only screen and (   min--moz-device-pixel-ratio: $i),
only screen and (     -o-min-device-pixel-ratio: $i/1),
only screen and (        min-device-pixel-ratio: $i),
only screen and (                min-resolution: ${DPI}dpi),
only screen and (                min-resolution: ${i}dppx) { 
	svg {background-image: url($IMAGE);}
}
EOF
done

cat >> $OUTFILE <<EOF
 </style>
</svg>
EOF