Javascript to rename images based on screen width

1 . I have some code with inline CSS. 2 . In the css and in the html there are image references. <style> background-image:url(images/[login to view URL]); </style> <div><img src="images/[login to view URL]"></div> 3 . I would like some javascript that changes the image name in the code. 4 . The names should be changed when the screen width of the browser is updated: 5 . 480px and smaller, then Add "-m" on the image names. For example the image links would get updated to: [login to view URL] and [login to view URL] 6 . 768px and smaller, then Add "-t" on the image names. For example the image links would get updated to: [login to view URL] and . [login to view URL] 7 . The idea is that we will have three versions of each image, with each one of them being smaller and smaller on the server. Tablets will get the -t version and cell phones will get the -m version. 8. The javascript you provide must be a single script we can add to a page and have it work properly without having to add script elements manually on each of the images. 9. Reminder that the javascript you provide should update the CSS images as well as HTML images. Thanks and good luck!!