How to add parameter to image url with JavaScript

Question

I can embed images on my page with specified width and height (like this: <img src="image.php?w=100&h=100"> )

I want to load different image sizes depending on device screen width: 100x100 for screen widths lower than 600px and 200x200 in other cases. As I understand php knows nothing about user screen so I have to use JS.

This didn't work:

<img src="image.php?<script>document.write('w=100&h=100')</script>">

That worked:

<script>document.write('<img src="image.php?w=100&h=100">')</script>

Is that a correct way for doing this? Any consequences I should take into consideration?

Answer 1

You can use that code. But I think that bst way is to change src of images on the server side.

 function addParams(w, h) { var img = document.querySelectorAll("img.withParams"); for (var i = 0; i < img.length; i++) { img[i].src = img[i].src + "?w=" + w + "&h=" + h; } } window.addEventListener("load", function () { addParams(10, 10); }) 

 <img class="withParams" src="img.php"/> <img src="img.php" /> <img class="withParams" src="img.php" />