<source media="(min-width: 800px)" srcset="big.jpg, big-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="small.jpg, small-2x.jpg 2x">
</picture>
As you can see from the example, we have another attribute used to optimize this step. Namely the srcset , an element that is inserted to simplify the job of choosing the file based on the type of request made by the device. In short, srcset tells the browser which is the best image.
But what about background images? What is the ideal whatsapp in philippines solution to insert a responsive visual? Use the CSS @media (min-width) to make sure that the file is downloaded and applied only if the browser has a width greater than the chosen one. Here is an example.
@media (min-width: 400px) {
body {
background-image: url(sfondo.png);
}
}
Replacing the image via Javascript can be a solution since you can check the device and perform the operation by determining the number of pixels of the device with the height and width of the screen. It must be said that it is not the best in terms of general optimization since it causes an increase in the weight of the page and slows down the image upload.
For responsive images, is it worth having a structure capable of managing files in a structured way? Yes, you can use a CDN (Content Delivery Network) structure that takes charge of your most demanding files and manages them in the best way in terms of performance.
First of all with adequate compression, focusing on the various WebP and JPEG2000 , but also allowing the various resize and cutting actions while maintaining the correct responsive format.
How to check responsive images?
You can use Lighthouse to make sure everything is working as it should. Run a performance check with the performance audit and look for results that relate to image size checks or use Cloudinary's image analysis tool .