[css-d] Icky image edges: resolution, sizing

[Lalena]

Thank you everyone who answered my question about matching my  
Photoshop colors to browser colors!

Now I have a new one. I'm placing images on my page--images of type.  
If I create my transparent gifs at the final size and resolution (72  
dpi is screen resolution, right?), the type looks all bitmap-y and  
awful. So I am using high-res versions, and just sizing them in my  
html. So, in order to size them proportionally, I'm going into "Image  
size" in Photoshop and trying out different sizes, without actually  
applying the change, so I get the proportional size readout.
Question is: Is there an easier way to figure out a proportional size?
And/or: Is there a better way to do this whole task? Meaning: solving  
the icky-image-edges problem without using high-res images (which I  
assume take longer to load)?
Thanks!
Lalena
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Icky image edges: resolution, sizing

[Climis, Tim]

And/or: Is there a better way to do this whole task? Meaning: solving  
the icky-image-edges problem without using high-res images (which I  
assume take longer to load)?

---

What you're running into is that GIF's don't have variable transparency. It's 
either transparent or it's not - no 50% opaque.  That means that it can't 
anti-alias your text well.  Using PNG's instead of GIF's would fix that.  IE6 
doesn't support PNG transparency but all the other browsers (IE 7 and 8 
included) have no problems.

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Icky image edges: resolution, sizing

[David Hucklesby]

Climis, Tim wrote:
> And/or: Is there a better way to do this whole task? Meaning: solving
>  the icky-image-edges problem without using high-res images (which I
>  assume take longer to load)?
> 
> ---
> 
> What you're running into is that GIF's don't have variable
> transparency. It's either transparent or it's not - no 50% opaque.
> That means that it can't anti-alias your text well.  Using PNG's
> instead of GIF's would fix that.  IE6 doesn't support PNG
> transparency but all the other browsers (IE 7 and 8 included) have no
> problems.
> 
> ---Tim 
> __

[quote=Tim] "IE6 doesn't support PNG transparency..." [/quote]

Just a pedantic point - I think you mean "IE6 doesn't support PNG 
semi-transparency...", yes? If you use PNG-8 then IE6 treats both fully 
transparent and semi-transparent pixels as fully transparent.

I'd recommend PNG-8 for most images anyway, as they can be optimized to 
be quite small - smaller than GIFs, anyway. And, to bring it into the 
realm of CSS, there's no need to use IE6 hacks to use PNG-8.

Check out these articles:



(Of course, you still get icky image edges in IE6, but there's not a lot 
of alternatives...)

Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Icky image edges: resolution, sizing

[Barry Woolgar]

Hello

> [quote=Tim] "IE6 doesn't support PNG transparency..." [/quote]

Whenever I've needed full PNG support for a project I've used the fix
available at http://www.twinhelix.com/css/iepngfix/. Applied via targeted
conditional CSS I've found it very effective.

Hope that helps

Barry 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/