If you are using a desktop browser (except for Opera), play with the paint widget on the left. When you select a tool and mouse over the white canvas, your mouse arrow will change to a custom cursor representing that tool (à la Photoshop or The GIMP). This is not done by creating a DOM object and moving it to the mouse’s coordinates — we are using CSS to do it using the cursor property’s url() function. When used properly, custom CSS cursors can add a little bit of polish to your web sites and applications. However, doing this in a cross browser way can be a little confusing unless you know all the gotchas, and this article will go into depth about them. We will also explore issues such as when to use custom cursors, performance, what makes good cursor design, cursor file formats, and cursor size.

When Should I Use Custom Cursors Instead of the Built-in Ones?

In general, CSS cursors (built-in or custom) should be used as a hint to the user as to what action the mouse can perform. Let’s take a look at an example that doesn’t use custom cursors to illustrate a common use-case: drag and drop. To give users a visual cue that an item is draggable, it is common practice to set an object’s CSS cursor property to move. Mouse over the object draggable object below to see how this works.

This is done with the following CSS:

a[draggable="true"] {
    cursor: move;
}

The code above ensure that when a user “mouses over” a link with the HTML5 Drag and Drop “draggable” attribute, the move cursor appears. It is a great way to help the user “figure out” how to use the user interface with minimal instruction. A list of the built-in cross-browser cursor property values can be seen at CSS2 Cursor Style Page.

The built-in cursors are great, but there are a few things to keep in mind.

• Built-in cursors may look different depending on what browser/operating system is being used. For example, some browsers (e.g. Firefox on Windows 7) will show the move cursor as a four-pointed arrow () while others (e.g. Firefox on Mac OS X) will show a hand (). Using custom cursors, you can ensure all applications are using the same cursor for a more consistent expeience. The example below is the same as the one above, except in all browsers, you will see the a hand icon.
  Drag me!
• Not all browsers support all the same “built-in” cursors, and custom cursors allows you to add support for them. For example, while Firefox on Windows doesn’t support context-menu, it seems to be the only browser that supports the zoom-in and -out cursors. Using custom cursors, you can implement all of these in all browsers.
• There may not be a built-in cursor for the use-case you need to solve. A good example is in the paint widget at the beginning of this article — none of those cursors exist natively in any browser.
• It’s nice to design your own cursors, since sometimes the built-in ones may be a little basic looking (If you do this, please keep in mind that users are used to the built in ones, so your custom cursor shouldn’t look too much different than them if you want your application to be easy-to-use).

The CSS of Custom Cursors

Here is some sameple CSS code that will show custom cursor when the user mouses over a div with an id of dragMe. If the browser doesn’t do custom cursors (like Opera), the cursor fallback to the built-in move cursor.

#dragMe {
    cursor: url('customMoveCursor.cur'), move;
}

As long as your cursor is in the same directory as your stylesheet, and as long as it is an uncompressed .CUR file, it’s as simple as that. Note that a .CUR file is just an .ICO file with extra information that allows the developer to define the “host spot” position of the cursor (i.e. the part of the image which points to the position of the mouse). Note that .CUR files support 32-bit color (16.7 million colors plus alpha channel transparency), so designers can create cursors that have semitransparent areas like shadows and anti-aliasing.

How does one create a .CUR file? Not too many graphic tools create .CUR files natively, but there are some easy solutions. If you are a Photoshop user, the ICO (Windows Icon) file format plugin for Photoshop is what you are looking for (I have not used it myself, but it apparently can save .CUR files directly. Any comment on how well this works would be most welcome). If, like me, you use the GIMP, simply save the file as a .ICO file and convert it with this command line tool written in Python by Jan Thor.

The Gotchas of Custom CSS Cursors

There are a few things you need to remember when using CSS cursors

1. You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices. :-)
2. Internet Explorer interprets relative URLs as relative to the HTML document, and not the CSS file like God (and the W3C) intended (Sometimes it seems that IE goes out of its way to make lives difficult for us developers). This is true for all versions of IE, even IE9. To ensure cross-browser compatibility, you must either use an absolute URL:
   

   #dragMe {
       cursor: url('/cursors/customMoveCursor.cur'), move;
   }
   

   or a fallback url for IE:

   /*
    * Assume this the HTML is in a directory above this CSS file
    */
   
   #dragMe {
       cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
               url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
               move;                                       /* Older browsers     */
   }
   

3. It is best that your .CUR files are 32×32 pixels in size. IE9 seems to resize cursors that are smaller than this to 32×32, and IE8 and under cannot show cursors larger than this size. While it is true that you can fit multiple file sizes inside a .CUR file, sticking with one 32×32 image will ensure cross-browser consistency.
4. Although .CUR files can be saved in either a compressed or uncompressed format, not all browsers can read the compressed ones. It is best to save your cursors in uncompressed format. If you are using the GIMP to save to .ICO format first before you convert to .CUR, make sure that the .ICO is saved without compression.

Performance Issues

As mentioned earlier, a lot of browsers (like Firefox or IE6) cannot show compressed .CUR files, but they can show .PNG files. Since we would like to use a compressed version if possible, one could do this:

#dragMe {
    cursor: url('/cursors/customMoveCursor.png'),      /* Modern browsers    */
            url('/cursors/customMoveCursor.cur'),      /* Internet Explorer  */
            move;                                      /* Older browsers     */
}

This works well as long as the cursor hotspot is 0,0. You can define a PNG hotspot using the CSS3 cursor syntax, but it breaks IE:

#dragMe {
    cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15)            */
            url('customMoveCursor.cur'),      /* IE chokes on the above line .. never gets here */
            move;                             /* Older browsers (IE never gets here either)     */
}

In order to fix this issue, one must you conditional comments to make a separate IE from everyone else. Let’s use a variation of Paul Irish’s Conditional Comment pattern to do this. Change the html tag to this:

<!--[if (lte IE 9) ]><html class="ie9 oldIE">    <![endif]-->
<!--[if (gt IE 9)  ]><html class="modern">       <![endif]-->
<!--[!(IE)]><!-->    <html class="notIE modern"> <!--<![endif]-->

Now we can use this CSS to ensure .PNG loads in non-IE browsers:

html.modern #dragMe {
  cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15).   */
          move;                             /* Older browsers                         */
}

html.oldIE #dragMe {
  cursor: url('customMoveCursor.cur'),      /* IE .CUR file loads                     */
          move;                             /* In case IE can't load the above.       */
}

The extra bytes used to create the conditional comments may or may not be worth the trouble. If you are using conditional comments (like I do all the time), it may be worth it.

A Final Word On Testing in IE

If you edit a .cur file on the web server and reload your page with that cursor in Internet Explorer, you may not see the edited change, since IE has kept the older cursor in cache and has a hard time letting go, kind of like that person you dated in high-school. You will need to clear IE’s cache in order to see the new cursor. This is quite annoying, and it is something you should keep in mind when troubleshooting in IE.

Further Reading

• Cross-browser custom CSS cursors by Adrian Ber

There have been many times I have come across the need to take an image and cut an irregular shape out of it. Normally, when a developer comes across this requirement, the only thing to do is to open the image up with your favorite graphics editor, use the select tool to cut out the shape you want, and then save the result as a PNG, since it is the only image format used by all web browsers that support alpha channels. The problem is that PNG images, while compressed, are not as small as JPEGs if the source image is a photograph, and the download time of a page can balloon to unacceptable levels if there are many of these types of image on a page. When I first came across this problem, I didn’t think there was an obvious solution, but after a lot of thought, I created a library that uses HTML5 canvas to clip a JPEG (or any other image for that matter). The library also supports older versions of IE (7-8) using the Excanvas JavaScript library which polyfills canvas using VML.

Okay, How Can I Do The Same Thing?

• Download my script from github (It includes jQuery 1.6.4 and excanvas release 3. It should work with later versions — if it doesn’t, please let me know and I’ll fix it ;-) ) .
• Include them into the head of your document.
  

    <script src="/path/to/js/jquery-1.6.2.min.js"></script>
  
    <!--[if lt IE 9 ]>
     <script src="/path/to/js/excanvas/excanvas.compiled.js"></script>
    <![endif]-->
  
    <script src="/path/to/js/polyClip-p.js"></script>
  

• Layout your page as normal, placing img tags where you want the clipped images to go:
  

  <div class="clipParent">
    <img src="images/image.jpg" />
  </div>
  

  Note the div tag with the class of clipParent. You must surround all the image tags with data-polyclip attributes set one. This is so you can style the image correctly, since the library will remove the image tag and replace it with a canvas element.

• For every image on your page that you want to clip, calculate the points of the shape you want to cut out of the image and place them in the data-polyclip attribute. For example, let’s say you have the following shape you want to cut out of a photograph:
  
  

  (487, 4)

  (500, 239)

  (19, 239)

  (43, 195)

  You would then just set the data-polyclip attribute to those points:

  <img src="image.jpg" data-polyclip="487, 4, 500, 239, 19, 239, 43, 195" />
  

  Note that the point co-ordinates are comma delimited. If you don’t want to calculate these numbers by hand, you can use your favorite imagemap generation tool to do generate the list of coordinates. Just remember to take the coordinates out of the imagemap code and stick it in the data-polyclip attribute (for the examples on this page, I used the on-line tool available at image-maps.com).

Why Should I Do This Instead of Using a PNG?

Compare the image above with a PNG clipped with the GIMP. Even when I compressed the PNG with my PNG optimization script, the 191K PNG file is huge compared to it’s tiny 18K polyclipped JPEG analogue (Note: file sizes refer to the size of the full image as displayed at the top of this article):

JPG using polyClip.js (18K)	PNG (191K)

You may ask whether the amount of JavaScript used in this solution is greater than the bandwidth saved by using JPEG compression. Not including jQuery, the amount of JavaScript clocks in at 2K or 13K, depending on the browser used (2K for the compressed polyClip script and 11K for excanvas, which will only be loaded by IE7-8). Although jQuery adds 91K to this equation, it doesn’t matter that much to me personally since I am probably using it for other parts of my page anyways. Even with jQuery, the amount of JavaScript downloaded outweighs using a PNG, especially if your are clipping a larger image or a huge amount of smaller images.

Download the latest version of polyClip.js from github.

A Few Caveats

• In IE7 and 8, the image may appear briefly as a black outline before the image appears. Other than that, it looks about the same as the other browsers.
• The image does not show up correctly in Opera Mini. Then again, a lot of things (e.g. CSS3 text-shadows, CSS3 Transforms, etc.) don’t show up correctly in Opera Mini. :-)

The script included in this post can shrink your images down for easy handling.

Optimizing images is not only important for web applications, it is also important for reducing the size of print documents (e.g. Word Documents, PDFs, etc). This size is important not only when emailing them out, but also when embedding them into documents that you will be sharing with others.

PNGs should be used for drawn images and screenshots (for photographs, it is better to use the JPEG file format).  It uses a lossless compression algorithm, so what you save in your graphics editor is exactly what your users will see.  It also supports features like alpha channeling.

This article will show how to optimize images in this format.

A case study: Optimizing Screenshots

There are many times a web developer will need to produce screenshots of the work they do to send to clients. When I need to do this, I use the excellent Screengrab Firefox Addon, since it is so easy to use. I will first talk about how to take screenshots using this tool, and in the next section, talk about how to optimize the PNG files they produce. (Note: If you need to take screenshots using Internet Explorer, I would suggest using The GIMP’s screenshot feature to do this. There is a great simple tutorial on how to do screenshots with the GIMP at the The Networked Writing Environment at the University of Florida website).

Using Screengrab

After you install this tool, all you have to do is right click the document you want to take a screenshot of and you will get the following menu.

Right-click any web page
to produce a screen capture of any page.

How to reduce image data size

I created a script that would reduce this file size as much as possible. How does this script work:

1. It first uses ImageMagick to reduce the amount of colour-palette inside the image to 256, since Screengrab will usually create 16-bit images (which have millions of colours). This usually results in 25% reduction of the size of the image and the extra colours aren’t missed when these images are inside a Word Document because the physical dimensions of these images are smaller than the actual page itself.
2. It then uses two command line tools, optipng and advpng, to compress the image further. It uses these programs in a variety of ways to see which is the most optimal, and saves the smallest result. This usually results to a further 30-40% reduction is data size.

Together, it is possible to reduce an image to 50-70% of it’s original size. Not bad for a script done in my spare time.

An archive with this script and supporting files is available here. This archive includes:

• reduceColours: the script that reduces the images to 256 colours.
• compressPng: the script that optimizes the PNG image
• optimizeImagesForPrint: the script that executes reduceColours and compressPng in one step.
• optipng.exe and advpng.exe, the actual file compressors used by compressPng.

Note that in order to use this script under Windows, you must have Cygwin installed on your machine. If you don’t know how to do this, read Installing Cygwin. Make sure you install ImageMagick using the Cygwin installer, since is needed for the reduceColours script.

If you run Mac OS X, Linux, FreeBSD or any other UNIX variant, you should be able to run this script as long as you are comfortable with the command line.  Note that you will have to download optipng and advpng separately, since the archive only contains the Windows binaries of these programs.

To run the optimizer, use the following syntax inside a bash shell:

optimizeImagesForPrint <imageList>

It will create a directory called optimized that will contain all the optimized images. If you just want to reduce the images to 256 colours, or optimize 16-bit images without reducing the colours, use reduceColours and compressPng in the same manner.

Conclusions

Even though this article has focused on embedding PNG images into documents, the ideas here can be used when optimizing PNGs for the web. There may be cases where you don’t want to reduce the amount of colours — feel free to change the script to do that.

Please let me know if you find any bugs or if you find other/better ways to optimize images.

The scripts are available here in a handy zip archive.