Optimize Graphics for a Fast Loading Site

Heavy images take too much time to load on web pages even required too much byte transfer from server to client machine. It means we are not only wasting our money and time, clients also. It seems costly, when our web host gives us a limited amount of storage space and a maximum data transfer allowance, and our graphics exceed those limits, in such a case we will have to pay extra.

That why we need to optimize our web pages by optimizing web images. We can optimize our images according to their need. Like we can show photograph and snap shots in JPG format, can show small animations in Gif format instead of flash files And General purpose images like Logo, layout images and other graphical images, image buttons, menu bar images and so on in PNG format.

We can also optimize our images by following few tips like:

1. Using Thumbnail: Thumbnails are miniature versions of a picture that are hyperlinked to its actual size version. The thumbnail will load fast, and by clicking on it your visitors will be able to see the actual size version.
2. Using Slicing: Image slicing is the process of taking a larger image; say an interface to a web page you created in a photo editor like Photoshop, illustrator, and slicing it up into smaller images. Then rebuilding your image (with the slices you just created), by putting them back together using an HTML table.

Few Informative links are:
1.Image Slicing
2.Why Slice

Comments

Anonymous said…
Interesting to know.
November 11, 2008 at 1:45 AM
Post a Comment

Popular posts from this blog

Leap Year Calculator

Image
We know any year that is evenly divisible by 4 is a leap year : for example, 1988, 1992, and 1996 are leap years.  However, there is still a small error that must be accounted for. To eliminate this error, the Gregorian calendar stipulates that a year that is evenly divisible by 100 (for example, 1900) is a leap year only if it is also evenly divisible by 400.  For this reason, the following years are not leap years: 1700, 1800, 1900, 2100, 2200, 2300, 2500, 2600 This is because they are evenly divisible by 100 but not by 400.  The following years are leap years: 1600, 2000, 2400 This is because they are evenly divisible by both 100 and 400.  How to determine whether a year is a leap year To determine whether a year is a leap year, follow these steps: If the year is evenly divisible by 4, go to step 2. Otherwise, go to step 5. If the year is evenly divisible by 100, go to step 3. Otherwise, go to step 4. If the year is evenly divisible by 400, go to step 4. Ot
Read more

PDF form validation using javascript

Step-1 - Go to Forms menu-   Choose Add or Edit fields Step-2 - Double click to open the dialogue box of Properties of the selected   Field. Step-3 - Tooltip- give the name here of the selected field and then * (for ex- Full Name*) then click on Close . [NOTE- Here this is compulsory to write the ‘*’ after the field name] This step will be done separately and repeated as same for all the fields in the form. Step-4 - Then select the button (Print button), right click on it. Step-5 -   Go to Action Tab- Delete the existing Action from the Actions , and Add an Action- ·       Select Trigger- Mouse up ·       Select Action- Run a JavaScript (from the dropdown arrow) ·       Then click on Add- (a dialogue box will be opened) Write here -    validateFields(); ·       Then click on OK. ·       Then close this box. Step-6 -   Now go to Advanced Menu- select the Document Processing - then select   JavaScript Editor – firstly clear all the existing text or history. and paste here- (past
Read more

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