2/20/15

Testing the srcset element with blogger

Testing out using different resolution images with the <srcset> element. This let's all images look good on all HDPI and Retina displays.
1x

2x

3x

4x


Adaptive

Each image was resized manually with Photoshop and uploaded separately.
<img src="http://blogspot.com/AAA/AAA/AAA/s1600/image-1x.png" 
srcset="
http://blogspot.com/AAA/AAA/AAA/s1600/image-1x.png, 
http://blogspot.com/BBB/BBB/BBB/s1600/image-2x.png 2x, 
http://blogspot.com/CCC/CCC/CCC/s1600/image-3x.png 3x, 
http://blogspot.com/DDD/DDD/DDD/s1600/image-4x.png 4x" />

Second adaptive test

Image resize using the "/s###/" in the image URL.
<img src="http://blogspot.com/DDD/DDD/DDD/s60/image-4x.png" 
srcset="http://blogspot.com/DDD/DDD/DDD/s60/image-4x.png 1x, 
http://blogspot.com/DDD/DDD/DDD/s120/image-4x.png 2x, 
http://blogspot.com/DDD/DDD/DDD/s180/image-4x.png 3x, 
http://blogspot.com/DDD/DDD/DDD/s240/image-4x.png 4x" />