You probably often heard about pixelated images and how ugly they look. Even this Awards Program will take a lot of points from your score if your graphics have a “jigsaw-like” edges. In order to understand how to avoid this rather unappealing look, we should first understand what causes the pixelation.
– The most commonly spread mistake is taking a graphic and enlarging it, assuming the quality will not get damaged. Depending on the software you use and the new size, the smooth edge will always get destroyed. In fact, from my experience I can say that the only way to resize and keep the smooth edge is only when you decrease the image’s size and only if you do it in PhotoShop. Other softwares, especially if you do not work in 16 RGB mode, tend to break the pixels’ structure.
– Another reason for low quality graphics could be: saving the image in .gif format, and not in .jpg. The .gif format supports 256 colours, while RGB saved as .jpg supports a wide palette of colors, with up to 16,000 hues. Therefore, if your image is rich colors, it is not recommended to save it in the .gif format.
– Third reason for causing rough images could be if you do not work with high quality photos, images or brushes in the first place. Taking a low resolution photo, especially if you are enlarging it to higher then 100% dimension, or low quality font / brush will
– But… what if you worked with 16 or 24 bit colour, save it in the .jpg format, opened it and it still has an gauche edges… This could be a result of two things. First, if you do not use some cut-edge technology software, or second — if you use PhotoPhop or Paint Shop Pro, perhaps your saving settings are on “low” quality (“5” or less).
There could be more reasons for the distortion of the image, such as: saving the image on a “transparent” background, painting the background after the icon or image was placed on the layer, or even unsuccessful change of colours using the “magic wand” for painting a particular area.
To sum it all, I would suggest working on a colored background (if you know what color your site’s background is going to be) and not on a transperant layer. Also, don’t work with low quality images you got hold of, make either your own from the very beginning, or look for other higher quality material. The .gif format allows you to make the graphic 3 times smaller by means of weight and loading time, however, if it comes a the cost of visual quality, better decrease your graphic’s size and keep it a small, high quality .jpg image, rather then a big pixelated .gif.
