?これらの画像はappendが実行される際にﾛｰﾄﾞされるのでしょうか？

普通のﾌﾞﾗｳｻﾞだと､そうなります｡
全く同じ画像であれば､2回目は読み込みに行かないはずです｡

?最初に全画像ﾃﾞｰﾀをﾛｰﾄﾞして､ｸｲｽﾞ時の処理を軽くすることは可能でしょうか？

もし､画像のﾛｰﾄﾞに時間がかかっているのが遅い原因だとしたら､軽くはできます｡
が､その分､最初にがっつりと待たされます｡
高速化とは､言えないでしょうね｡

?上記?以外で処理を軽くする方法はあるのでしょうか？

まずは､画像を小さくしましょう｡

選択肢の部分は､画像に含まれていないような気もしますが､とりあえず質問でｱｯﾌﾟﾛｰﾄﾞされた画像を､JPEG で画質を落としてみました｡

質問にｱｯﾌﾟされた元画像
ｻｲｽﾞ：70036 ﾊﾞｲﾄ

画質 40 JPEG
ｻｲｽﾞ：13936 ﾊﾞｲﾄ

画質 20 JPEG
ｻｲｽﾞ：10267 ﾊﾞｲﾄ

画質 10 JPEG
ｻｲｽﾞ： 7982 ﾊﾞｲﾄ


この程度の線画だったら､画質を落としても､十分だと思います｡
因みに､画質を落とすのは Irfan View というｿﾌﾄを使いました｡


後､実物を見てないのであれなんですけど､体感の速度を上げるとしたら､ぼくだったら､次の質問の画像を先読みするように作ります｡
ｸｲｽﾞなので､質問を見ているときに､考えている時間があるはず｡
その間に､次の画像を読み込みます｡

div#bodyarea001 が､質問を表示する領域だとして､もうひとつ display:none にして見えない DIV を用意しておきます｡
正解の回答がｸﾘｯｸされたら､見えない領域に読み込んだ次の画像を､div#bodyarea001 に表示して､その次の問題を見えない領域にﾛｰﾄﾞします｡

flag が問題の通番だとして､こんな雰囲気になると思います｡

$("div#bodyarea001 img").attr("src", "http://xxx/wp-content/uploads/" + flag + ".jpg");
$("div#next_question img").attr("src", "http://xxx/wp-content/uploads/" + (flag + 1) + ".jpg");

IMG ﾀｸﾞを消して書き換えるのではなく､src 属性だけを入れ替えれば十分です｡

おおむねa-kuma3さんがお答えになっていますので､細かい補足です｡

画像圧縮は無劣化でもﾌｧｲﾙｻｲｽﾞを落とす方法が色々あります｡試しに https://compressor.io/ を利用してみました｡

pngのまま､70,036 ﾊﾞｲﾄ→19,550 ﾊﾞｲﾄになりました｡
このあたりでﾗｲｾﾝｽとの兼ね合いを見てみて下さい｡ google:画像 無劣化 圧縮

上に挙げられているように先読み(ﾌﾟﾘﾌｪｯﾁ)以外だと､ﾛｰﾄﾞ自体を遅延させる方法があります｡実装の方式によると思いますが､jQueryだとjQuery.lazyloadﾌﾟﾗｸﾞｲﾝがあるので検討なさってみて下さい｡

• Lazy Load Plugin for jQuery

導入例がこちらです｡PC/ｽﾏﾎ共に､読むまで画像を出さないようにしています｡

• ﾓｰﾆﾝｸﾞ･ｱﾌﾀﾇｰﾝ･ｲﾌﾞﾆﾝｸﾞ合同Webｺﾐｯｸｻｲﾄ ﾓｱｲ

ただ､ｸｲｽﾞのような画面ではあまり使いどころが無いかもしれません｡

他の方の回答で解決出来ているので､画像圧縮について記載させていただきます｡

PNGoo(pngquant)というｿﾌﾄでPNGの色数を減らすことでｻｲｽﾞを小さく
することができます｡GPLのため無償で使えます｡
http://www.forest.impress.co.jp/docs/review/20140228_637513.html
http://pngquant.org/

参考ですが､掲載されているｲﾗｽﾄを8色にした場合約6KBになりました｡

回答頂いたみなさん､誠にありがとうございました｡
今回は一番最初に回答して下さり､欲しい情報も的確であったため
a-kuma3さんにBAをつけさせて頂きました｡

また圧縮ﾂｰﾙとしてはcnoさんの紹介して頂いたPinGooが私には相性が良かったです

･画像を事前にﾛｰﾄﾞする事
･画像を圧縮する事

でかなり高速に動くようになりました｡
今後ともどうぞよろしくお願い致します｡