Consistently blurry images

I have recently switched my theme across to X and I’m loving it so far except for one thing I’m hoping I can get can help with.

I’m a photographer so it’s important that my photos are displayed well. However, any photos I upload all seem to drastically lose quality when going through the media library. I’ve tried uploading at every possible set of dimensions and settings, as well as three different image compression plugins in case this was the issue however nothing seems to affect the quality.

The sharpness is fine when I upload from URL - for instance I add to media library and copy permalink. However if I insert if from the upload or media library button the quality drops significantly. It seems like this must be a setting or default I have switched on because it’s a uniform issue. We’ve tried everything we can find online, including setting image quality to 100 but nothing seems to make a difference.

For instance, if you look at my latest blog post (.https://www.floppyearsphotography.com.au/blog-circle-yellow/) you can see the marked difference in quality between the feature image (uploaded through the feature image dialogue box) and the same image in the body (uploaded via URL link from the permalink displayed in media library).

Are you able to advise on how to fix this at all?

Thanks so much and looking forward to a reply.

Hello Lyndall,

Thanks for writing in!

I have checked your new blog post and have seen the images of the dog. Please be aware that WordPress has this function for the images that automatically adjust the image dimension to load in different screen sizes. This is evident in the featured image. Even if you upload an image size of 2040x1360 pixels, the featured image displayed a cropped version of only 1200x800 pixels. As you view the post in smaller screens, the featured images will display the cropped version large, medium or thumbnail size.

If you want to modify this featured image behaviour and will display the full original image instead, you will need a child theme first. That is because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      $thumb = get_the_post_thumbnail( NULL, 'full', NULL );

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          $thumb = get_the_post_thumbnail( NULL, 'medium', NULL );
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }
endif;

if ( ! function_exists( 'x_disable_wp_image_srcset' ) ) :
  function x_disable_wp_image_srcset( $source ) {
    return true;
  }
  add_filter( 'wp_calculate_image_srcset', 'x_disable_wp_image_srcset' );
endif;

You can change the image size from thumbnail, medium, large. In the code I used full as the image size. This will display the full original image.

Hope this helps. Kindly let us know.

ThanI you so much for your help! That’s amazing - that definitely fixed the feature images and when I changed the thumbnails for the blog home page down to medium they were great.

I probably wasn’t super clear in my original post (my bad) but this issue is affecting ALL images on my sit - ie photos within blog posts and on pages. I just used the feature photo as it was a good comparison to the version of the file in the post which was uploaded via URL. I’ve loaded the code in so the feature photos are fine - but you can see the blurriness in all the blogs except my recent yellow one which was all uploaded from URL.

Is there any way to make this super helpful adjustment across all images on the site so my pages and blogs display the properly sharp mages?

Thanks so much again and looking forward to hearing back from you!!

Hello Lyndall,

The adjustments I have suggested is for the featured image. When you insert an image in a page or post, you must also select which size you want to display. Choosing “Full” or original image will allow displaying the full image as what you have hope that is a sharp, clear and crisp image. This will only work if your image dimension is smaller than your content container width. For example, your content width is only 1200 pixels and your image is 2040x1360 pixels. The resulting image will be squeezed to fit in the 1200 pixel width which could cause a blurry image. I would highly recommend that you upload your images at least the same width as your content width or lesser. Too small image dimension will not also help because it might be stretched out when displayed. This is not always the case though.

Hope this helps.

Hi,
Thank you for your response. It doesn’t matter what size or dimensions I upload the images at, I get the exact same blurred result. I have tried multiple times uploading at exactly 1200 or less but the output is always the same. There is definitely something in place for all images that go through the media library - because even if I select full size on a 1200px image through there the images are not sharp at all.
Do you have any other suggestions?

Hi Lyndall,

May I know a sample URL where this still happens? I checked and all I found are high quality images. Please also note that each theme and plugins can registered its own image sizes, and Wordpress generates them. Which means, these sizes aren’t fully controllable by the theme if it happens to be added by another plugin.

Thanks!

Hi - it happens on all pages except my most recent two blog posts as I used direct URL links for all images.

Please visit https://www.floppyearsphotography.com.au/gretchen/ and use the password resolution. For each example I have used the upload through media library for the first picture and then the second is directly uploaded from the media library URL. It is the exact same image but uploaded in two different ways.

If you look at the eyes especially the difference in sharpness is obvious. Most obvious on a desktop instead of a mobile device. This may seem like a small issue but as a photographer this makes a huge difference to the way my work is displayed and I don’t understand what the media library upload is doing differently to reduce the quality so dramatically.

There are no other plugins of any kind used.

The files are all 1200px in length except the very bottom which is 2040px.

Could you please advise?

Hello Lyndall,

This is your page:

The full image is already 1200px in width. The problem is that it is still being squeezed because of the content’s padding of 60 pixels on both sides leaving you to only have 1080 pixels.

If you want to see the full image, you must change the page template to Blank - No Container | Header, Footer page template. This should give you the full width of the screen to display the full-size image.

To know more about the different page templates in the theme, check this out:

Hope this helps.

Hi,
I’ve made a bunch of changes and I’m still having issues with the quality of images as uploaded through the media library.
I worked out a big part of the problem was the images displaying on the retina screen so to combat that I’ve uploaded two versions of the images - one at 2040 wi5 the @2x addition to the file name and then the other is at 1080 as per your instructions. The images look great now on my Mac which is obviously a retina screen, however when I look at the page on a mobile the decrease in quality is obvious.
I thought it was just the fact they are exported at a lower px level but there’s still an obvious difference in the quality of the image in the header and the image at 1080 in the text - both are the exact same image so shouldn’t they be identical in quality?

Hi Lyndall,

I checked the images and they are looking good on mobile with high quality. Through, I couldn’t check your last URL since it’s no longer available. Perhaps you’re referring to background image with parallax? I like to verify it first so we could see if it needs parallax related fixes.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.