How to save web graphics in photoshop?
- Thread starter lolage
- Start date
photographs/graphics with a photo in: jpg
anything else: png
need transparency in IE6: gif
as a personal rule, I don't like any image that's a part of the furniture on a site to be over 60kb (this is obviously heavily case-by-case based, but I use it as a rule of thumb. not saying it's right!)
Interlacing is allowing varying quality versions of your graphic to be downloaded, rather than downloading from top to bottom (http://en.wikipedia.org/wiki/Interlace_(bitmaps)). I normally interlace graphics that are part of a site's structure so that if there's a problem and only a small part is downloaded, it shouldn't affect the shape of the site.
I've always taken dither to be randomly adding noise to an image so that any compression errors are less obvious. seems wikipedia kind of agrees with me (http://en.wikipedia.org/wiki/Dither).
from that, you should be able to decide what you need to use and where. each technique has an appropriate usage.
anything else: png
need transparency in IE6: gif
as a personal rule, I don't like any image that's a part of the furniture on a site to be over 60kb (this is obviously heavily case-by-case based, but I use it as a rule of thumb. not saying it's right!)
Interlacing is allowing varying quality versions of your graphic to be downloaded, rather than downloading from top to bottom (http://en.wikipedia.org/wiki/Interlace_(bitmaps)). I normally interlace graphics that are part of a site's structure so that if there's a problem and only a small part is downloaded, it shouldn't affect the shape of the site.
I've always taken dither to be randomly adding noise to an image so that any compression errors are less obvious. seems wikipedia kind of agrees with me (http://en.wikipedia.org/wiki/Dither).
from that, you should be able to decide what you need to use and where. each technique has an appropriate usage.
Associate
- Joined
- 18 Oct 2002
- Posts
- 2,010
Sic pretty much nails it.
I'd just clarify the jpg vs png/gif point though:
gif/png for images with large areas of flat colour
jpg for intricately detailed, many coloured images (photos are indeed the most obvious case, but there are others times I'd use jpg too)
I'd just clarify the jpg vs png/gif point though:
gif/png for images with large areas of flat colour
jpg for intricately detailed, many coloured images (photos are indeed the most obvious case, but there are others times I'd use jpg too)
Permabanned
- Joined
- 25 Oct 2004
- Posts
- 9,078
for me its gif for limited colour items which require transparancy
png for high colour count items which require transparancy
jpg for large images or photo's.
png for high colour count items which require transparancy
jpg for large images or photo's.
The only reason to ever use GIF for web graphics is if you need animation. There's no reason to choose it over PNG on the basis of transparency. The problem with IE6 is that it doesn't support alpha-channels for transparency. However it does support 1-bit (on/off) transparency - which is used in GIF and PNG-8.
So in other words, you get exactly the same result as GIF with PNG-8, at better compression ratios and without having to use a format with such a 'dirty' history
.
Just make sure to select "8-bit PNG" (or Indexed mode) in the dropdown when you save-for-web if you want to use simple transparency.
Oh, and then OptiPNG/PNGCrush/AdvPNG to optimise the filesize.
So in other words, you get exactly the same result as GIF with PNG-8, at better compression ratios and without having to use a format with such a 'dirty' history
.Just make sure to select "8-bit PNG" (or Indexed mode) in the dropdown when you save-for-web if you want to use simple transparency.
Oh, and then OptiPNG/PNGCrush/AdvPNG to optimise the filesize.