How to change image file name in HTML code of different screen sizes?

How to change image name in HTML code of different screen sizes?

for example I want do like

if screen is max-width:1024

<img src="sample400X400.jpg>

and if screen is max-width:min-width:1900px

<img src="sample800X800.jpg>

开发者_运维知识库

Is it possible

---

You can do this in CSS by using media-queries or in JavaScript by detecting changes to the width of the viewport ($(window).width();).

You can detect the change in viewport width by listening for onresize events:

$(window).resize(function() {
    ...
});

---

You can use a simple JS script to do this :

img = document.createElement("img");
img.src = (document.body.offsetWidth < 1024) ? "sample400X400.jpg": "sample800X800.jpg";
document.body.appendChild(img);

I have put a exemple on my server, you can look at this if you want (you need to resize and reload the page to see any change) http://frommelt.fr/img-size/