Float irregular images on your Web pages with pngslice

Web sites that run text squarely around images even when the images don’t have even borders look a little lazy. pngslice slices an image into thin vertical images and generates a small chunk of HTML to align these slices so that the original image can be seen in a Web browser. This lets you place non-rectangular floating images on Web pages and align the surrounding text to the uneven borders of the image for a professional-looking layout.

While you may be able to achieve a similar effect in other ways, if you want to have your Web site viewable in both a wide variety of browsers and versions of those browsers, using image slices is an effective technique.

pngslice 0.65 is not packaged for Ubuntu Hardy, openSUSE, or Fedora, but it’s easy to build with the normal ./configure && make && sudo make install process.

To show how it works, I’ll use this image, example-image.png. If you invoke pngslice on the image file directly without any other arguments, the utility will create 17 vertical slices called example-image.01.png through example-image.17.png, and an HTML file called example-image.sliced.html that contains the HTML to include all the vertical slices and recreate the original image in your Web browser.

Images are included without any paths or URLs; it is expected that they are in the current directory if you are serving this sliced image from your Web site. The command shown below will prepend the foo.example.com/images URL to the path of each image in the generated example-image.sliced.html file.

pngslice  -i 'http://foo.example.com/images/' example-image.png 

An alternative to the -i option is to use the -b option to specify the basename for your images and sliced HTML file. If you use -b then the paths to the images also contain the basename exactly as you supplied it on the command line. The -b option might not be as useful as it might seem, however, because the generated HTML file will use the basename you supply when it includes the sliced images. For example, the below invocation will create an HTML file at /tmp/images/foo.sliced.html that references the slice images using image paths like src="http://bar.example.com//tmp/images/foo.05.png". As you can see, you can have conflicts when you use the basename to specify both where output files are written and as part of the image path in the generated HTML.

$ mkdir -p /tmp/images
$ pngslice 
    -b /tmp/images/foo 
    -i http://bar.example.com 
       example-image.png 

Here’s another potential problem. If you use pngslice on a PNG image file that contains transparency, pngslice will treat any pixels that are totally transparent as being expendable. If your image has no transparency information in it, pngslice will treat fully white as expendable. In the example image of balls shown above, the middle of the image on the right side is totally transparent, so pngslice will not include them in the vertical image slices for the middle of the image. This will make the image slices for the middle not as wide as for the top and bottom, and thus text can start more toward the left of the page to fill in the space between the top and bottom balls. You can chose what color(s) or transparency intensities are expendable using the -t option to pngslice. The argument takes the form r/g/b(/a), where each component is a integer between 0 and 255, a range in the form min-max, or a full stop (.) to indicate any value.

If you find that your text gets too close to the image slices, you can tell pngslice to include a margin around the image using the -m parameter. Its arguments are either a single digit specifying both margins, or a digit/digit combination specifying the left/right margins. The digits specify how many units of em to make the margin. An em is roughly the width of the letter m.

You can also choose to right-justify the image, so that the image will appear on the right side of the Web page and text will be on the left, flowing into the image where it is transparent. The default is for a left-justified image.

To use the image slices, simply include the generated HTML file into your PHP page where you would like the image to appear, as shown in the below example and following screenshot.

...
<h1>linux.com test of pngslice</h1>

<?php
include('example-image.sliced.html');
?>

<p>
pngslice is not packaged for Hardy, ...

Each time you run pngslice, the HTML file that includes all the image slices is rewritten. It makes sense to include this HTML file on the server side so that changes are automatically propagated to the Web site, rather than copying and pasting the slice HTML directly into your site.

Creating Web sites that render properly in all modern browsers is a difficult enough task — creating a site that also renders reasonably well in older generation browsers is a chore. pngslice helps you have text routed around the rough edges of an image even when your site has to render with older browsers.