SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile "responsive" Images on The Fly

    I'm turning a static site into a mobile site via media queries but I realize I need to replace some images so that they're more mobile friendly. Now this isn't an issue with background images but full blown images in the HTML I'm not sure what the best approach is. I've thought about it and my options are to either load it in the initial page load and just display it none until it hits my media query or option 2 is to load it via JS and insert it into the page once the screen hits a certain width. Are there other options? Is there one preferred over the other?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Howdy_McGee View Post
    I'm turning a static site into a mobile site via media queries but I realize I need to replace some images so that they're more mobile friendly. Now this isn't an issue with background images but full blown images in the HTML I'm not sure what the best approach is. I've thought about it and my options are to either load it in the initial page load and just display it none until it hits my media query or option 2 is to load it via JS and insert it into the page once the screen hits a certain width. Are there other options? Is there one preferred over the other?
    Hi,

    It depends on what your criteria are for the mobile image?

    If you are just rescaling the image to a smaller size then you can use the same image and adjust its dimensions through css and media queries. Of course that assumes that you don't mind serving the higher file-size image to mobile. If on the other hand you are looking for a lighter weight image in the page for mobile then setting the image to display:none will not work as most devices will load all images in the html whether they are display:none or not and you get two hits instead of one. (There are some tricks such as setting the parent to display:none instead of the image but is not consistent between devices.)

    If you are talking about images for retina devices then read this article.

    More on responsive images here:

    http://alistapart.com/blog/post/picture-element-qa
    http://dev.opera.com/articles/respon...mages-problem/
    http://css-tricks.com/which-responsi...hould-you-use/

    At the moment I prefer to use the same image optimised as low as possible and use for all devices.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    At the moment I prefer to use the same image optimised as low as possible and use for all devices.
    Same here. If you make the image really large, but save at a very low quality, the file size is small but the image still looks good when you resize it to fit on the page—as discussed in Paul's first link.

    There are new elements/attributes coming out that handle this situation, but browser support for them isn't wide yet, and I'm still not convinced that they are very useful.


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
  •