Image formats for web

It is important to optimize your web page. Images make up over 50 percent of web page. So, choosing the right image format is the first step in optimizing web graphics. There are 3 formats using in web, GIF, PNG and JPEG. You should expect the smallest file size while the picture is acceptable. I will not go to the technical details of every image format. There are a few tips for choosing the image format.

A logo with only a few colors: GIF or indexed PNG
GIFs and PNGs are palette-based, with file size related to the number of colors.

A photograph: JPG
JPEGs are designed to efficiently compress smooth-toned images such as photographs. You can control the quality of your images. The smaller file size produces jaggier image.

Anything with transparency: GIF
IE doesn’t support partial transparency in PNG.

Short animations: GIF
Every popular web browsers don’t support Motion PNG (MNG).

Local storage of original images: full color
PNGFull color PNG offers lossless compression. That provides perfect image quality but much larger file size than a JPEG.

IE7 breaks my website

It was warned in IE Blog that some of the bug fixes included in IE7 could break some websites. Because of Microsoft’s commitment to backwards compatibility websites based on the standards would be at the greatest risk of breaking, especially sites that use CSS hack to compensate for bugs in IE6. In long run, this is a good thing for web designers who love using CSS to layout their web. But in the short run, it will mean rewriting stylesheets.

Hacks are necessary while the majority browser handles complex CSS designs in difference way. However, it is possible to go entirely or almost hack-free. Try to make the CSS as clean as possible, and hack only for IE. Because other modern browsers are held to a higher standard (and problems occur in them cannot be easily worked around). IE7 is just the first step for MS to make a more compliant web browser. I expect to write CSS without any hack in the future.

In my Thai website, MS Sans Serif is my major font. The problem is IE7 does not support non-truetype font anymore. So the browser cannot break words correctly. Some words are repeated in begin of the next line. The only solution I do is using Tahoma to be a major font (that’s not a nice font in my eyes).

Design your web layout tableless

What wrong with tables?
If the table widths are not specified, all the text in the table needs to be rendered before the browser can figure out wide to make the various table cells. This means that you cannot see anything until everything in the table is loaded. To make tables more quickly is to specify the widths for all the table columns. But the problem is that your web page cannot be resized to fit the screen.
Remember that tables are only intended for tabular data and do not use them for layouts.

Use CSS for layoutsThe W3C introduced Cascading Style Sheets (CSS) to enabled the ability to apply styles to HTML documents. Most web designers are only use it to apply simple styles to their HTML, like font type and color, and background colors and images. However, the robust use of CSS for layouts did not have wide-spread occurrence until much later. If coded well, CSS makes it easy to apply global changes to the layout. All browsers today support CSS for controlling layouts (although some browser like IE sometimes requires some CSS hacks).