Use the responsive image capability of Sirv to quickly add images to your website that will scale to fit any size device or viewport each user is using.
On retina screens (HiDPI) screens, Sirv will automatically serve images in high resolution – 4 times the number of pixels for beautiful clarity.
Responsive imaging is so useful that Sirv employs it by default. Simply reference the sirv.js script in your page and then reference your img as usual, for example:
<img class="Sirv" alt="" data-src="//your-account.sirv.com/your-image.jpg" />
When the screen is resized, Sirv stretches the existing image by up to 50px. Above 50px and Sirv triggers the creation of a new image, which is typically prepared in less than 0.1 second and then served to the users browser.
Try viewing these images on different devices. Try resizing your browser and see how new images are automatically created to fit the screen:
The images below use lazy loading, to save bandwidth and time: