PHP:
One thing to consider here would be when the user increases and decreases the page width, if only one slider is built on page load then they wouldn’t be able to then load the other slider if they change the width of the page.
JS:
You can amend the image src using JS, having your images named the same and adding removing the extention to the image on width adjustment. e.g. image.png then adding and removing (image)-mobile.png.
CSS:
You can use background images or image tags then swap the src with css using media queries. Background images are easy enough to declare, and image tag src’s can be swapped like this:
<style>
@media screen and (min-width: 1248px) {
.MyClass123{
content:url("image-1.jpg");
}
}
@media screen and (max-width: 1247px) {
.MyClass123{
content:url("image-2.jpg");
}
}
</style>
<img class="MyClass123"/>
The simplest and most likely most reliable and easy to keep updated would be the CSS avenue.
Take your pic of which, then we can look to write you up a solution, Jason.