サポート » 使い方全般 » カバーブロックでの画像が元の画像よりボケている

  • 解決済 3mcdt

    (@3mcdt)


    カバーブロックを使ってみたのですが、同じ画像を普通にアップしたものと比べてみると、わずかではありますが明らかにボケています。これはカバーブロックそのものの機能上(画像を圧縮しているなど)止むを得ないことなのでしょうか。それともこれを元の画像並みにクリアーにすることは、可能なのでしょうか。
    よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 3mcdtさん、こんにちは。

    同じ画像を普通にアップしたものと比べ

    とおっしゃっているので、WordPress が画像アップロード時に自動生成する複数サイズの画像については、見て分かるほどの劣化がないのだと推察されます。
    だとすると、カバーブロックで表示されている画像が、アップロードされている実際のサイズよりも、CSS 等にて拡大もしくは縮小して表示しているからであろうと予測が立ちますので、ぼけていると思っている画像を右クリックして、「新しいタブで画像を開く」( Chrome の場合)等の方法で CSS の効いていない実際の画像を確認されてみてください。
    それでも画像がぼけて見える場合は、画像の再生成時に再圧縮されて劣化している可能性はあります。

    ご参考になれば。

    トピック投稿者 3mcdt

    (@3mcdt)

    shoukun0803さん、ご返事ありがとうございます。

    「新しいタブで画像を開く」をやってみたところ、画像はボケていません。普通にアップしたものと
    全く同じです。ということは、画像の再生成時に再圧縮はされていないという事ですね。それでも
    カバーブロックではボケているということは、どう考えれば良いのでしょうか。良くするする手立てはあるでしょうか。

    因みに、カバーブロックでは不透明度は当然「0」に設定しています。また、画像のサイズは出来るだけ元の画像と同じ大きさにしています。

    よろしくお願いいたします。

    3mcdtさん、こんにちは。

    「新しいタブで画像を開く」をやってみたところ、画像はボケていません。普通にアップしたものと全く同じです。

    であれば、カバーブロックに設定されている CSS が画像サイズを調整しているのでしょうから、ブラウザのデベロッパーツール等で CSS を確認し、必要に応じて CSS を書き換えるか、CSS で指定されている画像サイズで最初からアップロードしてみるのはいかがでしょうか。

    ご参考になれば。

    こんにちは

    カバーブロックの背景画像は、設定やビューポートの幅によっては、カバーブロックのサイズより小さい画像が表示される場合あります。この場合は画像が拡大表示されるので粗い画像となってしまいます。ビューポートの幅、カバーブロックのサイズを考慮したカバーブロック用の画像サイズの画像を用意するのがいいのかなと思います。

    私はちょっと無理やり感ありますが、下記のようなコードで最小幅(360px)を指定して回避しています(おすすめはしませんが……)。

    function my_filter_render_block_core_cover( $block_content, $block ) {
    	if ( isset( $block['attrs']['id'] ) ) {
    		$attachment_id = $block['attrs']['id'];
    		$image_src = $block['attrs']['url'];
    		$image_meta = wp_get_attachment_metadata( $attachment_id );
    		$size = wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id );
    		if ( $size ) {
    			$width = absint( $size[0] );
    			if ( 360 <= $width) {
    				$sizes = sprintf( '(max-width: 360px) 360px, (max-width: %1$dpx) 100vw, %1$dpx', $width );
    				$block_content = str_replace(
    					'<img class="wp-block-cover',
    					'<img sizes="' . $sizes . '" class="wp-block-cover',
    					$block_content
    				);
    			}
    		}
    	}
    	return $block_content;
    }
    add_filter( 'render_block_core/cover', 'my_filter_render_block_core_cover', 10, 2 );
    トピック投稿者 3mcdt

    (@3mcdt)

    shokun0803さん、Ishitakaさん、

    お二人のアドバイスを検討してみましたが、私はCSSについての基礎知識が欠けているので、この問題はちょっとハードルが高すぎると思います。文字は、画像の下にキャプションで表示することにしようと思います。
    ご協力に感謝いたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「カバーブロックでの画像が元の画像よりボケている」には新たに返信することはできません。