What are responsive images?
Responsive images are automatically scaled to suit the users’ screen. Smaller screens receive smaller images, Retina screens receive Retina images. Pages load faster and users enjoy a more personal experience.
Responsive and optimized
Newly generated images are created in just 0.15 seconds, then cached for CDN delivery in just 0.01 seconds. Images are converted to the most optimal image format (often WebP) to a fraction of their original size.
Lazy-loading on demand
Even better than fast loading is no loading (when it’s not needed). When an image out of sight, Sirv only loads it if the user scrolls down to it. This lazy-loading technique brings yet another boost to loading speed.
One master image is all you need
The fresh new approach to truly responsive images
The old way
- Resize image into at least 3 sizes.
- Double up the 3 sizes, for Retina screens.
- Export them in the formats you want (JPEG/WebP/PNG).
- Optimize them for web delivery.
- Write the code to detect and serve the right image.
<img srcset="car-320.jpg 320w, car-480.jpg 480w, car-800.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="car-800.jpg">
The Sirv way
- Upload one image.
- Copy/paste the code.
<img class="Sirv" alt="black car image" data-src="https://demo.sirv.com/car.jpg"> <script src="https://scripts.sirv.com/sirv.js"></script>
Businesses love Sirv
Powered by Ukrainian determination and British ingenuity
How can you support Ukraine