homepage Welcome to WebmasterWorld Guest from 54.227.160.102
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Sharp text over full color photos
css can combine the advantages of gif and jpg
tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 324 posted 11:51 pm on Apr 4, 2002 (gmt 0)

I'm sure we've all struggled with this one - trying to put sharp, clean text over a full color photo and still get an acceptably small file size for web use.

Even with the best jpg compression algos, at a certain point artifacts are visible (even if subtly) around the lettering. But if you go all the way with gif, then you lose the color depth and beauty in the photo.

I've started to use css positioning to place a gif which contains the lettering (and a transparent background) in the exact position needed over a jpg of the photo.

This is not always practical - it can be difficult to find the exact pixel position when the image is deep in the content because of font size differences on various browsers/OS. But when the technique works well, such as at the very top of a page, the results are beautiful and the file sizes are very small.

If anyone else is doing this, I'd appreciate any tips about how best to position the gif when the jpg is deep in the content.

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 324 posted 4:51 am on Apr 5, 2002 (gmt 0)

tedster,

A solution to the positioning problem, if you don't mind a little <table>, is make the image a background image in a cell then put the text in the cell. Works well for me and I don't hae to worry about absolute positioning or font size rendering. I just always make sure I include the height and width in both the CSS reference and the <td> tag.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 324 posted 6:50 am on Apr 5, 2002 (gmt 0)

Nice tip.

No, I'm not morally opposed to tables, and I don't think they are the spawn of Dark Powers. I will give this a try - Thanks.

I remember that some browser versions had problems with jpg's in <td> backgrounds, but I'll bet I can work around that by putting the jpg in the table background. Those offending browsers are darned near obsolete now, anyway - right?

pcguru333

10+ Year Member



 
Msg#: 324 posted 1:13 pm on Apr 5, 2002 (gmt 0)

I haven't tested this on all broswers yet, but when setting font-size in CSS you can make it absolute by using font-size: 8px; as an example, instead of using font-size: 90%; Even if the user has the font set to 'Largest' in their browser it shouldn't change (in theory.)

Has anyone tested this?

tedster are you talking about using z-indexing to position the text over the photo?

dabrisz

10+ Year Member



 
Msg#: 324 posted 2:21 pm on Apr 5, 2002 (gmt 0)

Pixels, points, inch are all css type setting that are absolute, most client browsers can not change the size of the text. Em and % allow the user to adjust the size of text with their browser.
When creating a style sheet for my site I keep in mind the following.

1. absolute type is not adjustable and can hinder reading.
2. Body or copy text should use relative settings to allow flexibility.
3. Navigator displays type smaller than IE.
4. Mac displays type smaller than PC.
5. Never use 9px or below when optimizing for NN4+ (text is to small).

Example style sheets
NN4+
.a1, {font-size:x-small;}
body, .a2 {font-size:small;}
.nav {font-size:12px;}

IE
.a1, {font-size:xx-small;}
body, .a2 {font-size:x-small;}
.nav {font-size:11px;}

knighty

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 324 posted 2:44 pm on Apr 5, 2002 (gmt 0)

>>Pixels, points, inch are all css type setting that are absolute, most client browsers can not change the size of the text

It may be more difficult in certain browsers but I have yet to find any browser where you cannot change the font size no matter what type settings the designer has used.

dabrisz

10+ Year Member



 
Msg#: 324 posted 2:59 pm on Apr 5, 2002 (gmt 0)

<<I have yet to find any browser where you cannot change the font size

How?

stever

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 324 posted 3:12 pm on Apr 5, 2002 (gmt 0)

It's part of the point of the cascading in CSS - the priority cascades from the designer to the user (which is as it should be?). In answer to the question about how to do it: - Tools - Options on IE, and then Accessibility for user style sheets.

In fact, for a subversive way of using this, Eric Meyer wrote an excellent article called The CSS Anarchist's Cookbook for O'Reilly a couple of years back (not sure if I'm allowed to give URL?) giving, amongst other thought-provoking ideas, ways to knock out banner ads using CSS. ;-)

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 324 posted 5:36 pm on Apr 5, 2002 (gmt 0)

> tedster are you talking about using z-indexing to position the text over the photo?

Yes, that's it. It's not simple enough to be my first choice, but in some situations it gives the best appearance for the lowest file size.

> most client browsers can not change the size of the text
>> I have yet to find any browser where you cannot change the font size

Lots of discussion in our Browsers Forum on the topic - and there is a lot to it!

But my point here is this: Whether the user overrides the designer's font choices or not - and the greatest majority don't override and wouldn't know how - still each browser and OS can have its own idea of exactly how big a given font should be.

Plus, there are even many versions of common fonts out there, each one with its own small but real differences from the others.

And all that can throw off the absolute positioning when you use the z-index. Marshall's idea about using tables is an easy way to cope.

mivox

WebmasterWorld Senior Member mivox us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 324 posted 7:06 pm on Apr 5, 2002 (gmt 0)

I think the dreaded NN 4.x is the root of all table-background image woes, isn't it? Otherwise, it seems like that's the simplest method...

JayCee

10+ Year Member



 
Msg#: 324 posted 6:12 am on Apr 19, 2002 (gmt 0)

Tedster, have you tried the PNG image format? It's getting better support these days and will probably be pretty universal in a couple more years.

In some ways, it combines the best of gif and jpeg in one standard. But sometimes file sizes are bigger than for a highly compressed jpeg.

Also, there is a new kind of compression algo I've been following for a few years that is starting to trickle down to affordable products. It's called "wavelet compression" and compresses images considerably smaller with fewer artifacts - watch for it.

In my Photoshop 6 work, I don't see much degradation of text edges in pretty highly compressed jpegs, if I first keep the text on separate layers and redo the text size whenever I change the image size.

I can't usually use your suggestion because my text usually has a lot of layer effects, drop shadows and such and must therefore also be jpeg.

Also, when doing any process that is lossy or leaves artifacts (but not during final compression for the web), if you go into LAB mode from RGB mode and do the process you want ONLY TO THE B&W component of the image (turn off the color component), then go back into RGB mode, you get zero color artifacts! This is great for "Unsharp Mask" and other such damaging processes. There is no penalty for going back and forth between LAB and RGB modes as often as you like.

Another quality extra in PS6 is doing as many processes in 16 bit mode as possible, not in 8 bit mode. You can do some extreme fiddling in 16 bit mode and cause much less damage to the image than in 8 bit mode. But not all processes are available in 16 bit mode.

HTH

ggrot

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 324 posted 7:43 am on Apr 19, 2002 (gmt 0)

Wouldn't placing the transparent gif over the image jpeg prevent antialiasing of the text to the background image?

JayCee

10+ Year Member



 
Msg#: 324 posted 9:29 pm on Apr 19, 2002 (gmt 0)

ggrot:
Depends on how the antiailiasing was done.
I would think that, since it blends between the text edge and transparent, not between the text edge and the color of the jpeg, that there would be no problem. And if there were, Tedster would have seen it.

That is, the text color is blended toward 100% transparency, not toward 100% of whatever the underlying color of the jpeg is.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved