ライブウェブサイトのサムネイルを最適化する最適な方法は何ですか？

Question

背景：私が作成したサイトのウェブデザインポートフォリオを作成しています。特定のページが動的であるためライブサムネイルを作成することで得られる効果が好きです。各ページを開く必要なく一目で見ることができてうれしいです。さらに、私のポートフォリオのこれらのサイトは絶えず更新されており、私はサイトの新しいサムネイル写真を撮り続けることを望んでいません。

質問：コードを最適化する最適な方法は何ですか？現在、1つのWebサイトに12個のWebページがロードされています。そのサイトの最初のビューを読み込むだけの簡単な方法はありますか？とにかく、サイトの全画面表示がロードされずに縮小されるように、サイトの読み込み速度が向上しましたか？可能であれば、ポートフォリオページの読み込み時間を削減したいと思います。私はこれが私がやろうとしていることをするための非正統的な方法かもしれないと理解しています。このコンセプトを実現するためのよりよい方法があれば、私は何か提案が大好きです。

CSSコード：

/***************************/ 
/***** LIVE THUMBNAILS *****/ 
.pa-live-thumbnail iframe { 
    width: 1280px; 
    height: 768px; 
    opacity: 0; 
    transition: all 300ms ease-in-out; 
} 
.pa-live-thumbnail { 
    position: relative; 
    -ms-zoom: 0.2; 
    -moz-transform: scale(0.2); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.2); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.2); 
    -webkit-transform-origin: 0 0; 
} 
.pa-live-thumbnail-container { 
    width: calc(1280px * 0.2); 
    height: calc(768px * 0.2); 
    display: inline-block; 
    overflow: hidden; 
    position: relative; 
    border: solid 1px black; 
} 
.pa-live-thumbnail-container a { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    width: 1440px; 
    height: 900px; 
    z-index:10; 
} 
.pa-live-thumbnail-container:before { 
    position: absolute; 
    display: block; 
    margin-left: auto; 
    content: "Loading thumbnail..."; 
} 

HTMLコード：

<div class="pa-live-thumbnail-container"> 
    <div class="pa-live-thumbnail"> 
    <iframe src="http://pa-lib.com" onload="this.style.opacity = 1"></iframe> 
    <a href="http://pa-lib.com"></a> 
    </div> 
</div> 

Answer 1

私は@Iを取っているが、私が欲しい効果を得るための最良の選択肢としてkodeの答えを持っています。しかし、単純化のために、ライブサムネイルを取得して静止画像に戻すのは良い選択ではないことに気付きました。私はこれに戻ってくるときにこれをファイルに保存します。