William

We all want to have the most attractive website that leaves a visitor wide-eyed and completely dazzled. Usually an extremely attractive website design involves lots of graphical elements, increasing the overall page size which causes the page to download slowly to the browser. This article will provide some useful tips on how to keep your website design attractive but still downloads quickly.

As the average internet bandwidth rate per computer is raising, more and more webmasters allow themselves to develop complex websites laden with heavy graphic elements. In extreme cases you can find websites that take as much as a few minutes to load their content in your browser. Of course the user will never wait that long for a website to load, and will move on to the next website in his search results.

So why are webmasters still developing slow loading bloated websites? Primarily due to a lack of knowledge of simple graphic optimization techniques that will allow them to maintain an attractive website while keeping the page size smaller.

How many of you are aware of the fact that a box with rounded corners can be achieved using CSS code only, without the need for any graphic image. Well it is possible! Before those of you familiar with CSS say that it cannot be done for every type of browser and a relatively high level of programming is required, I say that dealing with the most common mistakes web designers make regarding optimization can have simple solutions.

Never limit the web designer by placing any restrictions that impact the final outcome. You might make the claim that what a web designer can do with graphic software is impossible to implement by code. I disagree. When the design is finished and you are ready to slice it into small images to be used in the html code, your creativity is been tested. Everything you do at this stage will affect the total page size. If your design contains rounded shapes that overlap each other or areas with color gradients, then you must slice it carefully so the outcome is a small file size.

Let’s look at what efficient slicing means:

1. Do not make large slices that contain lots of different
   colors. Use a small number of slices where each slice contains a limited
   number of colors.
2. Do not make a large slice that contains the same
   graphic structure. Slice a small portion of it and duplicate it in your
   code. This is a very common mistake that webmasters/programmers make when
   dealing with gradient color background.
3. Do not use JPEG file format all the time. In some cases
   a GIF format will be much smaller in size. A rule of thumb – a slice with
   high number of colors will be smaller in size using the JPEG format rather
   than the GIF format, and the opposite is also true. Check each option
   separately. Every 1KB that you reduce from the image file size will
   eventually add up to a significant reduction in page size.
4. If you have text on a solid color background, do not
   slice it at all. Use code to create the background instead. Remember that
   you can define both the font style and background color of the area using
   CSS.