Gradients are often used in web design, but when you save them using the wrong file type you may find that your lovely design has banding stripes of colour or will actually cause you more work in the long run when you come to update the files!
Why does the gradient change from being smooth into being banded?
The bands of color can appear in a gradient when it’s saved as a gif and the amount of colors in the gif is less than the range used in the gradient. A jpeg can also cause similar banding if the quality setting is too low as this will compress the file and can change the transition between colours.
When should you save a gradient as a gif and when should you save it as a jpeg?
I would always go for a gif where you can. If there are going to be less than 256 colours then a gif is definitely the way forward. Most background gradients are created as a single pixel line that are then repeated with code. If this 1px line is less than 256pixels tall then you can be absolutely sure that there will be no more than 256 colours.
The advantage of using a gif for this type of gradient where it will be blending into a hexadecimal colour is that the last end pixel will be the exact hex colour you specified in photoshop – when saving a gradient like this as a jpeg the file compression will sometimes change the end colour slightly which may cause a visible line where the gradient and background meet.
If you have more than 256 colours in your gradient – use a jpeg with a high quality setting.
When should you save a gradient as a png?
If you have a gradient which is going between a solid colour and transparent, making some of the colours in the middle of the gradient semi-transparent, use a png for this. Saving a gradient as a png-24 with the transparency box checked will enable you to preserve the transparency for the website.
Where would you use a transparent gradient png file on a website?
If you create an item for a website with a drop shadow – a button for example, you would need to create the whole button including the drop shadow and the background if saving as a gif or jpeg. This can be problematic if the button will sit in many different places across the site with a variety of different background colours. Instead of creating multiple buttons with different backgrounds you can create 1 file – a png with a transparent background – this can then be placed on any background colour you like. Fewer files will mean that you will marginally speed up loading time on the site and it will also be easier to update if you can alter 1 file rather than have to update multiple gifs or jpegs.
