View Full Version : Two different versions of an image: one for desktop, one for mobile...how to code it?

Jan 2nd, 2012, 07:32 PM
I've been told by a number of people that I can have a higher and a lower resolution version of an image and do something in the coding that makes one of them load if it's a regular computer and the other one load if it's a mobile device. I have Googled and can't find how to do this.

My mom is dead-set on using several images on the mobile version of her site, which is making the site too big according to the mobile validator that I ran the site through. I made low-res versions of the images, but don't know how to set the site to load the right one. I know how to *hide* one or the other, but apparently even if the css lists an image as "display:none;" it still loads the image and counts toward the size of the page.

Very frustrated, please help!

>^,, (http://opalcat.com)^<

Jan 2nd, 2012, 08:39 PM
Hi OpalCat,

I'm still learning this, too, but I have found something to use that seems to work, but it uses javascript. I think it would be good for us to learn about @media css so that without any help from a script the different css codes will load. Even though I'm learning, I still like to feel like I am actually learning and expanding my possibilities at the same time. If you want to try this, simply copy it just beneath your meta tags at the top of your page.

It's a sniffer script. All you need to do is create two different style sheets (I've named mine "desktop" and "mobile." Original, huh? lol!)

If you go to my main site here (http://www.theeagleextra.com/wordic/wordic.php) with a desktop computer, it will look normal. If you visit it with a smartphone, you won't notice it, but it's running off entirely different css. One thing to keep in mind, where a normal page would use font sizes such as 14px, a mobile site will use font sizes such as 36px -- for the same line of text. So far, I've determined that we need to make things bigger for mobile devices. Even though they have smaller screens, they're still displaying in screen resolutions comparable to desktop PCs. The reason being, an individual pixel on a mobile device is much smaller than a pixel on a regular monitor.

Here's what I'm using now, at least until I learn more:

<link rel="stylesheet" type="text/css" href="YOUR_URL/desktop.css" />

<script type = "text/javascript">
var sniffer=new Object();
var agentNow=navigator.userAgent.toLowerCase();
sniffer.windowsce=(agentNow.search("windows ce")>=0);

for(var mobile in sniffer)
document.write('<link rel="stylesheet" type="text/css" href="YOUR_URL/mobile.css">');


Notice how it works. All browsers read the first css call line. However, only the mobile devices thread themselves through the css to arrive at the mobile css -- designed just for them.

--Kevin :)


Jan 2nd, 2012, 09:28 PM
I actually have two separate set of pages on two different domains for the regular and mobile site, though all the content is via includes and those are in a folder that has a simlink on the other site's folder, so to change content on both sites I just edit the include file in one place. There is one style sheet for the regular site and a different file for the mobile site. I had to make a second set of pages though, because of the images used in the layout--I could hide them via CSS but not make them not load. That's the problem I'm having with the images she wants to have on the mobile site, too--I can hide it via css, but the browser still loads it, so if it is, say, a 15kb image, even though it doesn't show, the size of the page increases by 15kb. Apparently mobile pages aren't supposed to be more than, I think, 20k total. That's what the validator I used said, anyway.

Also, apparently most mobile browsers don't use javascript, so a javascript solution won't work.

By the way, you mentioned font sizes in px... from what I've read it's bad to use fixed sizes for anything on a mobile site. Use either percentages or ems. So for font size on my mom's site I use 1.1em and it works pretty well. (The validator kicked it out as an error when I listed a font-size in px.)

So anyway, I don't need a script or anything to detect and use a different css because the relevant pages already reference the proper css file. I would like a way to detect if it's mobile and automatically load the mobile site's url, though. That would be handy. Right now I just have a button at the top that says "Mobile site click here."

But mainly right now I want to know the code you put in the IMG tag that loads one image if it's a normal browser but a different image if it's a mobile browser. I know I've seen the code before--recently, too--I just can't remember where or what it was, and can't find any Google search terms that pull up anything like what I need.

Jan 2nd, 2012, 09:45 PM
Here's the code generated by CodingForums VIPStephan about a month ago or so. Copy this into a blank page and view with your browser. Drag the right side of the active browser window in and out and watch the colors change. I think this is what you're looking for. You can apply this to your site, and have different sizes of your images swap out based upon the width of the window. I think this is the correct way to go -- over using a dead-in-the-water script if scripting is disabled.

BTW: thank you for the heads up on font sizes for mobile. I'm looking into that now that you've mentioned it. Thanks! :)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>CSS3 media query test</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
#div1 {
height: 100px;
width: 45%;
background: lime;
float: left;
padding: 10px;
#div1:after {content: "float: left;";}
#div2 {
height: 100px;
background: red;
padding: 10px;
@media screen and (max-width: 800px) {
#div1 {
background: aqua;
float: right;
#div1:after {content: "float: right;";}
#div2 {background: yellow;}
@media screen and (max-width: 500px) {
#div1 {
float: none;
background: maroon;
color: white;
width: auto;
#div1:after {content: "float: none;";}

<div id="container">
<div id="div1">div 1</div>
<div id="div2">div 2</div>



Jan 2nd, 2012, 09:55 PM
That code doesn't have anything to do with displaying inline images, though.

Jan 3rd, 2012, 12:03 AM
Yeah, media queries don’t quite do the trick if you have HTML images. They are cool with CSS background images but <img> elements always have the same image path in the src attribute’s value, regardless of device. Although I don’t like user agent sniffing this would probably the best choice here. And if you don’t want to use JavaScript then I think you can also do a UA check with PHP (serve different content on the same site/domain) or with .htaccess (redirect to separate mobile site/domain).

Jan 3rd, 2012, 12:12 AM
I guess I didn't think of that VIPStephan, but you're right. I was successful with media queries while using images because I was calling them and implementing them with css. Thanks for the reminder.



Jan 3rd, 2012, 03:58 AM
Yeah, media queries donít quite do the trick if you have HTML images. They are cool with CSS background images but <img> elements always have the same image path in the src attributeís value, regardless of device. Although I donít like user agent sniffing this would probably the best choice here. And if you donít want to use JavaScript then I think you can also do a UA check with PHP (serve different content on the same site/domain) or with .htaccess (redirect to separate mobile site/domain).

Can you tell me how to do this? Say the images are image1.jpg and image1_m.jpg (the mobile version)