I want to make a super optimized website for the pet project. There was a need to adapt the images so that there would be a high-resolution image on PC screens and a small one on phones.
I made a responsive image that changes size depending on the pixels of the user’s window, everything works fine on the PC, but when I turn on the phone simulation in developer mode, everything does not work very well: the image does not adapt, as a result, instead of 300 KB, 1.2 MB is loaded into the DOM, these are huge numbers in seconds, especially if the 3G network.
I have had this problem since the beginning of studying the WEB, I tried to solve it on 2 browsers Firefox and Chrome – it does not disappear. What are the tips for solving the problem?
<img
srcset="
assets/images/image-1280.jpg 1280w,
assets/images/image-3840.jpg 3840w"
src="assets/images/image-3840.jpg"
width="100%"
alt="Cyber Prototype" >
Responsive error
If image bigger than 1280px
P.S. I know that i can use the <picture> element, but is there any more elegant solution?
I tried to apply srset
I expected my image to be adapted for phones
As a result, my image does not adapt to phones and loads the user system with an unnecessary large picture
You need to sign in to view this answers
Leave feedback about this