Как правильно верстать такие сайты?
В данном случае использовались изображение формата jpg, размером 2640 x 1440 и весом 1.53 МБ, которое воспринимается как фон, но по факту фоном не является :)
Поверх него векторный слой svg с размечеными областями (в качестве редактора можно юзать Inkscape). Собственно вся магия реализована при помощи JS баблиотеки Raphaël.
Комплект на проверку оказывается не сложный: файлы изображения и svg от дизайнера, остальная работа за фронтенд девелопером.
это обычная png картинка, сверху которой положен слой свг, в котором отлавливается hover и производится вся "магия"