Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Slicing : Page 2

Dividing a larger graphic into smaller pieces is called slicing. It increases your perceived bandwidith.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Step 2: Slicing the Graphic

Use your graphic program to create several compontent files.

Now that you've decided how to divide up the image, got to your editing tool and create several smaller files each with containing one slice of the graphic.

Remember that web graphics are always rectangular and can only be sliced into rectangular pieces. The rectangular slices can be assembled on a Web page to resemble the original graphic or in any other way, but the end result will be rectangular.

Learn to slice with Fireworks Learn to slice with Photoshop
Step 3: Reassembling Graphics in Your Page

Use tables in your HTML page to reassemble the slices into a whole graphic.

You have graphic slices saved in individual files and now you're ready to place them into your Web page. The best method is to use tables for the assembly.

Make sure the table has cellspacing and cellpadding attributes of 0, be sure the border attribute is set to 0 and make sure you have no extra spaces or returns in your code.

If you want more information about tables, check out GettingStarted.net's Building Tables.

The image below is actually made of six smaller files. Click anywhere in the image to see the code that build it.

Use tables to reassemble sliced images on your page. Make sure cellpadding, cellspacing, and border attributes are all set to 0, and don't put any extra spaces or returns between your code.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date