Best suitable image format for website.

PNGs are designed to be a more efficient, flexible, and patent-free replacement for GIFs. By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth.













ImageRanking according to Browser Compatability or Popularity
JPEG: Size: 1451 bytes Or 1.41 KB
Transparency Support: No transparency


Jpeg image is best option if we need to show photographs like in photoalbum
or showing prtoduct images and so on. But for graphical images like cartoons
and illustration images, jpeg is not a good option.
GIF: Size: 2168 bytes Or 2.11 KB
Transparency Support: No transparency


As we can see it is quite heavier then jpeg image. So it is not a good
choice for web images. PNG-8 Bit without transparent image is the best
alternative option of Gif image. But it is useful if we want to show some
animation, gif will be the right option. Gif support animations. And Its
weight(KB) will be depends on its Animation.
GIF: Size: 2168 bytes Or 2.11 KB
Transparency Support: Binary Transparency


As we can see, there is no difference between both GIF images. both have
same size(Width and Height), same weight(KB) except transparency effect.
So we have both options according to need.


Suppose we need to show background then we can go with transparent GIF
image. But if we have a transparnecy issue we should go with PNG-8 transparent
image. because Both(GIF and PNG-8) have binary transparency but PNG-8
is lighter then GIF. PNG-8 bit takes lesser time to load on webpages.
PNG-8: Size: 1387 bytes Or 1.35 KB
Transparency Support: No Transparency


It is best alternative options of JPEG and GIF image formats. Comparatively
lighter then other non transparent image formats. It is compatiable with
all browsers. It represents better graphics then other GIF and Jpeg(Except
photographs).
PNG-8: Size: 1571 bytes Or 1.53 KB
Transparency Support:Binary Transparency


Best suitable image format for web applications. With transparancy and
light weight features. Contains better graphics. compatible in all browsers.
PNG-24: Size:1689 bytes Or 1.64 KB
Transparency Support:No Transparency
PNG-24: Size:2127 bytes Or 2.07 KB
Transparency Support:Binary and Alpha channel Transparency


It supports Both type of transparency(Binary and Alpha Channel). But
Alpha channel transparency is not supported by IE 6 and Its lower version
browsers. Thats why it is not a good choice. even it is heavier then PNG-8
bit and Lighter then GIF transparent.


SIZE ( KB) Comparision : PNG-8 < PNG-24 < GIF


Conclusion:-


PNG-8 Bit is the best suitable image format for
website.


JPEG is the best suitable format for photographic
images.

Comments

Anonymous said…
i am thankful to u for you have written useful info about type of images. I m creating a photo blog and wanted to know suitable format for web.I also invite u to please visit my blog wich is www.kotjattan.blogspot.com
February 16, 2009 at 7:41 AM
Anonymous said…
Yes, correctly.
July 14, 2011 at 6:58 AM
Post a Comment

Popular posts from this blog

CSS Mouse Cursors and Custom Cursors

Image
<p style="color:red;"> <span style="cursor:crosshair;">crosshair cursor</span> <span style="cursor:wait;">wait cursor</span> <span style="cursor:help;">help cursor</span> </p> SS2.1 Cursor Styles auto The UA determines the cursor to display based on the current context. col-resize Indicates the item or column can be resized horizontally. crosshair A simple crosshair (e.g., short line segments resembling a "+" sign). default The platform-dependent default cursor. Often rendered as an arrow. help Help is available for the object under the cursor. Often rendered as a question mark or a balloon. move Indicates something is to be moved. not-allowed Indicates that the requested action will not be carried out. pointer The cursor is a pointer that indicates a link. row-resize Indicates the item or row can be resized vertically. text Indicates text that may be selected. Often rendered as an I-beam...
Read more

Block right click or disable keyboard on web pages

Hello frn'ds, Today i was searching some tricks about protecting web contents, during this i have found one interesting trick (i.e. html code) by which we can disabled the context menu in browser. This code not only block the right clicking in the browser , it also blocks the keyboard's key press events. body oncontextmenu="return false;" > Benefits of this code, 1. Can prevent View Source of your html page. 2. Can protect your page contents. 3. Can protect your web images and so on. click here to read more or know more
Read more

What is PAD file? "Submit your software with PAD file to Download.com"

Image
" Submit your software to Download websites with PAD file " Well, PAD (Portable Application Description) was the new word for me. When I have do some researched on it i have found that it is really very interesting thing for software developing companies or distributors. It is a simple XML file which contains descriptions about product (software). These descriptions are specified by software developer or software distributors. In general we can say descriptions are specified by software company or company owners or author like Software Name Company name Price type of software (free ware or shareware) Minimum System requirement Small description about software Download size contact and website addresses Screen shots, logos and icon and so on. Know More Actullly PAD maintain the standard in which it allows the software development companies to submit their software to software distribution companies in standard format. Due to this PAD saves time for both software developme...
Read more