Making images stretchable

[csdude55]

I'm working on making my classifieds more mobile friendly, and right now I'm working on those pictures that users submit with their ad.

When they submit the ad, I store it in 3 sizes: a thumbnail size of 70x70, a page-friendly size with 300px width, and I store a larger copy that's 1000px width.

I currently have it set so that the 300px version shows on the page, and if the user clicks on it then I open a page via Ajax that loads the larger copy at 90% of their viewport width (so it's layered on top of the main page) with a maximum width of 1000px.

What I'm noticing, though, is that mobile users want to be able to stretch this image to zoom in. But that doesn't really work out well, it stretches the entire page and still pixelates the 1000px image.

What do you recommend doing as an alternative? I'm considering storing their original size instead of shrinking it to 1000px, and then in the ajax script maybe use an iFrame so that it'll stretch within the frame?

Also, the original images are often HUGE (why do these phones need to take a 200MP photo that takes up 40MB?!), and that requires an unrealistic amount of storage. What size should I really make them?

[londrum]

You could try using the srcset attribute on the image tag, which lets you include multiple versions of the same image, and the user’s browser is supposed to select the most suitable one

[thecoalman]

Also, the original images are often HUGE (why do these phones need to take a 200MP photo that takes up 40MB?!),

I thought that was a typo when I first read it. Take a look at plupload, it will resize client side. to a desired dimensions.

[tangor]

200MP photo that takes up 40MB?

Best to have it all the first time around than not enough.

It falls on your end to decide the dpi and width (two different things) that you display on a SCREEN which is generally fixed at 96dpi.

At some point "enough is enough" and if the user wants more info than that they should then contact the lister of the classified personally for that information---and picture details.

Can't be everything for the user as a lister of classifieds all the time, but you can be more than ENOUGH to set them on the right path to get that information.

Then again, you can also work an extra deal (for money) to the lister to provide all these zooms et al for x$ as this is above and beyond the original agreement.

OR, break open your piggy bank to store 40mb images that can "zoom" to heart's content and burn a hole in your wallet.

[edited by: not2easy at 11:42 am (utc) on Jan 15, 2024]
[edit reason] See Charter [webmasterworld.com] [/edit]

[csdude55]

I don't really have a problem resizing it on my end, I process it through Perl and use the Imager module. What's the maximum size that you all resize your user-submitted images to for zooming?

And how do I get it to stretch within an element, without stretching the entire page along with it?

Or should I just open it to the 90% width on desktop, and open it in a new tab on mobile?

[not2easy]

how do I get it to stretch within an element, without stretching the entire page along with it?

If your container elements restrict the width of the contents where the image is seen, you can set the image container to max-width: 100%; (but that could be affected by other settings.)

If you'd care to share the relevant html and css in the CSS forum, it can be done.

[thecoalman]

What's the maximum size that you all resize your user-submitted images to for zooming?

I use max 2000*2000, whichever is greater. This doesn't give you much zoom detail on 1080p monitor but it effectively allows someone to zoom on phone. If I had less of a concern for disk space I'd use 4000.

Even with .jpg images smaller than max dimensions you can resample them to conserve disk space. The cameras are using a very high quality setting. and setting the quality at a respectable 85% can substantially reduce the file size. .