Forum Moderators: open
i'd like to know if anyone has any thoughts on how i can display images that re-size up to their "actual" size (but not beyond so that they don't degrade) for varying browser sizes. like most topics on this board, it's important that any solution is cross-browser.
i'm building a (width=100%) site to display fine art, so the idea is that i'd use images that are as big as possible (file size permitting) so that users with bigger monitors can see the images as clearly as screen resolution permits, and users with smaller monitors would see the images reduced to fit (and unfortunately take a bit of a file size hit).
using 100% parameters in the img tag (or in the stylesheet), ie and netscape will size images to fit whatever div or td they're in, but obviously don't stop at the image's true size and therefore, the image starts to look very ropey as it magnifies. opera, strangely, does the exact opposite of what i want, which is will size up from the image's true size but won't reduce it all.
so - it looks like a script would be the only answer. ideas would be extremely gratefully received. thanks in advance
miles!
(edited by: tedster at 12:45 pm (utc) on Feb. 24, 2002)
I'm not impressed with the results when browsers size down either - unless the ratio is 1/2 or 1/4 of the original graphic you can also get some funky articfacts. So I'd suggest you optimize a few images at various sizes and then use a script to choose which one to display. This would be a bit more work, but would also save bandwidth and give better results, IMO.
There's an interesting optical effect you could exploit, where smaller versions of an image look good even when oversharpened compared to a larger image.
You may find it easiest to have several sizes of an image available then use a script to detect the screen size and substitute the appropriate image. I posted such a script on WW some time ago when this issue came up before. If you can't find it, let me know and I'll repost it for you.
Here's Marshall's script: in the Liquid Design [webmasterworld.com] thread.
many thanks for your replies. i like the different images for different screen widths idea and i had considered it while i've been thinking about this issue.
however, if it's possible, i believe the re-sizing down solution would have some key advantages:
* firstly - the way i would implement it, anyone using 800 x 600 or above (i believe the great majority of the web audience now) would see the images at their correct, "actual", 100% size. what i'm trying to do is work to give the comparatively small number of 640 x 480 viewers a properly rendered site.
unfortunately designing for that minimum standard keeps the images of the artworks (which is what the site's about) small for everyone. so all i'm proposing is that those viewers get the images browser-resized and everyone else gets the larger more satisfying images that designing for 800px gives you (about 25% bigger images the way my template works). (and anyone who resizes a small window on a big monitor will just see the image magnify until it gets to 100% - which i confess i like just for that).
* secondly, pulling in different images could be excellent for certain applications, but from my point of view the housekeeping would be a big overhead - there's going to be quite a few pages and the site will get handed over to someone else. creating good quality multiple images each time a new page is created would be significant.
* last point - i'm hoping that if i find a way of doing this, the worst that could happen with old browsers/javascript turned off etc is that the image would just display at 100% - if i was relying on javascript or dhtml pulling images into place - wouldn't there be a danger of no image displaying at all?
it's an interesting pay-offs debate, of the kind i know you're all familiar with, the excellent principle of designing with everyone in mind on one hand, but trying to keep the web moving forward for people who can view it on the other.
anyway, none of it matters if i what i want to do isn't possible! so if anyone did have ideas, i would still be extremely grateful - hand of my first born in marriage or similar (fawning thank you email, mention in the credits maybe) if you can help.
greetings from london
miles
This remote js script resizes the image to a fractional size of the container, in this case a div with id=col2:
function col2Image() {
if (is.ns6 ¦¦ is.ns6x) {
availCol2_width = document.getElementById("col2").offsetWidth;
}
else if (is.dom) {
availCol2_width = document.all["col2"].offsetWidth;
}
else if (is.ns4) {
availCol2_width = document.layers["col2"].document.width;
}
}
And the image call itself (set to half of the "col2" container width):
<script type="text/javascript">
<!--
col2Image()
var setImgWidth = (availCol2_width * .50);
// add test routine on maximum setImgWidth here
var image1 = '<img src="whatever.jpg" alt="" width="' + setImgWidth + '"></img>';
document.write(image1);
// -->
</script>
<noscript>
<img src="whatever.jpg" width="220" border="0" alt=""></img>
</noscript>
i really appreciate the script. it amazes me that intelligent people are so willing to post their expertise in such a generous way.
the lame fact is that i have no idea how to complete the commented out "add test routine on maximum setImgWidth here". my experience is limited to occasionally incorporating and hacking other people's scripts (with permission). are there places you could point me to where a halfway intelligent could try and teach themselves?
alternatively, and i don't know if this is outside the guidelines of this board (apologies if so), if you were to complete the script i would very happily make a donation to the charity of your choice, because, altho this is a site i'm doing for family, it would be a great benefit.
either way i'm already indebted.
greetings to 4.8 miles (7.7 km) ENE of Goat Neck.
miles
var longestWt = 220;
if (setImgWidth > longestWt) {
longestWt = setImgWidth;
}
To stand apart from the rest, REALLY blow up a portion/s of the art that offers the greatest interest.
I have found the closer the buyer can get to the art the higher the buy rate.
you're going to be getting really sick of me, but we seem so close, but the script isn't working yet and my debugging skills were quickly exhausted! could you take a quick look and see if you can see what's not working please?
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function col2Image() {
if (is.ns6 ¦¦ is.ns6x) {
availCol2_width = document.getElementById("col2").offsetWidth;
}
else if (is.dom) {
availCol2_width = document.all["col2"].offsetWidth;
}
else if (is.ns4) {
availCol2_width = document.layers["col2"].document.width;
}
}
</script>
<style>
#col1 {width : 30%; float : left; background : red;}
#col2 {width : 40%; float : left;}
#col3 {width : 30%; float : left; background : blue;}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id=col1> </div>
<div id=col2>
<script type="text/javascript">
col2Image()
var setImgWidth = (availCol2_width * .50);
var longestWt = 220;
if (setImgWidth > longestWt) {
longestWt = setImgWidth;
}
var image1 = '<img src="logo.gif" alt="" width="' + setImgWidth + '"></img>';
document.write(image1);
</script>
</div>
<div id=col3> </div>
</body>
</html>
thanks once again.
miles
<style> <script> <script> </head> <div id="col1"> </div> <div id="col2" class="col2class"> <!-- begin IMAGE --> <script type="text/javascript"> <!-- end IMAGE --> </div> <div id="col3"> </div> </body>
<html>
<head>
<title>image max sizer</title>
#col1 {width : 30%; float : left; background : red;}
#col2 {width : 40%; float : left;}
#col3 {width : 30%; float : left; background : blue;}
</style>
</head>
is = {};
is.agent = navigator.userAgent.toLowerCase();
is.ie4 = (is.agent.indexOf("msie 4") != -1);
is.ie5 = (is.agent.indexOf("msie 5") != -1);
is.ie55 = (is.agent.indexOf("msie 5.5") != -1);
is.ie6 = (is.agent.indexOf("msie 6") != -1);
is.ns4 = (is.agent.indexOf("4") != -1 && document.layers);
is.ns6 = (is.agent.indexOf("netscape6") != -1 && is.agent.indexOf("6.1") == -1);
is.ns6x = (is.agent.indexOf("netscape6") != -1);
is.ie = (is.ie4 ¦¦ is.ie5 ¦¦ is.ie55 ¦¦ is.ie6);
is.moz = (is.agent.indexOf("gecko")!= -1);
is.dom = (is.ie5 ¦¦ is.ie55 ¦¦ is.ie6 ¦¦ is.ns6x ¦¦ is.moz);
</script>
function col2Image() {
if (is.ns6 ¦¦ is.ns6x) {
availCol2_width = document.getElementById("col2").offsetWidth;
}
else if (is.dom) {
availCol2_width = document.all["col2"].offsetWidth;
}
else if (is.ns4) {
availCol2_width = document.layers["col2"].document.width;
}
}
</script>
<body bgcolor="#ffffff" text="#000000">
<!--
col2Image()
// set the image width as a fraction of the
// column width in the next line
var setImgWidth = (availCol2_width * .90);
// set the maximum image width in pixels in the next line
var maxWt = 320;
if (setImgWidth > maxWt) {setImgWidth = maxWt};
var image1 = '<img src="logo.gif" alt="" width="' + setImgWidth + '" />';
document.write(image1);
document.write("<br clear=all />");
document.write("maxWt: ");
document.write(maxWt);
document.write("<br clear=all />");
document.write("setImgWidth: ");
document.write(setImgWidth);
// -->
</script>
<noscript>
<img src="logo.gif" width="320" border="0" alt="" />
</noscript>
</html>
note to anyone copying and pasting the routine: the uprights (pipes?) in the sniffer routine "¦" rendered as an upright split in two (ascii /&/#166;), so just search and replace them. (is that a minor glitch with the board?).
anyway, once i'd worked that out, i was in.
it works perfectly in everything i've tested except ns6.0. that got me hacking again with the result that i found something else at [webreference.com...] (am i allowed to mention that) where i found that adding the function winResize() and adding it as onresize event in the body will continually resize the image as the viewer resizes the window. (i think there might be a ns6 solution in there as well, but i haven't got there yet).
so, it's been a very gratifying first trip to webmasterworld. my day job is producing for a (solvent) dot.com, where there's programmers to do things. but since my dad's christmas present became a site for his small business, i've more fully understood the joy of what you can learn and get from boards like this.
in addition to mr jordan's advice, i've found and implemented an excellent free search and spidering script and an email mailing list subscribe/unsubscribe/manage script and despite already knowing quite a lot about stylesheets become more expert than i wanted to on getting past ns4's idiosynchracies, in particular in relation to its total lack of understanding of "float".
anyway hope i can return something to the board, particularly if anybody wants to know more about the things i mention above.
miles
