I keep the images of my site in Picasa... as we know we can set size of picture like this.
http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w900-h0/running-sml.jpg
The part w900-h0 means that, the picture size is: width 900px and the height 0 (auto).
And so I need change this url, (acctualy the part w900-h0) of the image automaticly depending of the viewport of the device, I know that I can make images fluid just set them max-widht:100%; via css, but in that case the picture's size is not getting smaller, and it just visually small.
How can I change the part w900-h0 via java-script, for example when viewport is 480 the url is changed w300-h0 and so on.
You can use something like this to change image width in document.ready state:
imageWidth = $(window).width();
$("#my_image").attr("src","http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w"+imageWidth+"-h0/running-sml.jpg");
Function $(window).resize() can also be helpful to resize dynamicaly.
Update:
If you want to do this for more than one image:
imageWidth = $(window).width();
$(".imageForResize").each(function() {
$(this).attr("src", $(this).attr('src').replace('w900-h0', 'w'+imageWidth+'-h0'));
});