Welcome to WebmasterWorld Guest from 54.166.33.25

Forum Moderators: not2easy

Sharp text over full color photos

css can combine the advantages of gif and jpg

   
11:51 pm on Apr 4, 2002 (gmt 0)

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



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.

4:51 am on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

6:50 am on Apr 5, 2002 (gmt 0)

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



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?

1:13 pm on Apr 5, 2002 (gmt 0)

10+ Year Member



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?

2:21 pm on Apr 5, 2002 (gmt 0)

10+ Year Member



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

2:44 pm on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:59 pm on Apr 5, 2002 (gmt 0)

10+ Year Member



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

How?

3:12 pm on Apr 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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. ;-)

5:36 pm on Apr 5, 2002 (gmt 0)

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



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

7:06 pm on Apr 5, 2002 (gmt 0)

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



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...
6:12 am on Apr 19, 2002 (gmt 0)

10+ Year Member



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

7:43 am on Apr 19, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Wouldn't placing the transparent gif over the image jpeg prevent antialiasing of the text to the background image?
9:29 pm on Apr 19, 2002 (gmt 0)

10+ Year Member



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.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month