- Slicing (web design)
In web development, slicing is the process of dividing a single
web page user interfacecomposition layout (web page comp) into multiple image files ( digital assets) of the graphical user interface(GUI) for one or more web pages. It is typically part of the client sidedevelopment process of creating a web page and/or web site, but is also used in the user interface designprocess of software developmentand game development.
The process involves partitioning a web comp in either a single layer
image file formator the multi-layer native file formatof the graphic art softwareused for partitioning. Once partitioned, one would save them as separate image files, typically in GIF, JPEGor PNG format in either a batch process or one at a time. Multi-layered image files may include multiple versions or states of the same image, often used for animations or widgets.
Slicing is used in many cases where a
graphic designlayout must be implemented as a web site. Therefore, this is a very important skill set typically possessed by " front end" developers; that is web developers who specialize in user interface development.
Slices may be produced and used in several different ways. Before
tableless web design, sliced images were held together precisely with html tables. Modern web page layout includes extensive use of Cascading Style Sheets (CSS) and semantic markup. Tables may be used for compatibility with rarer older web browsers that are incapable of processing modern tableless coding accurately.
Slicing is exclusively use for bitmap images. vector images are usually processed by media-playing
pluginapplications and contained within native multimediafile formats such as X3D, SWF, SVGor
Slicing breaks up one large image into many smaller ones, which reduces "page weight" or
load timeconsiderably. Advanced methods of slicing can be used to further compress the amount of data needed to downloadto the user's computer in order for the web page to display correctly. Such techniques such as repeating background images mean that one small image can be downloaded from the web serveronly once and then be instructed (via a CSS) to repeat by the markup language, shifting the work load from the web server onto the client's computer. Certain performance issues can be raised, however with today's technology and trends of web design shifting towards rich mediawebsites that typically require high bandwidth connectivity and recent computing hardware.
Quite a few industry standard programs offer the abilities to automatically slice a layout directly into tables using built in functions. These are outlined below:
Adobe ImageReady(Discontinued after CS2, functionality from ImageReady ported into CS3)
Macromedia Fireworks(Available in CS3)
Jasc Paint Shop Pro
Recent versions of these programs have improved ability to convert artwork directly into CSS, albeit an unorthodox method since the algorithms rely heavily on
absolute positioning(for example), which can render (display) inconsistently across modern web browsers.
Separation of presentation and content
Graphic image development
Wikimedia Foundation. 2010.