3

Ask DN: Responsive Images

over 6 years ago from , Product Designer

I'm just curious what method people use for responsive images?

There's loads of jQuery plugins/html5 options but I've always just done below:

img { max-width: 100%; height. auto; }

5 comments

  • Pedro Pimenta, over 6 years ago

    I think you're mixing things up.

    What you do in CSS is only to readjust the image to its container, but you're always fetching the same image.

    What the jQuery plugins do is load different size images depending on the resolution. It means that you have to prepare several images instead of just one, and let the JS deal with loading images. This is good for mobile users, as it's supposed to save a lot of bandwidth.

    With this, you can give small images to mobile phone users but still have big ass gorgeous images for desktop clients.

    I hope I'm not mistaken about your question.

    4 points
  • Aiden GuinnipAiden Guinnip, over 6 years ago (edited over 6 years ago )

    http://www.imgix.com/

    1 point
  • David SurianoDavid Suriano, over 6 years ago

    I haven't used this yet, but it looks very promising.

    High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

    https://github.com/aFarkas/lazysizes

    0 points
  • Andy LeverenzAndy Leverenz, over 6 years ago

    https://github.com/scottjehl/picturefill

    If you're a WordPress user you can let WP handle the image generation for you. I've implemented picturefill on a new blog I am launching in the future. Each image added to any post gets generated for multiple breakpoints in my responsive design. As the device width changes picturefill does the magic of swapping out images. Amazing results so far.

    0 points
  • Stefan ZweifelStefan Zweifel, over 6 years ago

    Chris Coyier made a great article about responsive images some weeks ago:

    Responsive Images: If you’re just changing resolutions, use srcset.

    tl;dr: If you just wan't to serve different image resolutions, use srcset in img-tag.

    0 points