Captioned images are blurry

  • Resolved sophiaknows

    (@sophiaknows)


    1 year, 6 months ago

    Hello!

    I’ve been having a problem with images on my site for some time: images display differently whether they have a caption or not. Without caption, they are sharp, with caption, they are blurry. The browser also has something to do with it, but even if the display is better for some, worse for others, there is still a difference between the images with or without a caption. I left a public test page to see the problem. I asked theme support for help, but they don’t have a solution on their end.

    First I disabled plugins and image optimization settings to leave the new image as sharp as the original (there was a very small improvement but still a huge blur effect on the captioned image, both old and new)

    Then theme support asked me to add this in function.php:

    add_filter(‘jpeg_quality’, function($arg){
    return 100;
    });

    add_filter(‘wp_editor_set_quality’, function($arg){
    return 100;
    });

    But there was no improvement.

    Is this familiar to anyone here?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • The issue you’re experiencing could be due to a number of reasons. Here are a few things you can try:

    1. CSS Styling: The issue might be due to CSS styling applied to images with captions. Check your theme’s CSS files for any styles applied to the wp-caption or wp-caption-text classes. These classes are typically used for images with captions in WordPress. You might find that there’s a CSS rule that’s causing the images to appear blurry.
    2. Image Resizing: WordPress automatically creates several sizes of each image you upload, and it might be using a different size for images with captions. Check the HTML of the images with and without captions to see if different image sizes are being used.
    3. Image Compression: The filters you added to your functions.php file should set the JPEG quality to 100, but it’s possible that there’s another plugin or theme function that’s overriding these filters. Try deactivating your plugins one by one to see if any of them are causing the issue.
    4. Browser Rendering: Different browsers can render images differently, especially when it comes to scaling images. If the image is being scaled (either up or down) in the browser, it can appear blurry. Check the dimensions of the image in the HTML and compare it to the actual dimensions of the image file to see if it’s being scaled.
    5. Retina Displays: If you’re using a device with a retina display, images can appear blurry if they’re not optimized for these high-resolution screens. There are plugins available that can help with this, such as WP Retina 2x.

    Let me know if nothing works from the list above!

    Thread Starter sophiaknows

    (@sophiaknows)

    Hello @apeatling ,

    Thank you very much for these leads, I will study them and come back with a report (and I hope for a “great, it works!”).

    Thread Starter sophiaknows

    (@sophiaknows)

    And there it is!

    In style.css there was:

    .wp-caption img[class*=”wp-image-“] {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
    }

    There were other caption related classes, I fiddled with them all and the conclusion is that it’s happening here. I put max-width: 100% and everything is fine, without side effects.

    Thanks a lot for your help @apeatling !

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Captioned images are blurry’ is closed to new replies.