Dealing with images in a responsive design

Russinating

Russinating

Russinating

Soldato
Joined
27 Dec 2005
Posts
17,315
Location
Bristol
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?
 
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!
 
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?
 
@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'.
 
Because otherwise they look tiny :p.

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.
 
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?
 
Last edited:
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. :(
 
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.
 
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'.
Click to expand...
 
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
 
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. :p
 
You must log in or register to reply here.
Back
Top Bottom