WEB制作、マーケティングに関する情報をお届けします。

サイトの読み込みに時間のかかる画像ですが、圧縮したい画像フォーマットをWebPを使用することによって軽量化は可能です。
ただ、高画質で利用者に見せいたい場合はどうしてもファイルの容量が嵩んでしまいます。
そんな時に使用できる『サイトの高速化にポップアップでの画像の読み込みをクリック後に行う方法』を紹介します。
ユーザーが意図的に画像をみたい時にしか大容量の画像を表示させないことでサイトを高速化できます。
写真やイラストなどのギャラリーサイトでは特に使えるテクニックです。

コードを紹介

<div class="pop_up">
    <div>
        <div class="pop_up_click">
            <img src="lake-6526995_small.jpg" alt="Thumbnail">
        </div>
        <div class="pop_up_content">
            <img data-src="lake-6526995.jpg" alt="Full Image">
        </div>
    </div>
    <div>
        <div class="pop_up_click">
            <img src="lake-6543167_small.jpg" alt="Thumbnail">
        </div>
        <div class="pop_up_content">
            <img data-src="lake-6543167.jpg" alt="Full Image">
        </div>
    </div>
    <div>
        <div class="pop_up_click">
            <img src="lake-6701636_small.jpg" alt="Thumbnail">
        </div>
        <div class="pop_up_content">
            <img data-src="lake-6701636.jpg" alt="Full Image">
        </div>
    </div>
    <!-- 他の画像も同様に追加 -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // サムネイルクリックでモーダルを表示
    document.querySelectorAll('.pop_up_click').forEach(function(clickElement) {
        clickElement.addEventListener('click', function() {
            const contentElement = clickElement.nextElementSibling; // 隣接する要素を取得
            if (contentElement && contentElement.classList.contains('pop_up_content')) {
                // 画像のデータ属性から実際の画像URLを読み込む
                const imgElement = contentElement.querySelector('img');
                imgElement.src = imgElement.dataset.src;
                
                contentElement.classList.add('open');
                document.body.classList.add('modal-open');
            }
        });
    });

    // モーダル内の画像クリックでモーダルを閉じる
    document.querySelectorAll('.pop_up_content').forEach(function(contentElement) {
        contentElement.addEventListener('click', function() {
            contentElement.classList.remove('open');
            document.body.classList.remove('modal-open');
        });
    });
});
</script>
<style>
    .pop_up{
        max-width: 800px;
        margin: 40px auto;
        display: flex;
        justify-content: space-between;
    }
    .pop_up img{
        width: 100%;
    }
    .pop_up > *{
        width: calc(33.3333% - 10px)
    }
    .pop_up_content {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }
    .pop_up_content img {
        max-width: 90%;
        max-height: 90%;
    }
    .pop_up_content.open {
        display: flex;
    }
</style>

コードを解説

HTMLについて

隣接セレクタを使用して画像の読み込みを行いますので、小さい画像の隣にフルサイズ画像要素を設置する必要があります。
この小さい画像は隣接セレクタを使用しているためテキストなどに変更することも可能です。
フルサイズ画像の読み込みはdata属性を使用しますのでそこに画像のURLを入れてください。

        <div class="pop_up_click">
            <img src="小さい画像のURL" alt="Thumbnail">
        </div>
        <div class="pop_up_content">
            <img data-src="フルサイズ画像のURL" alt="Full Image">
        </div>

CSSについて

ポップアップ側のCSSは以下で定義しています。
単純に画像を立ち上げるためだけのスタイル定義なので、クローズボタンや読み込み中のローダーなどはそれぞれに定義してあげたほうがいいでしょう。

.pop_up_content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
.pop_up_content img {
    max-width: 90%;
    max-height: 90%;
}
.pop_up_content.open {
    display: flex;
}

Javascriptについて

ドキュメントの読み込みが完了してから読み込みします。

document.addEventListener('DOMContentLoaded', function() {
});

クリック元の小さい画像が入ったボックスをクラス名(pop_up_click)で取得、forEachで全ての要素に処理を適用します。

 document.querySelectorAll('.pop_up_click').forEach(function(clickElement) {
 });

クリックされた場合に隣接セレクタを取得します。
隣接セレクタが存在するか、取得した隣接セレクタに『pop_up_content』のクラスめいが含まれるかをチェック、存在する場合はデdata属性をsrc属性にセットして読み込み、ポップアップ用のクラスを付与します。

// クリックで実行
clickElement.addEventListener('click', function() {
// 隣接する要素を取得
    const contentElement = clickElement.nextElementSibling;
// 値があるか、クラス名があるかをチェック
    if (contentElement && contentElement.classList.contains('pop_up_content')) {
// 画像のデータ属性から実際の画像URLを読み込む
        const imgElement = contentElement.querySelector('img');
        imgElement.src = imgElement.dataset.src;
// ポップアップ用のクラス名を付与
        contentElement.classList.add('open');
        document.body.classList.add('modal-open');
    }
});

上記でポップアップが実装できます。
次にポップアップを閉じる際の処理を書きます。
『pop_up_content』を持つ要素を取得して、クリックで実行、立ち上げたポップアップを立ち上げる際に付与したクラス名を削除してポップアップを閉じます。

// ポップアップで立ち上がった要素を取得
document.querySelectorAll('.pop_up_content').forEach(function(contentElement) {
    // クリックで実行
    contentElement.addEventListener('click', function() {
        //ポップアップを立ち上げる際に付与したクラス名を削除
        contentElement.classList.remove('open');
        document.body.classList.remove('modal-open');
    });
});

まとめ

以上、『サイトの高速化にポップアップでの画像の読み込みをクリック後に行う方法』でした。
高画質な画像をユーザーに見せる場合には圧縮することで可能にはなりますが、限界値が存在します。
読み込み時間がかかるだけでなく、読み込みに時間のかかるサイトはGoogleの検索エンジンからも評価を得られない場合もあります。
とはいえ、カメラマンやイラストレーターさんなどは高画質でユーザーに画像を見せたい場合もあるでしょう。
そんな場合は今回の方法を参考にしてください。