In this article, we’re going to look at another way of loading Web images quickly by using image slicing. For this, we will use Paintshop Photo Pro X3.
As mentioned in other articles, it’s important that any images you have on your Web page load quickly, otherwise you run the risk of losing your audience. There are many ways of doing this, such as making your files smaller and by using compression. Still, there will be some situations where you want an image to load quickly, but the file size is too large. The solution is to use slicing, where you cut the image into pieces, which load in sections.
This gives the user a clue that more of the image is on its way and makes them more likely to wait for the full image to load. Here’s an example.
This image is to be used a background for a web page. It measures 1000×750 pixels.
At a compression rate of 25%, the file size is 209KB, which is too large to load as one image. Greater compression will help and it will also degrade the image if we go too far. Another solution is needed and that comes in the form of image slicing. To access the Image Slicer, go to File: Export: Image Slicer.
In the Image Slicer dialog box, you have a variety of tools to control how images are sliced. The main options under the preview window are: Arrow, Grid, Slicer, Delete and Pan.
Directly below those tools are the Cell properties, which are: URL, Alt text and target. These tools come into play if you want to use the various slices to point to other Web pages, though that’s not our purpose here.
To the right of the Cell properties you have several options, including: Preview in Browser (the eye icon), Rollover Creator, Format, Optimize Cell and a checkbox: Apply optimization to whole image.
Let’s explore how some of these tools work. Going back to the tools at the top left, the main tools you’ll use are the Grid, Slicer, Delete and Pan. Note that for this example, I’ve set the Zoom at 20, which allows you to see the entire image. If you want more precise slicing, zoom in on the image.
The first tool we’ll look at is the Grid tool. To use it, press on the icon and click on the image in the preview window, which brings up the Grid Size dialog box. This controls the number of rows and columns of slices for an image, in this case, three rows and three columns.
Here’s what it looks like. To edit the grid, you have several options:
- Use the Arrow tool to click on any line, vertical or horizontal and move it to a new position.
- Use the Slice tool to add more slices to the grid.
- Click again on the Grid icon and again in the image to bring up the Grid Size dialog and make changes to the grid.
- Click on the Erase tool and click on any line, vertical or horizontal to erase it.
- Click on the Pan icon and navigate around the image for precise placement/removal of slices.
- If you’re not satisfied with the grid and you want to start again, click on the Clear button on the lower right to remove the grid.
Once you’re satisfied with your settings, it’s time to output the image slices. In the Format section, you have three options, the file type (GIF, JPEG and PNG), Optimize Cell and Apply optimization to whole image.
For the format, you’ll notice that the default is GIF, though with a photographic image, I recommend the JPEG option. PNG is also available, but I recommend avoiding using that because the full version of PNG will bloat your file sizes by five to ten times.
When you click on the Optimize Cell button (with the JPEG format chosen), it brings up the JPEG Optimizer dialog box, which allows you to set the compression for each slice, individually. In this case, I recommend starting with 20% compression and increasing that if necessary. On the Format tab, I also recommend using the progressive option, since this will quickly bring up the image and resolve it slowly. This lets the user know there’s more to come. Finally, if you want to use on setting to optimize the entire image, I recommend enabling the Apply optimization to whole image checkbox. This will save you time and effort.
To output the sliced image, make sure that the Include cell in table checkbox is enabled on the lower left of the dialog box, then click on Save As. Note that in the dialog box that appears, you will be saving the sliced image as an HTML file. All the images and the HTML file will be saved in the same directory.
Here’s the source code from the HTML file.
Conclusion
You now have everything you need to prepare sliced images for the Web which will allow your images to load quickly.
