SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Clueless About Resizing Images

    For dynamic/responsive sites, where an image is set to be the full width of the screen (width:100%) and will dynamically resize as the user changes browser width... why do they advise that the original image should be as large as possible?

    Is it because scaling an image down doesn't degrade the quality as much as scaling up does?

    That intuitively feels like it would be the case but my recent experiments with scaling images down using editing software always produce blurry results.

    ...Whereas somehow when I see a browser scaling down an image it seems like it retains its quality. Is that because browsers auto-sharpen images or something?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Fretman View Post
    why do they advise that the original image should be as large as possible?

    Is it because scaling an image down doesn't degrade the quality as much as scaling up does?
    The more pixels in an image, the more the browser has to work with if the image has to be scaled up. A nice trick is to make the dimensions of the image quite large but the quality relatively low (like 30%). That way, no matter what size the viewport, there will be plenty of pixels for the browser to play with.

    This is also handy for retina displays, which will make images look blurry unless there are lots of extra pixels to play with.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    A nice trick is to make the dimensions of the image quite large but the quality relatively low (like 30%). That way, no matter what size the viewport, there will be plenty of pixels for the browser to play with.
    Do you mean it's a nice trick because it keeps file sizes down? I don't understand how having only 30% quality could look good. Unless you mean that the browser hides the imperfections as it scales it down, because there are so many pixels?

    If I use a 1920px width image on my site - set to width:100%... And then I view the page with an 800px viewport... will it look better or worse than if I'd used a 1280 width image? I had presumed that since it takes more resizing to get from 1920 to 800 that it would look worse, but perhaps the extra pixels compensate for that?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

    Clueless About Resizing Images

    Yes, a nice trick because the file size is small while the image still looks good at any size and on any resolution.

    Here's a nice article about it:

    http://blog.netvlies.nl/design-inter...na-revolution/

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, a nice trick because the file size is small while the image still looks good at any size and on any resolution.

    Here's a nice article about it:

    http://blog.netvlies.nl/design-inter...na-revolution/
    Thanks!

    I read in most places that you should always display images at their original size, to avoid quality loss.

    Is this 'trick' just better for dynamic/responsive images or is it good to do for all images? When the pixels are available, why not always use x2 size images and let the browser scale them down?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Fretman View Post
    When the pixels are available, why not always use x2 size images and let the browser scale them down?
    These days, with retina screens, that's a good policy, as far as I can see. There is a lot of work being done at the moment to devise an HTML solution for dealing with responsive/retina images, such as the <picture> element, but it's a hot debate with no obvious resolution (hehe) in view yet.

    The technique I described and linked to seems to work really well in my experience, except for images that contain text. It doesn't seem to work too well for those ... though I'd question why text is in the image anyway. If it's a picture of a sign, then fair enough, but for a banner or similar, the text should be real text anyway.


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
  •