Simple Responsive Illustrations in Plain HTML
Live Responsive Illustration Demo
Check out the live example of the responsive illustration. Just resize the browser or load it on your phone.
Switching Illustration Based on Device Screen Size
Using the <picture>, <source> and a simple media query you can easily swap out an illustration based on the screen size. This is useful for infographics or diagrams where simply scaling down for mobile does not work. You want to tailor make a simplified illustration for mobile devices.
This technique can also be used to display a responsive logo based on screen size. Very handy.
This example below loads a different illustration in PNG format with a screen breakpoint of 600 pixels.