php - Rewrite img src dynamically: get images from a different directory with a higher resolution -

i'm wondering best approach following problem, keeping page speed in mind.

1. a connector syncs product data (including product images) retail software php-based ecommerce solution magento.
2. this connector syncs product images @ 550x550 resolution.
3. there no way alter connector or grab larger images retail solution.
4. the person in question has directory higher resolution images -for arguments sake- match filename original file -optional- size suffix.

how can automatically , dynamically, on page load / image load, replace low resolution image src high resolution image src?

in short: how replace src="/path/to/low/resolution/image/shoe1.jpg src="/path/to/high/resolution/image/shoe1-1024x1024.jpg" dynamically without writing rules single image. in: shoe2.jpg > shoe2-1024x1024.jpg should work

additionally: -not- have check missing images in high resolution image directory. want -always- replace low resolution source url.

i thinking replacing values through javascript with/without jquery. job?

here's jquery solution:

var highrezpath = "/path/to/high/resolution/image/",     appendtofilename = "-1024x1024";  $(document).ready(function(){     $('img').each(function(ind, img){        var $img = $(img),            osrc = $img.attr('src').split('/'),            filename = osrc[osrc.length-1].replace('.', appendtofilename +'.'),            newsrc = highrezpath + filename;         $img.attr('src', newsrc);     }); }); 

see in action here (use web inspector see altered src attributes)