画像には手を加えず、ブラウザの画面表示の際にCSSのみで切り抜き表示（マスキング）する場合、CSS3の「clip-path」プロパティが便利です。Illustratorのクリッピングマスクのように複雑な図形で切り抜くことも可能です。

この例では、自由な形で切り抜くためpolygonを使用し、パスを繋ぐアンカーポイントを左上の基点から時計回りに、x軸の値半角スペースy軸の値を一組にして、カンマ区切りで指定していきます。なお、現在（2016年1月）対応している主要なブラウザは、webkit系のみで、Edge、IE11、Firefoxなどは非対応です。
対応しているとこんな感じになります。

CSSソース

#clipping  {
   width: 800px;
   height: 400px;
   background: #1e90ff;
   -webkit-clip-path: polygon(2% 3%, 27% 25%, 27% 3%, 49% 22%, 58% 3%, 67% 23%, 
	99% 2%, 83% 41%, 100% 56%, 85% 70%, 99% 98%, 76% 86%, 73% 100%, 59% 87%, 
	47% 99%, 44% 78%, 29% 99%, 30% 74%, 1% 98%, 14% 60%, 1% 47%, 17% 41%);
   clip-path: polygon(2% 3%, 27% 25%, 27% 3%, 49% 22%, 58% 3%, 67% 23%, 99% 2%, 
	83% 41%, 100% 56%, 85% 70%, 99% 98%, 76% 86%, 73% 100%, 59% 87%, 47% 99%, 
	44% 78%, 29% 99%, 30% 74%, 1% 98%, 14% 60%, 1% 47%, 17% 41%);
}