【画像が荒い】特定のセクションの画像が急に荒くなったり、高画質に戻ったりする。

Question

実務で作っているサイトなので、実際の画像を見せることが難しくテキストベースになるのですが、
特定のセクション内の画像が急にぼやけて荒くなったり、ちょっとたつと高画質に戻ったりします。

該当エリアには「Swiper.js」というスライドショーのライブラリを使用しておりますが、その他のセクションも同じようにスライドショーが使われているにもかかわらず画像は綺麗な状態です。(該当のエリアのみです)

①読み込みに時間がかかっている
②コーディングがおかしい
③画像のサイズを2倍にしていない

③が濃厚かと思い対処しましたが、3倍以上のサイズにしているにもかかわらず依然として画質は荒いままでした。

となると①と②が濃厚になるのですが、如何せんこのようなケースに陥ったことがないので、
①はそうなると他のスライドショーのエリアもそうなるのではないかと思います。
②に関しては念の為Sassのコードを添付いたします。

皆様の知恵をお借りしたいと思います。
こういった現象が起こることはよくあるのでしょうか。

ちなみに該当エリアはWordPressのカスタムフィールドに入れた画像を出力されるような形式にしております。
(テーマフォルダ直下に入れている画像ではなく、WordPressのメディアライブラリに入っている画像ということです)

もし投稿内のカスタムフィールドに入れた画像があればそれを表示する、
なければ、アイキャッチ画像を表示する
それもなければnoimgを表示する
という記述にしているつもりです。

追記)今調査したもの
・スマホやタブレットは最初か高画質で表示される
・PCサイズのみ最初ガビガビしていて荒い　→　更新すると画質が上がってガビガビが消える
または、高品質だったものが急にガビガビになる

・pngでもjpgでも同じようになってしまう。プログレッシブではない？
・画像サイズを２倍、3倍とあげても特に変換なし

このスタイルシートのimgが該当箇所になります、

  // セクション | VOICE
  .Front-secVoice
    .voiceSlider-container
      padding-bottom: 8px
      position: relative
      overflow-x: hidden
      .swiper-wrapper
        .swiper-slide
      　　　　　　　　img
            width: 100%
            height: 265px
            object-fit: cover
            @media screen and (max-width: $pc-Width)
              height: 21vw
          div
            background-color: #fff
            width: 100%
            height: 180px
            letter-spacing: 0.03em
            padding: 8px 20px
            border-radius: 0 0 6px 6px
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16)  
            .lessonCategory
              padding: 4px 8px
              display: inline-block
              font-size: 1rem
              line-height: 1
              color: #fff
              background-color: $orange
            .courseCategory
              padding: 4px 8px
              display: inline-block
              font-size: 1rem
              line-height: 1
              color: #fff
              background-color: $green
            .businessCategory
              padding: 4px 8px
              display: inline-block
              font-size: 1rem
              line-height: 1
              color: #fff
              background-color: $blue
            .voicePostTitle
              margin: 8px 0
              font-size: 1.4rem
              .continuation
                +f-Yugothic
                color: $gray
                font-weight: normal
                font-size: 1.2rem


      .swiper-button-prev
        +swiper-button-prev(50%,-1.5%)
        &::after
          position: relative
          right: -5px

      .swiper-button-next
        +swiper-button-next(50%,-1.5%)
        &::after
          position: relative
          left: -5px
コード

    <!-- VOICE | KonMari Method 体験者の声 -->
    <section class="Front-secVoice">
      <div class="rowreverse-sp">
        <h2 class="bold">VOICE</h2>
        <p>KonMari Method 体験者の声</p>
      </div>

      <!-- PC版スライドショー -->
      <div class="swiper-container voiceSlider-container">
        <div class="swiper-wrapper">
          
          <!-- 3種類のカスタム投稿をランダムで出力する -->
          <?php
            $postargs = array('lesson-voice','business-voice','procourse-voice');
            $args = array(
              'post_type' => $postargs,
              'order' => 'DESC',
              'posts_per_page' => -1,
							// 'orderby' => 'rand',
            );
            $news_query = new WP_Query( $args );
            if ( $news_query->have_posts() ): while ( $news_query->have_posts() ): $news_query->the_post(); 
              $posttype = get_post_type();
          ?>
          <!-- 3種類のカスタム投稿をランダムで出力する -->

          <!-- カスタム投稿のスライドショー -->
          <div class="swiper-slide">
            <a href="<?php the_permalink(); ?>" class="<?php echo $posttype ;?>">

              <?php 
                  if($posttype === 'lesson-voice'){
                    echo "<p class=\"lessonCategory spview\">LESSON</p>";
                  }else if($posttype === 'business-voice'){
                    echo "<p class=\"businessCategory spview\">For Business</p>";
                  }else if($posttype === 'procourse-voice'){
                    echo "<p class=\"courseCategory spview\">PRO COURSE</p>";
                  }
              ?>

              <?php
								$imagePost = get_field( 'postSquareTypeImage' );
								if( $imagePost ) {
									echo wp_get_attachment_image( $imagePost );
								}
								else if (has_post_thumbnail() ) {
									the_post_thumbnail();
								} else {
									echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
								}
							?>

              <div>
                <?php 
                  if($posttype === 'lesson-voice'){
                    echo "<p class=\"lessonCategory pcview\">LESSON</p>";
                  }else if($posttype === 'business-voice'){
                    echo "<p class=\"businessCategory pcview\">For Business</p>";
                  }else if($posttype === 'procourse-voice'){
                    echo "<p class=\"courseCategory pcview\">PRO COURSE</p>";
                  }
                ?>

                <p class="voicePostTitle bold">
                  <?php
                  if(mb_strlen($post->post_title, 'UTF-8')>50){
                    $title= mb_substr($post->post_title, 0, 50, 'UTF-8');
                    echo $title.'<span class="continuation">... 続きを読む<span>';
                  }else{
                    echo $post->post_title;
                  }
                  ?>
                </p>
              </div>

            </a>
          </div>

          <?php endwhile; endif; wp_reset_postdata();?>
          <!-- カスタム投稿のスライドショー -->

        </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>


      
    </section>
    <!-- VOICE | KonMari Method 体験者の声 -->
コード

Comments

[Lhankor_Mhy]

プログレッシブjpgということはないですか？

[退会済みユーザー]

はじめてプログレッシブ,jpgという形式を知りました。
症状が酷使しているので、一度確認してみます。

[退会済みユーザー]

確認してみたところ、jpegではなくpngのものもございました。
プログレッシブはjpg限定のものでしょうか。

荒くなる画像データのサンプルです。
ファイルタイプ: PNG
ファイルサイズ: 525 KB
サイズ: 1024 × 1024

[Lhankor_Mhy]

インターレースPNG も似たような感じになりますが、525KB程度なら通常の通信環境ならばそこまで目立つことはないように思います。3G回線並みとかならあるかもしれないですが……

[退会済みユーザー]

なるほど、、、
今別のデバイスでも確認したのですが、スマホもタブレットも画質は安定していました。
つまりPCサイズのみということっぽいです。
私のPCのスペックはメモリ16GB　CPU corei7なので決して低くはないので。
なにかしらコーディングが原因かもしれません。

[Lhankor_Mhy]

なんとなくですが、wordpressの問題のように思えます。私はあまり詳しくないので、質問タグを編集してみては？

↓この「初期値： 'thumbnail'」というのが気になります。サムネール画像を渡してしまっているのかも……？などと感じていますが、詳しい人を待ちたいです。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_get_attachment_image

[退会済みユーザー]

ありがとうございます。
質問の編集とカテゴリー追加をして待ちたいと思います。

[退会済みユーザー]

追記
有力かもしれない情報が出てきました。
こちらはデベロッパーツールでimg要素を見てみると、指定した覚えのないwidth:150px height:150px
が指定されていました。
swiperで画像サイズが指定されているからかもですが。

Rendered size: 269 × 265 px
Rendered aspect ratio: 269∶265
Intrinsic size: 150 × 150 px
Intrinsic aspect ratio: 1∶1
File size: 2.9 kB

しかし、実際はcssでもっと大きな幅で実装している為、この数値の差ではないかと思います。続きを読む ∨

Answer 1

こちら解決いたしました。

wp_get_attachment_image( $imagePost,array(600, 600) );
コード

引数に縦幅と横幅にサイズを追記することでうまくいきました。
デフォルトでは横幅150px 縦幅150pxになっていたので、cssで指定した値よりも小さく
それが荒くなっていた原因となりました。