Best way to display large images on a mobile-friendly forum

I’m designing a mobile-friendly forum style, and I’m a little stumped as to the best way to deal with embedded images. Anyone who runs a forum has probably noticed that their users like to use the IMG take to embed images directly, not just as attachments. This poses a real problem on mobile, though, because you can’t just load these images (some of them quite sizable) every time someone opens a thread page on their phone. This is a special problem because the usual solution–to create different images and load them responsively–doesn’t apply here, because the users are embedding the images, not the developer.

I can think of a few options here, such as hacking up the code to display a link rather than the image itself, using a script to only load each image as it scrolls into view, or both. But I’m not sure if this is deal, or if I’m missing a better solution.

Has anyone here had any experience with this issue, and if so, what did you end up doing, and how has it worked out?

Why can’t you just parse the post, download the embedded images, resize them and then serve them appropriately sized perhaps with a link to the full sized?

A less involved way to do this would be to set the img tag’s size properties on the fly.

On any even moderately active forum, people are embedding images all the time, so this is both a lot of processing to do on the server-side, and a fair bit of work, programmatically speaking.

That wouldn’t save any bandwidth. Sizing them down in the sense of merely fitting on the screen is the easy part: it’s making sure mobile devices aren’t downloading far more than they need to that’s the problem.

Well, not much luck here, I guess.

Thankfully, I hit upon a solution on my own. I was planning to help matters a bit by installing a script that only loaded thread images when they were scrolled into view, at least, which is a nice start. If someone wants to keep things really simple and go that route, echo.js is a good solution, and very lightweight.

From there I decided to simply replace all embedded images with a blank image (either an empty src or a small, invisible single pixel image), storing the real image URL in a data attribute, so it won’t be loaded automatically. So by default the user sees a simple “Click Here to Load Image” link which, when clicked (just a few lines of JavaScript) loads the data attribute value into the image’s src. Voila.

I’d still be interested in any other methods people have found to achieve this sort of thing.

From there I decided to simply replace all embedded images with a blank image (either an empty src or a small, invisible single pixel image), storing the real image URL in a data attribute, so it won’t be loaded automatically. So by default the user sees a simple “Click Here to Load Image” link which, when clicked (just a few lines of JavaScript) loads the data attribute value into the image’s src. Voila.

Sounds like a good compromise. :slight_smile:

Maybe you could default it to automatically show the images for larger devices but just keep the blank image for mobile.

There are a couple of other techniques mentioned here that may be of interest.

Yup, that’s the idea. Only question that remains is which way to lean on the tablet version.

Thanks for those links. The first is interesting, though I do worry about the processing on even a moderately sized forum. The downside of dynamically resizing huge images (to stop the layout from breaking) is that people become pretty careless about embedding massive ones. That’s the problem with any totally robust solution, I think, though for some sites it might still make sense.