Even though they may appear uneven or round, web graphics are actually square or rectangular.
Web pages are almost always designed with images. But if you don’t understand the basic principles of graphics on the internet, you won’t be able to create good web pages.
Web graphics are square The first and most basic principle to understand about web graphics is that they are square or rectangular. The best way to understand this is to look at an image in a graphic program. Choose an image that doesn’t look square. Try downloading it (right-click, “Save Image As…”) and open it in Photoshop, Freehand, or Paint Shop Pro. The image inside is round, but the actual image is square.
All web graphics are square—this is how the internet works. The internet is displayed on a computer. Computers display images as millions of tiny dots. But even these dots aren’t round—they are also square.
Pixels in web graphics As mentioned earlier, all images are made up of millions of tiny dots called pixels. Each pixel is a tiny, tiny square that is colored to make up the main image. There is a technique in painting called pointillism, developed by Georges Seurat. Computer pointillism is made up of square pixels. That is why the final form of the image becomes a square.
But if the basis of web graphics is square, how do we get round, curved images, or others with rounded shapes and edges? This is achieved through two methods: anti-aliasing and transparency.
Anti-aliasing Anti-aliasing, or the removal of contour irregularities, occurs because of the ability of the human brain to interpret what we see. This technology to create curved images examines each pixel in a curved line and changes the color saturation according to the portion of the curve that is part of that pixel. So if the curve takes up half of the pixel, it is 50% saturated with the color of the curve.
Our brain then converts this blurred image into a clear curve. You can create anti-aliasing yourself by blurring the edges of curved lines, but most graphic programs already have “anti-aliasing” automatically, unless you change the settings to indicate that you want a jagged image with jagged edges.
Transparency If your image is jagged and you want a picture with clear -cut edges, there are two main ways to do this:
- Use the same background color for your web page as in your image. The most common way to do this is to use black or white backgrounds, as most monitors use the color image that’s displayed on them.
- For the background image, use the original color, and store the with exchange show.GIF GIF file extension along with