Image Slicingmodified from http://www.ulead.com/learning/web8/page1.htm What is itInstead of
placing one giant image on your Web page, you can use an image-editing
program, such as Adobe Photoshop, Paint Shop Pro, or even Microsoft
Paint, to cut the image into several smaller pieces. Then you can use
simple HTML table coding to rebuild the image on your Web page. How to slice and what format to save the images in is a learned skill.
Why slice Slicing the image may make it load faster, but when
bits and pieces of the image load and display quickly, it appears to
the visitor as though the page is loading quickly (even if it may actually take a bit longer than a single image). (Below demos how to use the "Slice" feature in Ulead new SmartSaver Pro, and how it can help you in designing pro-quality web content. )
Perceived Load Time It refers to the perception the user has of how long she has been waiting a page to load. People are highly cognizant of time passing when nothing is happening, but if they have something to occupy them, time "passes faster". The theory behind a page that's built with a low perceived load (PLT) time is that something will be happening every few seconds - the visitor will always have something to do/read while the page is loading, dispelling any feelings of impatience. According to one study done by IBM in the 70's, the average user's attention will begin to wander if she's kept waiting for longer than one second. Consider that for a moment - one second! If we guess that average speed of a modem is still 28.8 (a reasonable assumption), and that the average modem will pull down 2-3K per second, that gives the webmaster a very small window through which to push something towards the visitor to keep their attention. The last thing you want is your user staring at an empty screen! There are various "tricks" to speed up perceived load time:
When testing PLT on your own pages, make sure you clear out your browser's cache file each time - you need to see how fast the page loads for the average visitor. CUT CUT CUT At the basic level, the Slicer in SSPro lets you cut up your image in various ways, then allows you to apply different levels of compression or even save the different pieces as different file formats. The slice tool is very easy to use, and provide very fine control over what part of the image is sliced.
This is ideal for images that have photographic elements (ideally saved as JPG) and text elements (ideally saved as GIF). In the example below, Figure 3 is saved as a single JPG image - it's 12.9kb in size, while Figure 4 is 10.2kb in size. Not only will Figure 4 load 26% faster, the perceived load time will be lower because the bottom portion is a slim 1.64kb.
Ideally, you should cut along lines of the image that make sense. Isolate text from the image so you can make it a GIF, keep the photographic elements distinct, etc. A final advantage of slicing images is that it gives you control over building graphical layouts using tables. The Prodraw site is a great example of this - he's taken his logo and cut it up, allowing it to bridge between two tables, each with a different background. Without slicing, this would have to be one giant image - hardly ideal. Slicing allows you to combine graphics and HTML in ways that let you stick close to your original layout. Another benefit, often overlooked, is copyright protection of your images. If you have large images (perhaps photographs) that you'd like to protect, slicing them is a great way to protect them. In order for someone to take the image, they'd have to save each individual piece, combine it, and re-save it, resulting in lower overall quality. Slicing won't protect you completely, but it will discourage all but the most determined image thieves. |
||||||||||||
© Lynne Grewe |