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

[michael_maberly]

Thanks, Ron. And thanks for your ongoing patience!

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

So am I to understand that if I do as I've described, and then use HTML
"width" and "length" to downscale this now huge image to its original
dimensions, there will have been no point in having used a 1200dpi when
exporting from Corel?

On another note, I'm exporting a grey and white image (a fragment of music,
on a music staff) into a "transparent gif", so that it can merge with
background colour in my web page. Displayed in FP, however, its quality is
barely adequate against some colors, and abominably poor against others. Is
this a property of gifs -- ie, poor image quality? I've thought of using a
..png with some workaround javascript someone has posted, but decided this
would be too risky. Are gifs limited this way, or am I perhaps mishandling
the export?

Thanks again!

- Michael

 

[Ronx]

Using HTML to "downscale" a huge image is a waste of a big image. It
does nothing for the image except possibly adding distortion, and you
still have a huge download. Optimise as you save for the website.

..gifs can be very high quality.
A black image on transparent will be perfect as a .gif, provided the
background is suitable. Against a plain, light background - perfect.
Against a solid dark grey background - difficult to see. Against a
busy, multicoloured overall dark background - I would guess very
difficult to see.

 

[michael_maberly]

Thanks, Ron!

Using HTML to "downscale" a huge image is a waste of a big image. It
does nothing for the image except possibly adding distortion, and you
still have a huge download. Optimise as you save for the website.

..gifs can be very high quality.
A black image on transparent will be perfect as a .gif, provided the
background is suitable. Against a plain, light background - perfect.
Against a solid dark grey background - difficult to see. Against a
busy, multicoloured overall dark background - I would guess very
difficult to see.
--
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

 

[michael_maberly]

Hello again, Ron;

More questions (!), if you can spare the time. . .

My homepage design uses Engraver’s Gothic for its heading, sub-heading, and
hyperlink buttons. Because this isn’t a standard web font, I figured that I
would have to turn this text into .gifs – preferably with a transparent
background. However, I’m consistently finding that the results are really
poor: sometimes the individual letters are coarse or jagged, or what was a
coloured font becomes black.

When I save this text as .png’s, however, they come out much better; even
then, though, they are only adequately rendered when I give them high dpi
resolution – eg, 600, rather than the 96 we’d earlier discussed. I am
saving them as “paletted†(8-bit) color – though I’m not sure why, or if
that’s better than “RGB†color (24 bit). As well, I’m not sure whether to
check off “maintain original size†as I export.

Should this be happening???

I’ve read that .png is not supported by many browsers – I’ve even read that
it isn’t supported in IE6, yet it displays well when I preview it in my IE6
browser. However, if this is true, the really poor GIF results will force
me to give up this font, and use a plainer, more available text font within
the web page, which I’d rather avoid.

I’m doing all of this in CorelDraw 12; I also have QuarkXpress 6.5, which
seems far more web-friendly, but I know how to use it even less!

Any insight would be greatly appreciated!

- Michael

 

[Ronx]

First, you are correct to use images for just headings when you wish to
use a non-standard font.

IE6 does not support transparency in .png images, but does support .png
otherwise, as does IE5. FireFox and later versions of Netscape have
full support for .png

If you web page has a single, solid colour background then use a
non-transparent .png, with the background set to the colour as the web
page background, otherwise stick to the .gif.
Try to find an anti-alias setting and try changing that. It may be that
you have to save the images at original size - in that case design them
at the correct size to begin with. 96dpi is the correct setting.

I think you need a forum that specialises in Corel Draw, such as
http://groups.google.com/group/alt.corel.graphics/topics?lnk=srg

--
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

 

[michael_maberly]

Thank-you, Ron!
- Michael

First, you are correct to use images for just headings when you wish to
use a non-standard font.

IE6 does not support transparency in .png images, but does support .png
otherwise, as does IE5. FireFox and later versions of Netscape have
full support for .png

If you web page has a single, solid colour background then use a
non-transparent .png, with the background set to the colour as the web
page background, otherwise stick to the .gif.
Try to find an anti-alias setting and try changing that. It may be that
you have to save the images at original size - in that case design them
at the correct size to begin with. 96dpi is the correct setting.

I think you need a forum that specialises in Corel Draw, such as
http://groups.google.com/group/alt.corel.graphics/topics?lnk=srg

--
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

 

[Cher Fan]

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




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.


Yes, optimise as part of the export process, when all other editing is
done. If youresizean 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.






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




How much compression depends on the image. I usually find that 20% is
OK, but someimageswill 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




...

read more »

You can resize several images at once by using freeware program Mihov
Image Resizer - http://www.imageresizer.com/ - I have written it and I
use it for designingy my web pages and web galleries.

Miha.

 

[michael_maberly]

Thanks, Miha!
- Michael