"Web page width" when creating an image in a graphics program

M

michael_maberly

Hi;

I'm trying to create a background color with a two-color, gradient fill
(with gradient moving horizontally, from left to right). From another
website, I learned that one method for doing this is to create a very narrow,
appropriately 'gradiented' jpeg (in a graphics program), to the 'width of the
web page', and then use the CSS "background-repeat: repeat-y" function to
repeat this narrow band vertically.

My only question (so far) is an extremely basic one: since browsers and
screen resolutions will differ from user to user, what WIDTH should I use
when creating the jpeg in the graphics program?? Thinking that I should
start with the screen resolution that I use -- 1280 by 1024 px -- I set the
width of my gradient image to 1280px. However, when I inserted it into FP,
it went way past the left and right edges of my screen, both in Preview and
Browser (IE6) views. This meant that a) the gradient didn't display
properly, and b) it automatically provoked the appearance of a horizontal
scrollbar in the browser.

I've spent several hours trying to find both the question and answer in Eric
Meyer's Cascading Style Sheets, but to no avail.

Any tips would be greatly appreciated! Thanks, in advance!

- Michael
 
C

Corey Bryant

if you have your resolution set to 1280 by 1024 px and you previewed it in
Frontpage, you have lost pixels if you have the folder list for example.

Even in IE 6, you have lost a few pixels if you have your browser maximized
because of the edges of the program (internet explorer 6.0).

Assuming you want to build for 1280 by 1024 px resolution, you can make the
background white and then the gradient will blend into the background on
higher resolutions. And you would have a scroll bar on lower resolutions.

For example, on an 800X600 resolution, I think you can get away with a width
of 770 pixels. I usually use 800 now just because chances are the user is
used to seeing a horizontal scroll bar. Of course that also assume the user
has the browser maximized and that no other tool bars (i.e. history,
favorites) is opened
 
M

michael_maberly

Thanks, Corey! A few related questions:

1) Is there a 'typical' resolution these days, and - if so - what might it be?

2) Taking your suggestion: if I want my darker-to-lighter gradient to be
from Left to Right, should I begin the image at complete left, so that the
white background always appears to the right of the lightest part of the
gradient?

3) Now that I can understand source code a little, I took a look at what
THIS web page (ie, Discussions . . . ) uses for its right-to-left color
gradients (two of them, in different shades of orange, at the top of the
page), and found:

"DXImageTransform.Microsoft.Gradient"

I then found a webpage that implies that this feature is somehow universally
available, and all one has to do is apply the code:

<body
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">

if one wants to use this as body background effect -- with one's own choice
of colors, of course. (It goes on to say that one can also use this for
table background effect.) Is this correct? Is this compliant with
current standards -- ie, is this CSS, some other kind of style language, or
just old-fashioned HTML tags (from MS???!!!)? Since my graphics-generated
gradient image is really the same thing as this -- ie, a two-color gradient
-- wouldn't I be better off using this DXImageTransform code, since it
requires NO image-downloads, and - because it simply uses the Color attribute
- will automatically fill up the entire screen width, regardless of browser
type, screen resolution and/or window size?

Thanks, in advance, for your help!

- Michael
 
M

michael_maberly

(Please first see my previous post, also dated May 26)

Re. the "DXImageTransform.Microsoft.Gradient" script:

I found a detailed MS page on it --
http://msdn2.microsoft.com/en-us/library/ms532847.aspx -- that describes it
as a 'filter', and says that filters are an extension of CSS, that's
available from IE5 on. However, that made me wonder if it would ONLY work on
IE, and -- a number of searches later -- I found that that is in fact the
case: this neat feature will not work on Firefox, for example.

So, I conclude that it wouldn't make sense to use a feature that isn't going
work on non-IE browsers, and that using the 'image gradient' technique is the
only sure way to go.

Would you agree (despite your affiliation with MS) ?

Thanks!
- Michael
 
C

Corey Bryant

1) Is there a 'typical' resolution these days, and - if so - what might it
be?
Typical maybe your your viewers but no, not really. Too many factors as I
stated go into this. Me, I have a 1920X1200 resolution. But my windows are
not maximized. I have the browsers set to 1280X1024 though.
2) Taking your suggestion: if I want my darker-to-lighter gradient to be
from Left to Right, should I begin the image at complete left, so that the
white background always appears to the right of the lightest part of the
gradient?
Click to expand...
Yes - and just figure out what size (if any) you want to use. Your image
could be 1000 pixels in width and then using CSS you can have it so it won't
repeat horizontally only vertically.

http://www.iwdn.net/ is a good website for some coding issues / problems and
ideas that might be helpful as well (I am Corey Bryant over there as well).
They have provided me some great ideas and hacks to make the sites look the
same across platforms
 
R

Ronx

Q1 - There is no typical screen resolution, and screen resolution is not
what you need to know about anyway.
The important factor is browser portal size: screen resolution sets the
maximum size but not the size actually used.

My screen has a resolution of 2580x1024. My browsers are opened at
800x600 (and I get annoyed by sites such as those hosted by Windows Live
that require a portal of 820px to see them without a horizontal scroll
bar.)

Many other users with large resolution screens and wide screen monitors
also open the browser in a small window in order to capitalise on the
real estate those screens provide.

Others have small screen laptops or tablets that have a resolution of
1600x1200 (or similar) but are forced to use large fonts, which may make
the entire screen equivalent to 800x600.

Look at http://www.thecounter.com/stats/ for various other browser
stats. Bear in mind that the screen resolution stats are for *screen
resolution*, not for browser portal size.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
M

michael_maberly

Thanks for both replies, Ron - I greatly appreciate them.


Re. first reply (browser portal size):

1) Thanks for the tip, and for the very handy stats page url!

2) Forgive my ignorance of such a basic thing, Ron, but I'm not sure I
understand the relation between "browser portal size" and "screen
resolution": are pixels an absolute measurement? If so, does - eg -
"screen resolution of 1280x1026" mean that one's maximum screen width will
contain 1280 pixels? And, if so, does having one's browser portal (does
'portal'='window'?) at, eg, 800 x 600, simply mean that the browser portal
size is taking up only 800 of those pixels?

3) Would you advise building one's page toward an 800 x 600 audience, or, as
Corey put forward as a possibility for me to use in my situation, to give my
image a width of 1000, with 'background color" set to white, for those using
higher resolutions with wider browser portal sizes?


Re. second reply: thanks for this corroboration of what I've been
encountering in other web forums on this topic.


Related question/problem:

I am finding a small, horizontal white space between each repetition of my
'gradiented' background image and the next. I re-read the related
information that you had given me in your reply to my "vertical alignment"
post re. white space around an image inserted as background within a table
cell, and re-wrote my style code like this (even though my element is now the
body, and not a table cell), but to no avail:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body {border: none; border-collapse: collapse; height: 100%;
background-image: url(images/corel gradient take 3.jpg); background-repeat:
repeat-y; background-color: white; margin: 0; padding: 0;}
</style>
</head>

<body>
</body>

</html>

Any tips on what I might be doing wrong this time?

Again, thanks to you, and to Corey, for your generous help!

- Michael
 
M

michael_maberly

(please first see my previous reply, where I sought help with the problem of
a white space appearing between the repeats of my backround-image image.)

Re. white space between repeats: it seems that the problem doesn't stem
from a margin/border/padding issue, but from my "gradiented" image -- I tried
the repeat function with another image (done in a program other than corel
draw), and found no such white spaces.

So the question becomes: what have I possibly done incorrectly when
creating my image gradient in corel?? I made sure that there was no
'outline' associated with it, and specified that the gradient effect be
applied to the entire contents of the containing 'rectangle'.

I realize that this may lie outside the limit of this discussion, but have
to begin my search somewhere ; - )

Thanks again!
- Michael
 
R

Ronx

When an image tiles there is no space between copies of the image, so
the white space must be part of the image.

A simple test:
Create a new page and give it a black background. Then drag the
gradient image onto the page. If there is any white border, it will be
part of the image.

I have never used Corel Draw, but in Paint Shop Pro there is a command
to resize the canvas to the image, wheras you seem to have specified the
image to be the same size as the canvas. The two commands should do the
same thing ...
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
R

Ronx

2)
There is no relation between screen resolution and browser portal,
except that the browser portal cannot be larger than screen resolution,
but can be much smaller.

1280x1240 means the screen is 1280 pixels wide, by 1024 pixels high.
This includes the space taken by the Windows Task Bar.

Browser portal of 800x600 means the browser's viewable window is opened
at just under 800x600 pixels. This does not include space taken by the
browser toolbars or any side bars that may be open, but does include
space taken by scroll bars.

The browser window will be higher than this (for the tool bars, title
bar, status bar, address bar ...) and will be wider if any side bars are
open.



In your CSS, remove border: none; border-collapse: collapse;
These attributes do not apply to the body tag. There is nothing wrong
with the rest, and it's more likely the image itself causing problems.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
M

michael_maberly

Thanks again, Ron -- I now (hopefully) understand this.

Re. white space around repeated image: you're right -- I experimented with
an image from a different graphics program, which resulted in no white space
between the repeats. Somehow, any object that I export from Corel Draw 12 as
a bitmap ends up with some kind of border, despite the fact that I take pains
that it not include any 'outline'. I confirmed this by using FP to 'edit'
the image -- I cropped it by 3 px on each side -- and, voila, no more white
space. However, I wish I could figure out how to export it from Corel with
no border! If you or anyone out there knows of a good forum for Corel Draw
12 users, please let me know!

All the best,
- Michael
 
C

cschiller1

Michael -

You could, of course, generate the image in Corel and then crop it in
another program, say, the free IrfanView. It is not recommended to edit
images using FP.

As for a forum, try corel.CorelDraw12 at cnews.corel.ca.

Hope this helps.
Craig
 
M

michael_maberly

Hi, Craig;

Thanks for your info & feedback -- I appreciate it.

Any idea why it isn't a good idea to edit images in FP -- poorer editing
quality, relative to dedicated image editors?

Thanks again!

- Michael
 
M

michael_maberly

Thanks for this, Ron.

A related question:

I have a Corel Draw object that has a resolution of "1200 x 1200 DPI", and a
"width" of 500px and "height" of 300px. If I export it as a jpeg with
resolution of 1200px, but then re-size it down to its original dimensions (in
FP), will the result be a higher quality image than if I were to export it as
a jpeg with a resolution of 96px (ie, Meyer's recommended ppi 'reference
pixel')?

If it does result in higher quality, will the download time be appreciably
longer?

Thanks!

- Michael

Eric Meyer's writes that the CSS2.1 recommends 96ppi as a reference pixel. I
 
R

Ronx

When working with images, especially .jpg, always follow the rules:

1) Never work on the original. Always make a copy to work on.
Burn the original to CD, and save a copy in the native format for the
image program (.psd for PhotoShop, .psp for Paint Shop Pro and so on.
Use a copy of this native copy for working.

2) Always work on a copy of the original, or better a copy of the
original native copy.

3) Save and close once. All future edits go back to the original copy.

4) Optimise for the web (set the size, DPI, compression level etc.)
BEFORE you save as .jpg

5) Do not use FrontPage for image manipulation unless you don't care
about quality.


..jpg is lossy format. Every time you save a .jpg you lose some
quality. The native formats for image editors are not lossy. You can
generally open these and edit as often as you wish without problems -
except you overwrite the only copy you've got and you can't go back -
hence rules 1 and 2.

The download time depends on the size of the image AND on its
compression. Compress too much and you can see the loss in quality,
compress too little and the result is much bigger (long download times)
than need be.

For examples of the last paragraph see
http://www.rxs-enterprises.org/fp/Default.asp?fl=1030205063

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
M

michael_maberly

Thank-you VERY much for these 'rules', Ron -- I had no idea!

There are a few things I don't understand:
3) Save and close once. All future edits go back to the original copy.
Click to expand...
Do you mean that I should make a copy of the 'original native copy' for each
new edit?
4) Optimise for the web (set the size, DPI, compression level etc.)
BEFORE you save as .jpg
Click to expand...
Eg, as part of the process involved in exporting a copy of an 'original
native copy' from my graphics program as a .jpg?


Your "Web Authoring FAQs" site concludes with:

"Change the physical dimensions of the image in the image editor before
saving. This results in a smaller file size - using HTML to resize the image
will not alter the file size, and may introduce distortions."

But this brings me back to my original question -- please forgive my
ignorance, here: When I export an image from CorelDraw - eg, as a .jpg to
use in my webpage - I'm able to set the image's dimensions to, eg, 500px by
100 px, and the resolution to, eg, 1200dpi. I set the resolution this high -
as opposed to 96dpi - in the hope that I will get a much higher quality image
onscreen. When I insert this image into FP, however, it naturally displays
the image as far wider than the 500px (because, I assume, the ppi for the
screen image is roughly 96ppi -- way smaller than 500dpi - even though dpi
and ppi are supposedly different units). I therefore use the "width" and
"height" attributes to reset the onscreen image to its original dimensions.
Now, my only reason for setting the export resolution so high is to get a
much better image quality onscreen -- even after I down-scale its dimensions
onscreen. Will it achieve this effect? (If not, I may as well just export
from Corel with a resolution of 96dpi, which will display the true image
dimensions in FP.)

As for 'compression', I've been using the 'default' in Corel -- which, I
think, is something like 10-20%.
 
R

Ronx

Comments inline below

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thank-you VERY much for these 'rules', Ron -- I had no idea!

There are a few things I don't understand:

Do you mean that I should make a copy of the 'original native copy' for each
new edit?
Click to expand...

Yes, for best results. Editing a .jpg will always lower the quality.
If the image is still on screen in the editor, then carry on with that
provided it is in native format, but do not re-edit a saved .jpg image,
it will deteriorate.

Eg, as part of the process involved in exporting a copy of an 'original
native copy' from my graphics program as a .jpg?
Click to expand...

Yes, optimise as part of the export process, when all other editing is
done. If you resize an image using attributes in the image tab, you can
distort the image, and you have no effect on the file size - it's the
same image being displayed in a smaller space.

Your "Web Authoring FAQs" site concludes with:

"Change the physical dimensions of the image in the image editor before
saving. This results in a smaller file size - using HTML to resize the image
will not alter the file size, and may introduce distortions."

But this brings me back to my original question -- please forgive my
ignorance, here: When I export an image from CorelDraw - eg, as a .jpg to
use in my webpage - I'm able to set the image's dimensions to, eg, 500px by
100 px, and the resolution to, eg, 1200dpi. I set the resolution this high -
as opposed to 96dpi - in the hope that I will get a much higher quality image
onscreen. When I insert this image into FP, however, it naturally displays
the image as far wider than the 500px (because, I assume, the ppi for the
screen image is roughly 96ppi -- way smaller than 500dpi - even though dpi
and ppi are supposedly different units). I therefore use the "width" and
"height" attributes to reset the onscreen image to its original dimensions.
Now, my only reason for setting the export resolution so high is to get a
much better image quality onscreen -- even after I down-scale its dimensions
onscreen. Will it achieve this effect? (If not, I may as well just export
from Corel with a resolution of 96dpi, which will display the true image
dimensions in FP.)
Click to expand...


This is the correct way. ppi and dpi are much the same thing, and more
to do with quality on a laser or ink jet printer, where dpi is the
number of dots per inch the printer can place on the paper. On screen,
dots per inch is meaningless - each dot is a pixel.
So an image 4inch wide at 1200 dpi may appear on paper as 4inches wide,
but on screen will be 4800px wide - 4inches x 1200dpi = 4800px

As for 'compression', I've been using the 'default' in Corel -- which, I
think, is something like 10-20%.
Click to expand...

How much compression depends on the image. I usually find that 20% is
OK, but some images will compress down to 50% or more with no visual
loss of quality, and some will not compress at all. It's a subjective
thing - try it and see. Most imaging programs show a preview of the
finished results before actually committing to disc
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Gradient Background in Expressions Web 1
Top of image lopped off & border/space on right hand side of image between text? 1
Adjusting image size as % of screen size 3
can I "cheat" with multiple code for width and height in CSS? 4
Background image in table 4
Stretching an image 100% in a table cell, distorts the image 4
How to modify resolution of web page? 4
images not showing up on some browsers 10

Top