Adding a caption makes the image blurry / pixelated

  • Hi!

    thanks for a very helpful plugin, made my life after migrating a blogger blog to wordpress much easier :).

    But, there’s a problem – the images are displayed fine, high res. But when I enter a caption, the image is blurred and pixelated. Also, images without caption are clickable, go to the image page. But images with a caption are not clickable.

    I turned off all other image related plugins and no change. But turning off PB responsive images plugin made the image with caption look high res again.

    What’s causing it? The blog in question: https://www.donnaiveh.com.

    Thanks
    Lukas

    https://www.ads-software.com/plugins/pb-responsive-images/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter lukascech

    (@lukascech)

    maybe this will help:

    HTML without caption:

    <img class=”aligncenter wp-image-3169 size-full” src=”https://www.donnaiveh.com/wp-content/uploads/2014/11/DSC_0723.jpg&#8221; alt=”DSC_0723″ width=”1024″ height=”602″ data-id=”3169″ />

    HTML with caption:

    [caption id="attachment_3169" align="aligncenter" width="1024"]<img class=”wp-image-3169 size-full” src=”https://www.donnaiveh.com/wp-content/uploads/2014/11/DSC_0723.jpg&#8221; alt=”DSC_0723″ width=”1024″ height=”602″ data-id=”3169″ /> TEST[/caption]

    The image with caption shows fine in visual wordpress text editor, only low res in preview or live version of the post.
    The HTML is auto-generated after adding the caption through the UI.

    I know this is quite old, but I am having the same issue. Adding an image caption causes the fallback image to be loaded, and jquery does not switch images.

    I have 3 media query formats:
    all w300 (fallback image)
    (min-width:420px) w552
    (min-width:890px) w930

    My screen is wider than 89opx.

    When no image caption is present, this is how an image is rendered:

    <span data-picture="" data-alt="some-alt-text" class="alignnone" data-width="1377" data-height="909">
	<span data-src="https://website.com/slir/w300/wp-content/uploads/image.jpg" data-media="all"></span>
	<span data-src="https://website.com/slir/w552/wp-content/uploads/image.jpg" data-media="(min-width:420px)"></span>
	<noscript><img src="https://website.com/slir/w552/wp-content/uploads/image.jpg" class="alignnone" alt="some-alt-text" width="1377" height="909"></noscript>
	<span data-src="https://website.com/slir/w930/wp-content/uploads/2015/03/image.jpg" data-media="(min-width:890px)"></span>
	<img alt="Beni-and-Ioana" src="https://website.com/slir/w930/wp-content/uploads/image.jpg">
</span>

    With caption:

    <figure class="figure alignnone">
	<img src="https://website.com/slir/w300/wp-content/uploads/image.jpg" alt="some-alt-text" width="1377" height="909"><figcaption>
<span data-src="https://website.com/slir/w930/wp-content/uploads/image.jpg" data-media="(min-width:890px)"></span> Caption Text</figcaption></figure>

<figcaption>
	<span data-src="website.com/slir/w930/wp-content/uploads/image.jpg" data-media="(min-width:890px)"></span> 	Caption Text
</figcaption>

    With caption, but without PB Responsive Images activated:

    <figure class="figure alignnone">
	<img src="https://website.com/wp-content/uploads/image.jpg" alt="some-alt-text" width="1377" height="909">
	<figcaption>Caption Text</figcaption>
</figure>

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding a caption makes the image blurry / pixelated’ is closed to new replies.