What is the right format to use when you have text superimposed on top of photos? We are using jpegs four our internet ads and the logo does not look good. It has lots of artifacts around the text. I think I remember hearing that jpeg does not work well for things with hard edges like text. Is gif better? Bitmaps would be bigger, right?
Thanks.
To get high quality and a medium filesize, use high-quality JPEG compression. If you set the compression low enough and the picture is big enough, the text should still be readable. Fiddle with the compression level.
To get perfect quality and a larger filesize, use PNG.
Don’t use regular uncompressed bitmaps.
Oh, and about GIFs… they used to be good, but there’s really no reason to use them anymore unless the image is animated or partially transparent. For regular images, PNG looks better and sometimes compresses better as well.
Will PNGs be viewable in normal browsers?
In most of the recent ones, yes, especially if you’re not using any sort of transparency.
Anything made in the last few years should be fine. IE5, 6, Mozilla/Firefox/Netscape/AOL, Opera, Safari, Konquerer… they all support basic, non-transparent PNGs.
You MIGHT have problems with people using Windows 95 and really old versions of IE, but I don’t think there’s that many of them around anymore.
However, you should know that PNGs will be significantly bigger than JPEGs in cases where your image is photographic (as opposed to cartoonish or having simple, business-like graphics).
Try both! Sometimes, a high-quality JPEG will be smaller and still look fine; other times, PNGs are the better choice.
If you can post the original image (as a bitmap), I could test it for you.
In don’t have the original bitmap. I was just looking at a bunch of pictures and maybe it’s not a jpeg issue, but a “quality” issue as a previous poster suggested. look here for an example. The text in the ad on the left, second from the top. is really fuzzy compared to the other ads on the page. I looked at the properties and it is smaller than most of the others.
Yes, it’s a quality issue. Higher-quality JPEGs can retain text quality.
Contrary to popular belief, gifs are quite good for color images. The conversion from 24bit to 8bit (“dithering”), however, has to be done by a high quality algorithm. The bad rap dithered gifs have comes from the most commonly used algorithms being second rate. (Dithering, back in the day, was a very time consuming operation so people didn’t like to use the good, slower, algorithms. But with current PC speeds it’s a blink of an eye.)
I have seen many, many well done gifs that are practically indistinguishable from the original.
I think the issue with GIFs is more to do with the filesize than the quality. It’s not that it’s a bad format, just that that there are better alternatives nowadays.
Right, I’ve shuffled some images around formats, and even for the types of images that the GIF format is best at (graphics from really old video games, for instance), PNG seems to give about half to 3/4 the filesize for the same quality. And for images with color gradients, PNG seems to do better on both size and quality, though if it’s all smooth gradients, JPEG still seems a bit better.
That said, though, I’d still be a bit reluctant to use PNGs on a website. Yes, all newer browsers will support them, but there are still a few folks out there with ancient browsers, and backwards-compatibility is a good habit to stay in. Other solutions might be to break the logo up into multiple images, with the text parts GIF and the rest JPEG, or to include some scripting which will autodetect the browser and serve up the PNG version if the browser can handle it, but which would default to JPEG or GIF if it can’t or if the scripting doesn’t run. If you do decide to use PNGs for your logo, at the very least make sure to include alt text for the image, so if someone does use a non-PNG-capable browser, they’ll at least get the text in place of the broken image (this method is obviously more useful for a logo image than for, say, a photograph of your product).
JPG is ‘lossy’ compression so each time you edit and re-save it, you will get a crappier looking image.
Best way to do it is save a master copy in a lossless format like BMP or PNG. Then when you’re done editing, save it to JPG before putting it on the web.
JPG produces the smallest file sizes and can carry text just fine too.
If your graphic contains mostly line art and text, GIF might work well too, and it’s lossless.
Note that for “full color” images, the conversion from 24bit to 8bit is lossy. (Assuming a universe of 8 bits/color. Otherwise YMMV.)