SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,653
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wwb_99 View Post
    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?
    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.

    Quote Originally Posted by wwb_99 View Post
    A less involved way to do this would be to set the img tag's size properties on the fly.
    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.

  4. #4
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    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.

    http://adaptive-images.com/
    http://www.bluelinemedia.co.uk/web-d...website-images

  6. #6
    SitePoint Wizard TWTCommish's Avatar
    Join Date
    Aug 1999
    Location
    Pittsburgh, PA, USA
    Posts
    3,910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Maybe you could default it to automatically show the images for larger devices but just keep the blank image for mobile.
    Yup, that's the idea. Only question that remains is which way to lean on the tablet version.

    Quote Originally Posted by Paul O'B View Post
    There are a couple of other techniques mentioned here that may be of interest.

    http://adaptive-images.com/
    http://www.bluelinemedia.co.uk/web-d...website-images
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •