check image width from its source and not from its size on the page - javascript

Question

i have user submitted content on my website that contains image tags.

I have used this:

<script type="text/javascript">
$(document).ready(function () {
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
function resize() {
    var box = $(".blogtest");
    box.find("img.buildimage").on('load', function () {
        var img = $(this),
            width = img.width();
        if (width >= 650) {
            img.addClass("buildimage-large");
        } else if (width < 500 && width > 101) {
            img.addClass("buildimage-small");
        }
        // if image is less than X, its most likely a smiley
        else if (width < 100) {
            img.addClass("buildimage-smiley");
        }
        }).filter(function () {
            //if the image is already loaded manually trigger the event
            return this.complete;
        }).trigger('load');
    }
    resize();
});
</script>

Which assigns a different class to each image depending on its size. This works fine, however if the user is on a ipad / small screen size and the .blogtest div is less than the defined size, it always get put as a small image.

What i wanted to do was the check the image width from its source so that no matter what the screen size, i can always assign the best class.

Thanks. Craig.