Thumbnail Expansion Technique

#1 October 1st, 2008, 05:05 AM

On my main page I have a small picture - it's actually too small to
be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:

<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />

This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA

#2 October 1st, 2008, 05:15 AM

In article <MPG.234ca2fa6e9bda89989720@news.cox.net>,
mrc2323@cox.net (Mike Copeland) wrote:

Quote:

On my main page I have a small picture - it's actually too small to
be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:
>
<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />
>
This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA

If you do this, you are running the risk of making people download
nearly a MB when they might even not be interested in filling their
screens. In any case, who has such spare screen space that needs a pic
of 1 MB to fill?

--
dorayme

#3 October 1st, 2008, 05:25 AM

On my main page I have a small picture - it's actually too small to

Quote:

be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:

<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />

This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA

>
If you do this, you are running the risk of making people download
nearly a MB when they might even not be interested in filling their
screens. In any case, who has such spare screen space that needs a pic
of 1 MB to fill?

Fair enough, but is there some sort of compromise that would let my
users actually _see_ the picture? As it is now, I can't set the length
and width values big enough to show the picture directly (it'd take too
much space on the main page), but I'd like to offer the option to see
the picture large enough as to make some sense out of it. I just want
to expand the size enough that my users could make sense of that part of
my site...

#4 October 1st, 2008, 05:35 AM

On my main page I have a small picture - it's actually too small to

Quote:

be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:

<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />

This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA

>
If you do this, you are running the risk of making people download
nearly a MB when they might even not be interested in filling their
screens. In any case, who has such spare screen space that needs a pic
of 1 MB to fill?

Fair enough, but is there some sort of compromise that would let my
users actually _see_ the picture? As it is now, I can't set the length
and width values big enough to show the picture directly (it'd take too
much space on the main page), but I'd like to offer the option to see
the picture large enough as to make some sense out of it. I just want
to expand the size enough that my users could make sense of that part of
my site...

#5 October 1st, 2008, 07:25 AM

On Tue, 30 Sep 2008 21:25:18 -0700, mrc2323@cox.net (Mike Copeland) wrote:

Quote:

On my main page I have a small picture - it's actually too small to
be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:
>
<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />
>
This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA

You can control the size of the image by adjusting the jpeg quality value,
~70 is good enough for a web page, offer a high quality download as an
option.
....

Quote:

Fair enough, but is there some sort of compromise that would let my
>users actually _see_ the picture? As it is now, I can't set the length
>and width values big enough to show the picture directly (it'd take too
>much space on the main page), but I'd like to offer the option to see
>the picture large enough as to make some sense out of it. I just want
>to expand the size enough that my users could make sense of that part of
>my site...

Have a look at how I did the thumbnail to large image on:

http://bugsplatter.id.au/firewall/ and
http://bugsplatter.id.au/bugs.css

I can't remember where I saw this explained, it's based on concepts from the
many CSS technique pages out there -- with CSS the big image is hidden as a
1px image until you mouseover the related thumbnail image.

Grant.
--
http://bugsplatter.id.au/

#6 October 1st, 2008, 08:35 AM

In article <MPG.234ca9c5d80990d989723@news.cox.net>,
mrc2323@cox.net (Mike Copeland) wrote:

Quote:

On my main page I have a small picture - it's actually too small to
be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:
>
<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />
>
This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA

If you do this, you are running the risk of making people download
nearly a MB when they might even not be interested in filling their
screens. In any case, who has such spare screen space that needs a pic
of 1 MB to fill?

>
Fair enough, but is there some sort of compromise that would let my
users actually _see_ the picture? As it is now, I can't set the length
and width values big enough to show the picture directly (it'd take too
much space on the main page), but I'd like to offer the option to see
the picture large enough as to make some sense out of it. I just want
to expand the size enough that my users could make sense of that part of
my site...

First, let's get clear on the characteristics of the enlarged pic you
want to make available. You should prepare two images, one a thumbnail,
small in px size but not necessarily high in compression, its physical
size will guarantee a small file size. 56 by 70 is very small, does it
have to be that small? Note that if you make it a bit bigger, you might
take the pressure off people needing to see it bigger still. That is a
great saving all things considered. That is one thing.

Second, the enlarged image. You can make available one that is about
600-800px wide and use a medium to low sort of compression and you will
mostly be able to keep under 100K and have it quite respectable in
general. Do not use compression to bring file size down at the expense
of crappy quality, make the pic smaller in px size instead as this is
the most dramatic thing you can do to reduce file size. There are no
fixed rules, you will develop judgement.

Third, the method of delivery. This is what I almost always prefer (for
what it is worth): make the thumbnail or its caption or accompanying
reference a link to a larger pic. This larger pic can be simply linked
to directly or via being embedded in another HTML page.

But there are other techniques which can be used whereby you load the
two pics up and one is brought into view on hovering. Is this what you
want?

--
dorayme

#7 October 1st, 2008, 03:45 PM

Gazing into my crystal ball I observed Grant <g_r_a_n_t_@dodo.com.au>
writing in news:ec56e4h8ul1pemraqf55uid2rh89l1r1uo@4ax.com:

Quote:

Have a look at how I did the thumbnail to large image on:
>
http://bugsplatter.id.au/firewall/ and
http://bugsplatter.id.au/bugs.css
>
I can't remember where I saw this explained, it's based on concepts
from the many CSS technique pages out there -- with CSS the big image
is hidden as a 1px image until you mouseover the related thumbnail
image.
>
>

It's a nice idea, and I've used it before, but, it requires the large
image be downloaded by the client at the same time the small image is.
Without CSS, both images are shown. I'm doing something similar to
Brucie's Butterflies - where thumbnails and a larger image are on the
same page, and the larger image has a link to an even bigger image. See
http://trishhouse.com/bedroom.php?pic=59 .

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

#8 October 1st, 2008, 03:55 PM

Mike Copeland wrote:

Quote:

>dorayme wrote:
>>
>If you do this, you are running the risk of making people download
>nearly a MB when they might even not be interested in filling their
>screens.

>
Fair enough, but is there some sort of compromise that would let my
users actually _see_ the picture?

Yes - do what Nielsen calls Relevance-Enhanced Image Reduction
http://www.useit.com/alertbox/9611.html

Scroll down the page for the details.

You need a graphics editor to do this, but you should already have one
if you're putting your own pictures on the web. Make a thumbnail image
of the cropped piece and use that to link to the large image, though
952KB is too weighty even for an enlargement, IMO. You should reduce
that down to something more tolerable, too.

--
Berg

#9 October 1st, 2008, 05:25 PM

On my main page I have a small picture - it's actually too small to

Quote:

be useful. I only have it there to show that there's something to look
at, but I don't know how to "expand" it so it can be seen in a
reasonable size. Here's my code so far:

<img src="IMG_0492.jpg" width="56" height="70" align="left"
hspace="5" />

This picture consumes the whole screen (it's 952KB) when I click on
the file in Explorer, and I want the same sort of view if the user
clicks on it. I know some sites have this capability, but I can't see
how their code achieves the effect. How do I do this? TIA
>
If you do this, you are running the risk of making people download
nearly a MB when they might even not be interested in filling their
screens. In any case, who has such spare screen space that needs a pic
of 1 MB to fill?

Fair enough, but is there some sort of compromise that would let my
users actually _see_ the picture? As it is now, I can't set the length
and width values big enough to show the picture directly (it'd take too
much space on the main page), but I'd like to offer the option to see
the picture large enough as to make some sense out of it. I just want
to expand the size enough that my users could make sense of that part of
my site...

>
First, let's get clear on the characteristics of the enlarged pic you
want to make available. You should prepare two images, one a thumbnail,
small in px size but not necessarily high in compression, its physical
size will guarantee a small file size. 56 by 70 is very small, does it
have to be that small? Note that if you make it a bit bigger, you might
take the pressure off people needing to see it bigger still. That is a
great saving all things considered. That is one thing.
>
Second, the enlarged image. You can make available one that is about
600-800px wide and use a medium to low sort of compression and you will
mostly be able to keep under 100K and have it quite respectable in
general. Do not use compression to bring file size down at the expense
of crappy quality, make the pic smaller in px size instead as this is
the most dramatic thing you can do to reduce file size. There are no
fixed rules, you will develop judgement.
>
Third, the method of delivery. This is what I almost always prefer (for
what it is worth): make the thumbnail or its caption or accompanying
reference a link to a larger pic. This larger pic can be simply linked
to directly or via being embedded in another HTML page.

Well, as a novice at this I'm not sure how I want to do this. 8<{{
Basically, I want to have the small picture on the main page be
clickable (perhaps with a "Click to Enlarge" caption) and have that
action produce a larger view of the picture. It could be another window
that's presented...I dunno. I just want the used to be able to see the
picture's detail better than how it appears on the main page.
I suppose a scrollover would work, too. I just don't know how to
code for these options - nor what to use with what I have so far.

#10 October 1st, 2008, 05:35 PM

Mike Copeland wrote:

Quote:

Well, as a novice at this I'm not sure how I want to do this. 8<{{
Basically, I want to have the small picture on the main page be
clickable (perhaps with a "Click to Enlarge" caption) and have that
action produce a larger view of the picture. It could be another window
that's presented...I dunno. I just want the used to be able to see the
picture's detail better than how it appears on the main page.

Is there a reason you don't just:

<a href='larger_image.jpg'><img src='thumbnail.jpg' width='xx'
height='yy' alt=''></a>

?

#11 October 1st, 2008, 05:55 PM

Gazing into my crystal ball I observed Scott Bryce
<sbryce@scottbryce.comwriting in
news:xNadnYwrOo-iOH7VnZ2dnUVZ_vCdnZ2d@comcast.com:

Quote:

Mike Copeland wrote:

Quote:

> Well, as a novice at this I'm not sure how I want to do this.
> 8<{{
>Basically, I want to have the small picture on the main page be
>clickable (perhaps with a "Click to Enlarge" caption) and have that
>action produce a larger view of the picture. It could be another
>window that's presented...I dunno. I just want the used to be able
>to see the picture's detail better than how it appears on the main
>page.

>
Is there a reason you don't just:
>
><a href='larger_image.jpg'><img src='thumbnail.jpg' width='xx'
height='yy' alt=''></a>
>
?
>

Or even <a href="larger_image.jpg" title="View a larger picture of
blah"><img src="thumbnail.jpg" width="xx" height="yy" alt="Picture of
blah"></a>

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

re: Thumbnail Expansion Technique

/bytes/development

/bytes/it

/bytes/about