Discussion:
About displaying images on web
(too old to reply)
LarryM
2010-04-29 11:42:26 UTC
Permalink
Some thoughts about displaying photos on the web:

With todays high resolution screens you may have to zoom the
browser to say 150% to get the site to fill up your screen.
Is there any way that you could preserve the sharpness in an
image even if it is being enlarged?

You could imagine that it could have a higher resolution
"embedded" that was put into effect at enlargements?
Meaning that in zoom 100% the image would be sampled down to
that size (72 ppi?).

Hm, formulated in another way:
Could you force an image to be displayed at a fixed relative
size (for instance 50% of the display window or of the table
width) independent of the ppi value?

Thanks in advance,
Larry
Your Name
2010-04-29 20:47:38 UTC
Permalink
Post by LarryM
With todays high resolution screens you may have to zoom the
browser to say 150% to get the site to fill up your screen.
Is there any way that you could preserve the sharpness in an
image even if it is being enlarged?
You could imagine that it could have a higher resolution
"embedded" that was put into effect at enlargements?
Meaning that in zoom 100% the image would be sampled down to
that size (72 ppi?).
Could you force an image to be displayed at a fixed relative
size (for instance 50% of the display window or of the table
width) independent of the ppi value?
Thanks in advance,
Larry
Technically you can use a larger image and scale it down within the webpage
... but don't! It's a annoyance for users on dial-up or data-capped /
charged plans to have to waste time and data downloading extra information
they won't see.

You'll see this a lot on novice websites where they put a massive image
straight from their digital camera on the website and then scale it down on
the webpage, or lazy web developers who use a webpage-scaled version of the
big image as a clickable "thumbnail".

Helpfull Harry :o)
LarryM
2010-04-30 06:33:11 UTC
Permalink
On Fri, 30 Apr 2010 08:47:38 +1200, "Your Name"
Post by Your Name
Post by LarryM
With todays high resolution screens you may have to zoom the
browser to say 150% to get the site to fill up your screen.
Is there any way that you could preserve the sharpness in an
image even if it is being enlarged?
You could imagine that it could have a higher resolution
"embedded" that was put into effect at enlargements?
Meaning that in zoom 100% the image would be sampled down to
that size (72 ppi?).
Could you force an image to be displayed at a fixed relative
size (for instance 50% of the display window or of the table
width) independent of the ppi value?
Thanks in advance,
Larry
Technically you can use a larger image and scale it down within the webpage
... but don't! It's a annoyance for users on dial-up or data-capped /
charged plans to have to waste time and data downloading extra information
they won't see.
You'll see this a lot on novice websites where they put a massive image
straight from their digital camera on the website and then scale it down on
the webpage, or lazy web developers who use a webpage-scaled version of the
big image as a clickable "thumbnail".
Helpfull Harry :o)
Thanks Harry,
I understand your concern.

I am a photographer.
My web visitors most likely uses broadband and I don't plan
on putting in megalarge images.
My visitors also are likely to have high resolutons screens
and are likely to see the web browser using some zooming in,
say to 150%.
When doing this zooming the images get a little bit blurry
which is a pity.

I am looking for a way to preserve sharpness even if the
image is somewhat zoomed in.
My little test with Photoshop made images which then are put
into a Dreamweaver built web page seem to fail.
The images are displayed in 72 ppi mode, the 144 ppi is just
double as large as the 72 ppi image (same size in inches).

You don't happen to know how I could preserve sharpness when
zooming in images? Even if you basically don't like the
idea...?

Maybe you could say that this is also about how to design a
website for a certain (normal to low) resolution but which
also can stand a zooming in without loosing the (image)
quality.
Is it possible?

/Larry
Duncan Kennedy
2010-04-30 09:59:48 UTC
Permalink
Post by LarryM
I am a photographer.
My web visitors most likely uses broadband and I don't plan
on putting in megalarge images.
My visitors also are likely to have high resolutons screens
and are likely to see the web browser using some zooming in,
say to 150%.
When doing this zooming the images get a little bit blurry
which is a pity.
Is it absolutely essential to use zoom? The normal method would be to
have a standard, smallish photo as a link with a "click to download full
resolution version" and possiby the file size for information. Link
one to the other, open in a second window, and the job's done. You
could even do it with thumbnails offering 2 sizes for download but, in
your case, you might want something bigger for the first viewing.

This gets round the problem people may have in some areas - yes, in big
towns and cities too, of extremely slow broadband.
--
duncank
LarryM
2010-04-30 15:42:17 UTC
Permalink
On Fri, 30 Apr 2010 10:59:48 +0100,
Post by Duncan Kennedy
Is it absolutely essential to use zoom?
Hi Duncan,

let us for the discussion say that the visitor uses zoom to
150%.
ANd let us say that downloading time is no issue.

The technical question is: Could an image which in 72 ppi is
10 inches wide be displayed with a width of 5 inches on a
web page?

/Larry
Duncan Kennedy
2010-04-30 18:11:42 UTC
Permalink
Post by LarryM
On Fri, 30 Apr 2010 10:59:48 +0100,
Post by Duncan Kennedy
Is it absolutely essential to use zoom?
Hi Duncan,
let us for the discussion say that the visitor uses zoom to
150%.
ANd let us say that downloading time is no issue.
The technical question is: Could an image which in 72 ppi is
10 inches wide be displayed with a width of 5 inches on a
web page?
I see what you mean. It isn't impossible to zoom with Flash but that
would be a bit expensive if you don't already have it and I have to be
honest - I haven't done it. And Flash's ability to zoom is really
directed at vector images rather than photos, which are bitmaps. But
Flash doesn't detect that your visitor has chosen to zoom in as a
default. I suspect the only answer to that, maintaining quality, would
be to put a warning about quality and best viewing on the page as any
zooming is going to damage quality. Think in terms of each pixel
suddenly becoming 1.5 pixels in size without any improvement in the
original photo and any edge smoolthing starting to get blocky.

Combined with a warning about viewing quality, the easier way would
still be a "Click here " method - open the second image size in a second
page. You could constrict the size to 5ins (but see below) in the fist
page and then, with a click, a second page would open with the larger
size. That way the visitor would have the option of a bigger photo.

Forgetting, for the moment, the resolution variations below, have you
experimented with making your original photo 1.5 times the size that you
set the HTML size to (a bigger file) and then trying it on a browser set
at 150%? I think you can really be the only judge of whether this meets
your needs in quality terms at both 100% and 150%.

The problem is, of course, just what resolution your readers use. 72ppi
is standard for most cheaper monitors (particularly CRTs), 96ppi common
for more recent TFTs - but have a look at some of the high resolution
ones - from, for example but not exclusively, Dell and Apple. That
screws up your size calculations a bit.

For example this reasonably inexpensive Dell I'm usng at the moment is
running at its default 2048 pixels in a 20 inch width - something like
102 ppi if I work it out right. Because it is a 23" wide format screen
I tend to *restrict the size of the browser, rather than trying to make
it fill the screen width. It does mean that you can't easily relate
pixels to inches for a fixed width.

I'm sure there must be other ways, for example, using JavaScript but
that's for others to comment, I'm afraid. It would need some way of
indentifying those visitors that are setting their browsers to 150% and
I'm not convinced this is possible. You could try the official Adobe
forum from their web site.
--
duncank
LarryM
2010-04-30 18:52:31 UTC
Permalink
Thanks Duncan!

So if I would go on with this idea I might look into Flash
or Javascript. (OK, I have acess to both...
But maybe I wait for some sort of confirmation that it is
possible first..

So you have your screen set to 2048 pixels. Then web sites
that are made for 800x600 must look rather tiny on your
screen.
Maybe you then zoom them up to see them properly, see what I
mean?
And when you do so, some images are getting pixelated..
That's my problem..

BTW what happened to this Dreamweaver usenet group, wasn't
it a huge forum earlier?

/Larry
Duncan Kennedy
2010-04-30 21:38:02 UTC
Permalink
Post by LarryM
Thanks Duncan!
So if I would go on with this idea I might look into Flash
or Javascript. (OK, I have acess to both...
But maybe I wait for some sort of confirmation that it is
possible first..
I have my doubts because it seems to hinge on your pages being able to
tell what level f zoom each one is using before adjusting the photo. But
if it is possible ity will be some sort of scripting - JavaScript or any
of the CGI scripts with which I am not really familiar.

Just to let you see what is possible by constraining the dimensions of a
photo I have put a simple sample page with camera photos on a near dead
site of mine (the site itself is many years old and out of date - used
for tests only - and I am changing servers round so this one may
disappear at any time!)

The large photo of the back with text on it is the original size - the
half size one is the same photo constrained to 50% width and height
(actually 25%). If you zoom in in a browser the bottom one seems to
hold its definition as it grows in size. (Remember all your photos
would be the size you expect your visitors to use (150%) but
constrained to the equivalent of 100%)

URL is

http://www.otterson-bg.com/test/norton/nortontest.htm
Post by LarryM
So you have your screen set to 2048 pixels. Then web sites
that are made for 800x600 must look rather tiny on your
screen.
These days 800 is the normal width but remember the depth is a lot less
than 600 on many screens when you think og address bars etc. I dfon't
really want to view so little (in depth) of a page by zooming in too
much unless the text is very small.
Post by LarryM
Maybe you then zoom them up to see them properly, see what I
mean?
Not really - unless the text is very small. Most pages fill the screen
or more vertically.
Post by LarryM
BTW what happened to this Dreamweaver usenet group, wasn't
it a huge forum earlier?
Adobe abandoned all of their Usenet groups almost exactly a year ago.
They removed them from their servers. The groups still eist as they
were mirrorede on many other servers and there are a few of us still
around who prefer the format rather than the web forums - but there is
no doubt - the Adobe official experts all went off to the forums.
--
duncank
Your Name
2010-04-30 21:21:42 UTC
Permalink
Post by LarryM
Thanks Harry,
I understand your concern.
I am a photographer.
My web visitors most likely uses broadband and I don't plan
on putting in megalarge images.
My visitors also are likely to have high resolutons screens
and are likely to see the web browser using some zooming in,
say to 150%.
When doing this zooming the images get a little bit blurry
which is a pity.
I am looking for a way to preserve sharpness even if the
image is somewhat zoomed in.
My little test with Photoshop made images which then are put
into a Dreamweaver built web page seem to fail.
The images are displayed in 72 ppi mode, the 144 ppi is just
double as large as the 72 ppi image (same size in inches).
The web browser and Dreamweaver ignore the resolution settings of images and
simply display them at "72ppi" (or whatever the screen is), meaning a 144ppi
will be twice as big, as you've discovered.

At the simplest level, once you've inserted the image into your Dreamweaver
page, you can manually scale it using the same handles as you would for an
image in Word or any page layout application (hold down the Shift key while
dragging a corner handle to keep the image in perspective). You can also
scale it using the Properties / Inspector palette or by manually editing the
code. The HTML code will automatically add the appropriate size tags to the
image.
e.g.
<IMG SRC="Images/MyImage.jpg" WIDTH="46" HEIGHT="32">

BUT,
I haven't actually tried this, so I don't know what happens when someone
zooms the web page - you may or may not get a clearer image using the extra
downloaded pixels (no doubt the results will vary with different browsers).

Helpfull Harry :o)

.
LarryM
2010-05-01 07:15:16 UTC
Permalink
Hi guys,

I cannot say how glad I am for this usenet system, allowing
amateurs like me to get direct help from experienced people
like you!

On Sat, 1 May 2010 09:21:42 +1200, "Helpful Harry"
Post by Your Name
<IMG SRC="Images/MyImage.jpg" WIDTH="46" HEIGHT="32">
where the image actually is, say 92x64 pixels.

So, this is the 'scaling' in HTML...
It seems to be a very simple way to 'embed extra pixels'
into the image.

Duncans nice attached example shows that this could really
be the way to go.

Of course I will do more testing (file size, download time,
sharpness appearance..) to confirm that you really get a
better result on images that are slightly zoomed in (125
-150% ?).

Thanks again Harry and Duncan!

/Larry
Your Name
2010-05-02 21:00:59 UTC
Permalink
Post by LarryM
Hi guys,
I cannot say how glad I am for this usenet system, allowing
amateurs like me to get direct help from experienced people
like you!
On Sat, 1 May 2010 09:21:42 +1200, "Helpful Harry"
Post by Your Name
<IMG SRC="Images/MyImage.jpg" WIDTH="46" HEIGHT="32">
where the image actually is, say 92x64 pixels.
So, this is the 'scaling' in HTML...
It seems to be a very simple way to 'embed extra pixels'
into the image.
<snip>

Sorry, I should have said something about the bigger image size. It was
really just an example of the auto-code you'll get by scaling the image
within DreamWeaver using the mouse.

If you're entering numbers manually, in either the porperties / inspector
panel or the code itself, then you could try using percentages instead of
pixels.
e.g.
<IMG SRC="Images/MyImage.jpg" WIDTH="75%" HEIGHT="75%">

Helpfull Harry :o)
LarryM
2010-05-03 06:02:18 UTC
Permalink
On Mon, 3 May 2010 09:00:59 +1200, "Helpful Harry"
Post by Your Name
If you're entering numbers manually, in either the porperties / inspector
panel or the code itself, then you could try using percentages instead of
pixels.
e.g.
<IMG SRC="Images/MyImage.jpg" WIDTH="75%" HEIGHT="75%">
Helpfull Harry :o)
Thanks Harry,

unfortunately putting in percentages in the code has a
surprising effect that the image is displayed in a FIXED
size independent of which zooming you have chosen for the
page.
And this size is as if the image had been displayed in the
full size in zoom 100% !

This strange effect is now illustrated in
Http://www.arxfoto.se/test/zoomtest/zoomtest.html

/Larry
LarryM
2010-05-03 06:13:26 UTC
Permalink
On Mon, 3 May 2010 09:00:59 +1200, "Helpful Harry"
Post by Your Name
e.g.
<IMG SRC="Images/MyImage.jpg" WIDTH="75%" HEIGHT="75%">
Helpfull Harry :o)
It seems that the percentages here mean percentage of the
PAGE.
Which gives a fixed image size independent of zooming...

/L
Your Name
2010-05-03 06:39:34 UTC
Permalink
Post by LarryM
On Mon, 3 May 2010 09:00:59 +1200, "Helpful Harry"
Post by Your Name
e.g.
<IMG SRC="Images/MyImage.jpg" WIDTH="75%" HEIGHT="75%">
Helpfull Harry :o)
It seems that the percentages here mean percentage of the
PAGE.
Which gives a fixed image size independent of zooming...
D'oh!! Of course they are. Sorry.

Helpfull Harry :o)

LarryM
2010-05-01 12:12:01 UTC
Permalink
To get a better understanding of this I made a little test
page. (This test page might have been erased at some (later)
time).
See
Http://www.arxfoto.se/test/zoomtest/zoomtest.html

This is just a quick test,

For a quick comparison: Zoom up this page to 200% and
compare IMAGE 2 and Image 3.
IMAGE 2 is scaled down and Image 3 is shown as original.
Image 3 (and Image 1) has detoriated but IMAGE 2 still keeps
the sharpness because of the scaling down.

If you are extremely interested try to follow the directions
on the page.

And of course there is the cost of a larger image file.

/Laary
Duncan Kennedy
2010-05-02 20:36:15 UTC
Permalink
Post by LarryM
To get a better understanding of this I made a little test
page. (This test page might have been erased at some (later)
time).
See
Http://www.arxfoto.se/test/zoomtest/zoomtest.html
This is just a quick test,
For a quick comparison: Zoom up this page to 200% and
compare IMAGE 2 and Image 3.
IMAGE 2 is scaled down and Image 3 is shown as original.
Image 3 (and Image 1) has detoriated but IMAGE 2 still keeps
the sharpness because of the scaling down.
If you are extremely interested try to follow the directions
on the page.
And of course there is the cost of a larger image file.
A very good demonstration.
--
duncank
Loading...