コーディングの際に意外と手間取るのが、画像のスライス、と画像の命名です。
CSSのclass名とid名も同じくらい迷って後で修正する際に迷子になってしまうこともよくありますが。。。
画像の命名をスムーズにするために命名ルールを決めたいと思います。
あと、忘れないように備忘録としても・・・。

上の図が基本的なルールです。
例:img_top01.jpg

識別名の一覧は以下になります。

識別名 用途 命名サンプル
bg 背景や、ボーダ用にリピートされて使われる画像 bg_top01.jpgbg_dotx01.jpgbg_dotx_3x1.jpg
btn ボタンとして使われる画像 btn_contact01.jpgbtn_contact01_on.jpg
ico アイコンとして使われる画像 ico_arrow01.jpgico_square01.jpg
bnr バナーとして使われる画像 bdr_top01.jpgbnr_side01.jpg
h1-h6 h1タグなどの論理タグで囲まれる見出し画像 h2_business01.jpgh3_service01.jpg
tit h1-h6等に用途が限られない見出し画像 tit_blog01.jpgtit_news01.jpg
txt デザイン上、画像化するテキストの画像 txt_blog01.jpgtxt_news01.jpg
pic 商品や人物、風景などの写真画像 pic_blog01.jpgpic_news01.jpg
thumb 写真と連動するサムネイル(小さい)画像 thumb_blog01.jpgthumb_news01.jpg
img 写真以外のイラストや図表などの画像 img_blog01.jpgimg_news01.jpg
mainimg ページのメイン画像 mainimg_top.jpgmainimg_news.jpg
mov 動画(youtube、vimeoなどはURLで) mov_top.movmov_news.mov

識別名はこれだけではなく、いろいろまた追加もあると思います。
とりあえずこれをベースにしたいと思います。