Stripping height and width attributes out of image tags

I’m redesigning my web pages to work in mobile devices (responsive design). Accordingly, I need to strip the width and height attributes out of my image tags. Can anyone recommend the best script for doing this in an editor like Dreamweaver or TextWrangler?

<img class="Animals" src="/images/Animals/Horse.jpg" width="300" height="212" alt="Horse">

Better yet, do you know of any scripts that would strip out the width and height, then append them AFTER the image, like this?:

<img class="Animals" src="/images/Animals/Horse.jpg" alt="Horse"><!--300X212-->

It would be very helpful if I could look at the source code to quickly see what an image’s actual dimensions are.


Hmm… you could use the search and replace functions in dreamweaver; you could search for width=“300” height=“212” and replace with nothing- but it all depends on if the content is similar or not (because that will only match the width=300 etc). I’m not sure if Dreamweaver allows you to use expressions though so maybe check out that function to see if it will allow you to do something like width=“%” height=“%” and will match any result.

I think the best action is to do it manually though. :X