Best image format for images with color gradients?

This is not totally a programming question, but I think this is best place to ask.

The front page of my website has a nice banner, where more than half the image is a "gradient" of a color, and there is also some text. Now, to get any reasonable quali开发者_Python百科ty text, I have to save the jpeg file at > 90% quality and takes 106KB (not too bad, but it adds some extra load on my site especially as its the landing page I want it to be fast).

Now, I want to know, if there is any image format (like PNG/GIF), where such gradients could be stored in a more compressed way. If so, I will ask my designer to directly save in that format. Problem is, converting from JPEG to PNG/GIF is not the right way and actually increases the size because the "noise" has to be losslesly encoded.

The image : http://pollwidget.org/images/first_view.jpg

thanks

With an image as large as the one you have, with as many colors in it as the one you have... you're not going to do a heck of a lot better than 80-100K given your quality parameters.

My recommendation would be to split the image up into at least two components - one is the background gradient and one is the view of the UI that you have. You can usually experience some good savings this way if you use PNG/GIF and force limits on the color palette.

Really, though, you should separate the text from the image. Not only will the text be unreadable to search engines; you can save a lot of space by letting the browser handle the text rendering. Just requires a bit of flexibility with the typefaces you can use. Check out Google's Font directory if you don't like the default browser fonts.

If you do a little bit of research you will find that JPG should ideally be used for quality photographs. PNG8 and GIF files will work similarly, as in they both support 256 color, but GIF will not support an "alpha" effect, that smooth transparency or gradient. PNG8 will and furthermore PNG24 will even be better. So PNG has the ability to make it's pixels be dark at one end and transparent at the other (alpha). GIF achieves it in a different way. I learned all this when I got into silk screen printing, so I'm not sure how it would work with graphic designing. Here is a good link that I found which helped me out to really understand it. JPG, PNG, GIF

In your particular example, because the gradient is simply a repetition of a single row pixel (it varies along the horizontal dimension, but stays uniform/repetitious along the vertical dimension), my suggestion is to store it as an image (width 955, height 1) and use tiling to fill the screen.

Then, use the techniques mentioned in JasonAnderson's answer to compose the other elements.