teratail header banner
teratail header banner
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.30%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

2990閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

1クリップ

投稿2021/10/19 17:22

編集2021/10/20 03:32

0

1

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

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

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

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

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

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

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

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

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

・pngでもjpgでも同じようになってしまう。プログレッシブではない?
・画像サイズを2倍、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 体験者の声 --> コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/10/20 01:24

プログレッシブjpgということはないですか?
退会済みユーザー

退会済みユーザー

2021/10/20 02:13 編集

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

退会済みユーザー

2021/10/20 02:14

確認してみたところ、jpegではなくpngのものもございました。 プログレッシブはjpg限定のものでしょうか。 荒くなる画像データのサンプルです。 ファイルタイプ: PNG ファイルサイズ: 525 KB サイズ: 1024 × 1024
Lhankor_Mhy

2021/10/20 02:24

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

退会済みユーザー

2021/10/20 03:08

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

2021/10/20 03:23

なんとなくですが、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
退会済みユーザー

退会済みユーザー

2021/10/20 03:33

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

退会済みユーザー

2021/10/20 12:59 編集

追記 有力かもしれない情報が出てきました。 こちらはデベロッパーツールで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でもっと大きな幅で実装している為、この数値の差ではないかと思います。
guest

回答1

0

ベストアンサー

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

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

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

投稿2021/10/20 14:41

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問