In fields employing interface design skills, slicing is the process of dividing a single 2D user interface composition layout ( comp ) multiple image files ( digital assets ) of the graphical user interface (GUI) for one or more electronic pages . Typically it is share of the customer side development process of Creating a web page and / or website , aim est used in the user interface design process of software development and game development .

The process involves partitioning in a single layer [image file format] or the multi-layer native file format of the graphic art software used for partitioning. Once partitioned, one would save them as separate image files, typically in GIF , JPEG or 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 .

Practical use

Slicing is used in many cases where a graphic design layout must be implemented as interactive media content. Therefore, this is a very important skill set typically possessed by ” front end ” developers; that is interactive media developers who specialize in user interface development.

Slices can be produced and used in several different ways. Before tableless web design , sliced ​​pictures were held together with html tables . Modern interactive page layout includes extensive use of Cascading Style Sheets(CSS) and semantic markup . Tables may be used for compatibility with older web browsers that are incapable of processing modern tableless coding accurately.

Slicing is exclusively used for bitmap images . Vector pictures are usually processed by media-playing plugin applications and contained Within native multimedia file formats Such As X3D , SWF , SVG or PDF files.


Slicing reduces the workload of data and the storage of space. If the slice is a transparent multi-layered image, it can be reused in multiple parts of an image without changing the background.

On the web, slicing breaks up a large image into many smaller ones, which reduces “page weight” or load time considerably citation needed ] . Advanced methods of slicing can be used to further Top compress the amount of data needed to download to the user’s computer in order for the web page to display correctly. These techniques can be downloaded from the web serveronly once and then be instructed (via a CSS) to be replaced by the markup language, shifting the workload from the web server to the client’s computer. Some performance issues can be raised, HOWEVER They Are Typically negligible Compared with today’s technology and trends of web design Shifting Towards rich media websites Typically That require high bandwidth connectivity and recent computing hardware.

In offline electronic media, individual sliced ​​sections of a 2D image may be used to decrease the size of a computer.


Quite a few industry standard programs with the ability to automatically slice a table. These are outlined below:

  • Adobe Photoshop
  • Sketch
  • Adobe Fireworks (Previously published by Macromedia )
  • Adobe ImageReady (Discontinued after CS2, Functionality of ImageReady ported into Photoshop since CS3)
  • GIMP
  • Jasc Paint Shop Pro

Recent versions of These programs-have Improved Ability to Directly convert artwork into CSS, albeit an unorthodox method since the algorithms Rely Heavily is absolute positioning (for example), qui can render (display) inconsistently across modern browsers web.


Slicing is mainly used for 2D computer graphics with single-layered interfaces. Multi-layered interfaces may be used, but may also use vector graphics (including 3D models ) with the drawback of the most often unnoticeable rendering time. These alternate individual images are commonly referred to as sprites .