Вы можете использовать карты изображений, но их сложно создать, и если вам просто нужна прямоугольная область, подумайте об использовании невидимых абсолютно позиционированных элементов над элементом с фоновым изображением.
Вам совсем не нужно вырезать изображение, просто конвертируйте его в формат jpg.
<html><head><title>Clickable Areas</title><style type="text/css">
#imageArea
{
position:relative;
width:100px;
height:60px;
background-image:url(areaImage.jpg)
}
#imageArea a
{
width:20px;
height:20px;
position:absolute;
}
#area1
{
top:20px;
left:20px;
}
#area2
{
top:20px;
left:60px;
}
</style></head>
<body>
<div id="imageArea">
<a href="link1.htm" id="area1"></a>
<a href="link2.htm" id="area2"></a>
</div>
</body>
</html>