This is for a Classifieds site.

I have it set for the user to upload an image, usually from their phone. Thanks to the glory of high-resolution mobile phones, the most commonly uploaded size is 4032x3024, and can be well over 5MB in filesize.

(How many mobile users seriously need to print their photo at 20" x 15"? The default phone setting should be more like 1600x1200, and let them increase if they need to! But anyway...)

They upload the photo[s], then when they submit it I run a Perl script where I resize the photo to 300px wide and calculate the height. So the saved copy on my end comes out MUCH smaller... more like 15kb.

But what I would like is for the user to be able to click on the 300px image to see a larger copy. I originally wrote an Ajax script so that it would center on the page, have its own X button, etc, but now I'm not so sure... my phone's viewport is only 360x640 (Samsung S7), so the 300px wide image already fills up the screen. But I don't want to open it in a new tab or anything like that, either, because that would be sloppy and ugly on a desktop.

How would you guys (and gals) suggest that I handle this? I'm thinking, save a copy of the image that's 900px wide, then on desktop use the Ajax script to open the image, and on mobile... I guess open it in a new tab?