Scale Image Size

[Robert]

Let me know if you automatically scale images in html. I often code my
html and create screen shots on my laptop, which has a higher
resolution (1400x1050) than my desktop. The html should render similar
on my desktop and laptop since the web pages are for personal usage.
Currently, the screen shot appear larger in desktop's resolution
(1024x768), which obviously affects the design of the page. So I am
looking for an approach to keep the higher resolution image, so I am
not looking at tiny graphics on my laptop and control how the images
renders on the desktop. I basically use both platform for viewing and
coding the information. Unfortunately, the resolutions can not be
matched on both systems and it would not be an ideal solution since
the desktop has a CRT while laptop has an LCD. Let me know if you have
any suggestions. Please clarify suggestions with examples, links, or
other generally useful information.

 

[Hywel Jenkins]

Let me know if you automatically scale images in html.

You can, but they look crap and the user still has to download your
large image.

 

[Spartanicus]

Let me know if you automatically scale images in html. I often code my
html and create screen shots on my laptop, which has a higher
resolution (1400x1050) than my desktop.

1400x1050 is a common screen area size, resolution is expressed in
Pixels Per Inch (PPI).

The html should render similar
on my desktop and laptop since the web pages are for personal usage.
Currently, the screen shot appear larger in desktop's resolution
(1024x768), which obviously affects the design of the page. So I am
looking for an approach to keep the higher resolution image, so I am
not looking at tiny graphics on my laptop and control how the images
renders on the desktop. I basically use both platform for viewing and
coding the information. Unfortunately, the resolutions can not be
matched on both systems and it would not be an ideal solution since
the desktop has a CRT while laptop has an LCD.

*If* these pages are really only for personal use, then setting the
browser's viewport the same size on the desktop and laptop should be
sufficient to make the layout appear the same (bar differences between
the machines such as text size).

Please clarify suggestions with examples, links, or
other generally useful information.

I'd suggest you clarify the question with examples, links, or other
generally useful information.

 

[Bernhard Sturm]

1400x1050 is a common screen area size, resolution is expressed in
Pixels Per Inch (PPI).

both are considered as 'resolution' and this adds a lot to the confusion
amongst graphic designers. PPI or DPI are useless for webdesign (I could
produce all my images with 1dpi, for instance). so simply forget about it.
Down scaling images within HTML is a very bad idea (waste of bandwith
and image quality). But if you look at it from an accessibility point of
view you would ideally define all your dimensional units as 'em' in your
CSS. Then your layout will automatically scale correctly regardless of
the clients UA settings. Hence images would then downscale or enlarge
correctly together with any other graphic element on your site.

bernhard

 

[Spartanicus]

both are considered as 'resolution'

Only by the clueless.

and this adds a lot to the confusion
amongst graphic designers.

I rest my case.

 

[Bernhard Sturm]

Only by the clueless.

even adobe mixes both terms regularly:

http://www.adobe.com/products/adobemag/archive/pdfs/9704qapn.pdf (first
paragraph: "...was to set the monitor resolution to 640 by 480."

or microsoft uses the term 'screen resoltion' in their knowledge base to
describe how to change the pixel dimensions of the screen....
http://support.microsoft.com/?kbid=228358

but I agree: both examples are from companies who tend to be quite
clueless...

I rest my case.

it's okay if it's clear to you, but for some designer it isn't. I get
very often images with the description '400x400 pixel resolution @ 200
dpi... ' which is completely nonsense. dpi's are useless in this case,
as the pixel dimensions define the image, and not the dpi's.

bernhard

 

[Spartanicus]

even adobe mixes both terms regularly:

http://www.adobe.com/products/adobemag/archive/pdfs/9704qapn.pdf (first
paragraph: "...was to set the monitor resolution to 640 by 480."

or microsoft uses the term 'screen resoltion' in their knowledge base to
describe how to change the pixel dimensions of the screen....
http://support.microsoft.com/?kbid=228358

but I agree: both examples are from companies who tend to be quite
clueless...

Common usage doesn't make it correct.

it's okay if it's clear to you, but for some designer it isn't. I get
very often images with the description '400x400 pixel resolution @ 200
dpi... ' which is completely nonsense. dpi's are useless in this case,
as the pixel dimensions define the image, and not the dpi's.

I'm talking about displays/screens, not images.

 

[Bernhard Sturm]

Common usage doesn't make it correct.

but it adds to the confusion ;-)

I'm talking about displays/screens, not images.

and what was your point about displays/screens?

 

[Spartanicus]

and what was your point about displays/screens?

Use Google groups if you lost messages from this thread.

 

[Richard]

You can, but they look crap and the user still has to download your
large image.

Dufus Read. ON HIS LAPTOP. He is the user and only visitor.

 

[Hywel Jenkins]

Dufus Read. ON HIS LAPTOP. He is the user and only visitor.

He didn't specify that he would only be looking at the images on his
laptop nor that he would be the only visitor, you prick. In fact, he
even mentions that he needs it to work on multiple systems, you idiot.
Learn to read, Stupid.

 

[Leif K-Brooks]

He didn't specify that he would only be looking at the images on his
laptop nor that he would be the only visitor, you prick.

I really hate to side with RtS, but I'm going to have to
on this one: the OP did say that it was for his use only. "The html
should render similar on my desktop and laptop since
_the_web_pages_are_for_personal_usage_." (Emphasis mine.)

 

[steven]

I really hate to side with RtS, but I'm going to have to
on this one: the OP did say that it was for his use only. "The html
should render similar on my desktop and laptop since
_the_web_pages_are_for_personal_usage_." (Emphasis mine.)

I understand your embarrassment, but if you don't want to side with RtS
there's always a way out : 'personal' can also be read as
'non-professional'. My site is also a personal one, yet it's available to
everyone who has HTTP access to the 'Net.

Steven

 

[Uncle Pirate]

Let me know if you automatically scale images in html. I often code my
html and create screen shots on my laptop, which has a higher
resolution (1400x1050) than my desktop. The html should render similar
on my desktop and laptop since the web pages are for personal usage.
Currently, the screen shot appear larger in desktop's resolution
(1024x768), which obviously affects the design of the page. So I am
looking for an approach to keep the higher resolution image, so I am
not looking at tiny graphics on my laptop and control how the images
renders on the desktop. I basically use both platform for viewing and
coding the information. Unfortunately, the resolutions can not be
matched on both systems and it would not be an ideal solution since
the desktop has a CRT while laptop has an LCD. Let me know if you have
any suggestions. Please clarify suggestions with examples, links, or
other generally useful information.

Resize the image using a graphics editor. ALWAYS display an image in
it's natural size. The only exception I ever make to this rule (my
rule) is with a graphic that was drawn such as tab images or rounded
corner images. Sometimes I'll make those small and scale to fit.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein