Dealing with images in a responsive design

Russinating · 21 Oct 2014 at 09:07

I'm slowly getting round to adding a responsive design to all our websites. I'm relatively new to the whole thing but I'm using "@media only screen and (max-device-width: 480px)".

Now a couple of questions. Images! When in a responsive design they're either tiny or need to be 1000px to look any good/full size. I quickly bodged our first site as there's not many images, so they're all 1000px wide, resized for a desktop site when in a smaller column and then full size when in a responsive design. Even I know that sounds like terrible practice, but what's the alternative? This site in question is hoverfox.com if someone wants to take a gander.

Second is how to revert to desktop view. In Chrome Mobile selecting "Request desktop site" doesn't work as I'm guessing this doesn't function with @media, but only when it's a separate site (mobile.subdomain and such).

Can someone enlighten me?

cotton31 · 21 Oct 2014 at 11:08

I've seen this article before - not sure whether it's of any use?

There are a few articles about responsive images on CSS Tricks.

Mynight · 21 Oct 2014 at 11:47

Sorry I'm not hugely clued up on responsive I tend to run a mobile and desktop that update from a database so I only ever need to change things in the db.

Just wanted to say I love your logo!

AJK · 21 Oct 2014 at 11:57

Russinating: I'm not sure what you're trying to describe, sorry. Your solution to images sounds about right, having them appear at full width and using the full 1000px size. What is making you uncomfortable about this approach? Remember that CSS device-width isn't necessarily the same as the pixel width of the screen, thanks to super high definition (or "retina") displays.

In terms of "reverting to desktop view", you're right that this won't work with media queries. That feature in Chrome mobile just makes Chrome identify itself to the visited as a desktop browser, not a mobile one. It'll still report the device width as a small form factor device. But since the point of responsive design is that you're not supposed to see or need to see the desktop stylesheets on a small screen, I'm not sure why you're trying to do this?

Does that make sense?

Russinating · 21 Oct 2014 at 12:11

@Mynight: Ha, thanks.

@AJK: Ok so as an example, the desktop columns on the site I posted are 313px wide, so ordinarily that's how wide the images within them would be. The way I've done it is I've re-done all the images as 1000px wide and shrunk them in-browser by using width:100%. The image quality actually is better, but across a large, image heavy site it just means the size of every page will be much larger.

This is particularly true of one of our sites, which when including all the pages and blog posts means there's 1000s of images which will also take ages to re-source the original images using this method.

Keeping them as 313px wide, as you say, makes them tiny on the mobile site.

And on the revert issue, just because sometimes I like to do that on my phone. Personal preference really but understand your point, and thanks for explaining the 'why'.

cotton31 · 21 Oct 2014 at 12:51

Wouldn't srcset work for you? From the link I posted?

AJK · 21 Oct 2014 at 13:16

cotton31 said:
Wouldn't srcset work for you? From the link I posted?

Be aware that support for srcset is not fully widespread yet...

http://caniuse.com/#feat=srcset

antijoke · 21 Oct 2014 at 13:29

I'm not sure why you are setting all your images to 1000px.

Russinating · 21 Oct 2014 at 15:39

Because otherwise they look tiny

.

Please advise on the best methods (genuine, not sarcy!). I'm by no means a professional web dev so I'm not really in touch with latest dos and donts, I just do all our business's sites.

antijoke · 21 Oct 2014 at 16:03

Tiny in what way?

Sorry, I'm just not understanding the problem here, images are going to be smaller on a mobile device, do you not want that happen?

JimAroo · 21 Oct 2014 at 18:25

CSS frameworks such as Bootstrap and Pure scale images so they fit within their parent element:

PHP:

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

Though the images may look stretched if their parent element is much larger than the image itself.

More ideal solutions but are currently held back by poor browser support:

- imgset (a polyfil is available picturefill which may be worth a look)
- Picture Element

You could detect the useragent and serve the images based of this but this isn't an ideal solution either.

I don't think there is one correct answer.

Tripnologist · 26 Oct 2014 at 17:32

IMO, img srcset and the picture element are ready for prime time, provided you're using a polyfill like picturefill. (more img srcset than picture though)

With img srcset, you define a set of sources and it's up to the browser to 'choose' the right one based on device and connection.
Theoretically, what this means is that if you had image sources declared for say 320vw, 800vw and 1300vw and the user is on wifi or 4G with a retina display mobile, the browser should choose the largest, but if they were on EDGE or 3G, it should choose one of the smaller ones.

The picture element is similar, but much more strict in that the browser gets no 'say in the matter' and will use whatever src you've told it to. As such, the picture element is best used for art direction.
ie: You might change your huge 16:9 hero image to a smaller 4:3 image if the user is on mobile in portrait mode.

dmsims · 27 Oct 2014 at 17:31

You could use Lazy load

Russinating said:
@Mynight: Ha, thanks.

@AJK: Ok so as an example, the desktop columns on the site I posted are 313px wide, so ordinarily that's how wide the images within them would be. The way I've done it is I've re-done all the images as 1000px wide and shrunk them in-browser by using width:100%. The image quality actually is better, but across a large, image heavy site it just means the size of every page will be much larger.

This is particularly true of one of our sites, which when including all the pages and blog posts means there's 1000s of images which will also take ages to re-source the original images using this method.

Keeping them as 313px wide, as you say, makes them tiny on the mobile site.

And on the revert issue, just because sometimes I like to do that on my phone. Personal preference really but understand your point, and thanks for explaining the 'why'.

bcjames · 1 Nov 2014 at 11:15

There are plenty of options using just css to display images differently via media query.

Are you trying to show the same layout on the mobile version, or does the page layout adapt to the smaller screen?

Are you setting up a responsive desktop site that adapts to browser window size, and then changes layout at 480px? From looking at your link, none of it appears to be responsive yet, but it's quite a simple site so shouldn't take much to convert it.

Out entire portfolio site is fully responsive using just width:%, max-width: px, and applying classes and ids to either image or their container.

James

Tweaker · 2 Nov 2014 at 12:14

A colleague of mine made Imager.js, might help you, https://github.com/BBC-News/Imager.js

marc2003 · 17 Nov 2014 at 00:39

i've never used smartphone or tablet so i have no idea how things look on a small screen and i'm also new to website making in general. i dabbled with basic html about 6 years ago and started again last week. i've found a "responsive" css template and i'm happy with how it looks in the "responsive design view" in firefox. the basic kind of CSS that JimAroo posted seems perfectly ok. is it fair to assume that when people encounter an image too small to see clearly, they'll just zoom in?? sorry for the dumb question but like i say, i'm out of the loop.