Welcome to WebmasterWorld Guest from 54.81.220.239

Forum Moderators: not2easy

Message Too Old, No Replies

Opening an image so mobile users can zoom

     
2:51 am on Jun 5, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1115
votes: 109


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?
3:27 am on June 5, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9884
votes: 967


I just use the thumbnail (your 300w image) to link to the full size and let the user back button to resume. You can get fancy but why? The users are already used to hitting back after looking at a larger image...
4:26 am on June 5, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1115
votes: 109


How big would you make the original, tangor? I'm not going to leave it at 5MB, obviously... that would take too long to open, and take up WAY too much server space
5:19 am on June 5, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4344
votes: 292


A 300px wide image is probably adequate for a small screen and for a thumbnail anchor on desktop. You could use the smaller image to link to a larger image in a modal overlay so they don't need a back button. Some time ago, one of our members shared several CSS-only modal overlay examples you could try out for that: [webmasterworld.com...]

I'd set the larger image to
max-width:100%;
and display it in a div to contain the image with some margin.
6:41 am on June 5, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1115
votes: 109


That's awesome info from @birdbrain, thanks!

What size would you format the larger full-size image to? I'm thinking 900px width?
8:05 am on June 5, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9884
votes: 967


I'm thinking 600px as the "zoom" will not degrade the image that much. If you are really high quality, do it desk top, else think small screens, a third smaller, and go from there. The human eye is VERY forgiving. Sadly, host storage space and cumulative bandwidth are NOT.

BESIDES, you really don't want to give away the barn with the horse, do you? There's a small niche of "buy it now" 5mb imaging out there if the product is actually worth it.
8:07 am on June 5, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9884
votes: 967


Secondarily you can offer stepped image sizes. Look at that wiki thingie out there we all compete with for examples of "sizes".