В каком формате лучше делать раскраски для сайта, как вставлять?

1. Не "на фотошопе", а "в фотошопе", удобней всего сохранять с прозрачным фоном в PDF формате - это не такие тяжелые файлы, да и смотрятся довольно неплохо, сохраняя преемственность (фон сайта просвечивает сквозь них с заданной прозрачностью).
2. На сайт удобней вставлять уменьшенные изображения, чтоб при нажатии открывались или скачивались нормальные полноценные картинки - при такой структуре сайт будет открываться быстро, пользователь будет видеть не саму картинку, а т. н. "превью", если решит, что для него картинка интересна - увеличит, посмотрит.
3. Если картинок много, удобней отображать их (превью) не сразу все, а по темам + не более 15-20 на странице с возможностью листинга галереи.
4. Увеличенная картинка должна открываться в этом же окне (проявляющийся DIV), а не в новом окне (новой вкладке), т. к. иначе будет тратиться много времени на открытие.
5. Возможно использовать эффекты появления / исчезания картинок при листинге, но можно и без них.

1

2

3

или примерно так ^

Здесь ^ превью сохранены в папке Foto с расширением gif, а полноформатные изображения с теми-же именами, но с расширением gif.png (по факту - файлы-картинки в формате png). При нажатии на превью, полноформатное изображение появляется в виде картинки чеуть ниже, в 3 раза больше, чем превью. Можно поиграться со стилями (курсор при наведении, например). Можно сделать, чтоб полноформат открывался по нажатию в соседней вкладке (если он не в 3 раза, а в 10-50 раз больше, это может быть актуальным) и пр.