Adapting image size to visitor's screen resolution

Recently, the percentage of mobile browsers visiting my website has increased.  Some of my pages feature large images in a dynamic format, such as a slide show, or an auto-scrolling panorama.  I'm trying to accommodate mobile browsers (short of designing a dedicated website) by adjusting the image size of these features, based on the visitor's screen resolution. I'd appreciate some feedback regarding the performance of the page at http://mauitradewinds.com/Test/view.htm    This is supposed to redirect the browser to one of three different versions of a scrolling panorama, depending on the visitor's screen resolution.  I'd like to know if it is effective, or if there are specific improvements recommended.
ddantesAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Your page is now quite performant on iPad.

Media queries will not work on actual images which should be detected on the server which then serves smaller images.

A quick one could be

if $(window).width()<500) document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
else document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's close except when I narrow the browser all the way to simulate the phone the text gets lost on the right.

I would suggest using media queries in your css to allow change for different sizes.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 
ddantesAuthor Commented:
Thank you both for your helpful comments.  

padas:  The style sheet for my pages has a min width of 500px, so that paragraphs of text don't turn into tall and narrow columns if the window is narrowed.  Do you think I should reduce that to a narrower min width, to accommodate iPhone?

mplungjan:  Regarding the code example which you offered, I'm unclear whether this is a client-side or a server-side function?   If it is client-side, can you show me how, and where, to insert it into the page at http://mauitradewinds.com/view.htm?  This is not the view.htm in the Test subfolder, but the one which is currently "live" online, and which makes reference to the view.jpg image.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
Just replace the 2 image tags you have now with
<script>
if ...
</script>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Take a look at these projects http://foundation.zurb.com or http://twitter.github.io/bootstrap or http://unsemantic.com 

They are all responsive css/js libraries that can make this easier for you.  Even if you don't use them, you can get a good feel for how  they work.  Your Min width should probably be closer to 320 px https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
0
 
ddantesAuthor Commented:
mplungjan:  Thank you. If I understood correctly, the code would look like this:

<body onload="pwset()">
<div class="nobr">
<script type="text/javascript">
if $(window).width()<500) document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
else document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
</script>
</div>

However, no image appears when the page is loaded.

padas: Thank you.  I'll review those articles.
0
 
Michel PlungjanIT ExpertCommented:
Did you create the viewsmall.jpg and look in the console for any errors I might have typed on my iPhone ?

Also this code relies on the jQuery framework so applies to the new plugin I suggested
0
 
ddantesAuthor Commented:
Yes and no.  I did create viewsmall.jpg, but I failed to check the console, or to invoke the new plugin.  However, the following code appears to work:

<body onload="pwset()">
<div class="nobr">
<script type="text/javascript">
if (screen.width < 500) {
document.write('<img id="pic1" src="images/viewsmall.jpg" alt=""><img id="pic2" src="images/viewsmall.jpg" alt="">');
}
else {
document.write('<img id="pic1" src="images/view.jpg" alt=""><img id="pic2" src="images/view.jpg" alt="">');
}
</script>
</div>

I don't know whether "screen.width" is equivalent to "window.width", so I'm not sure this code accomplishes the desired result.  If not, I'll try using the jQuery which you previously recommended.  Please advise.
0
 
ddantesAuthor Commented:
error consoleThe version of view.htm which we have been working with in this question uses a different javascript plugin to produce the scrolling, not jQuery.reel.  So the html code on the view.htm page is entirely different from the page which is associated with jQuery.reel.

I've attached a screenshot of the error console, which I don't know how to interpret.
0
 
Michel PlungjanIT ExpertCommented:
Which URL?
0
 
ddantesAuthor Commented:
http://mauitradewinds.com/Test/view.htm

Your code is working.  There was an "(" omitted before the "$", and I failed to reference jQuery in the <HEAD> section of the document.

Would you please give this page a test now and let me know if it's performing as you would expect?
0
 
Michel PlungjanIT ExpertCommented:
Apart from loading slow, it scrolls well on iPad and iPhone
0
 
ddantesAuthor Commented:
Thanks to all participating experts for their good advice.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.