Forum Moderators: not2easy
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.
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.
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?
Has anyone tested this?
tedster are you talking about using z-indexing to position the text over the photo?
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;}
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.
How?
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. ;-)
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.
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
That is, the text color is blended toward 100% transparency, not toward 100% of whatever the underlying color of the jpeg is.
