Dealing with images in a responsive design

Soldato
Joined
27 Dec 2005
Posts
17,292
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?
 
Soldato
OP
Joined
27 Dec 2005
Posts
17,292
Location
Bristol
@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'.
 
Soldato
OP
Joined
27 Dec 2005
Posts
17,292
Location
Bristol
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.
 
Back
Top Bottom