Bad Image Quality on Portfolio Projects

Support
#1

Hello Apex Support,

Im having some trouble with the image quality of my projects.
I need these to be in crispy HD but they are not, while the files are definitly HD they won’t show up
in High Quality but only blurry. Could I get provided with a solution for this problem?

The website is https://www.idoconcepts.nl

Thanks in advance,

Best Regards,
GM

#2

Hello @DragonBallZMods,

Thanks for writing in!

Please take a look at the solution shared in following thread:

Thanks.

#3

Hello Prasant,

I tried to double increase the sizes. They do not seem to affect anything at all.
Could you try and help me further? Or is there something I need to do before it actually works?

When I inspect the element of the image it allready was above 1024px width, 1080px to be exact.
But still the image is blurry and looks terrible after I increased the size. So it seems to have no effect.
I don’t know if it has anything to do with the xtheme or wordpress.

Thanks in advance,
Best regards,

GM

#4

Hi GM,

When you think of it, the image with a width of 1024px or 1080px is not really consider an high-quality image.

But the real issue here is for some reason the Wordpress native Responsive Images feature (srcset) is enabled.


With this feature the size of the image that will render depends on the screen size. If your page is viewed on medium screen, then you’ll get the medium size image regardless of the original size of it.

The srcset feature is not available in the X and Pro themes. Did you intentionally enable that? If not, it might be a plugin doing it, please do testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks,

#5

Hello friech,

I tried disabling the plugins. But it does not seem to be a plugin problem.
Could you try and help me further? Thanks alot.

Best regards,
GM

#6

Hi GM,

We could only investigate it by testing it directly, would you mind providing your admin login credentials in the secure note?

Thanks!

#7

Hello Rad,

I have added the info to my secure note.
Thanks in advance.

Best Regards,
GM

#8

Hi GM,

Looks like I need the login URL as well, the standard wp-admin or wp-login.php is not working. Please let me know :slight_smile:

Thanks!

#9

Hi Rad,

It is https://idoconcepts.nl/login

Thanks

#10

Hi @DragonBallZMods,

In your current X version (6.5.6 and onward), this filter is removed as most user’s demand, which could be optimization related (reduced image sizes). Although srcset is not really needed for X theme since it uses responsive styling, it’s removed to give more options/choices for users.

add_filter( 'wp_calculate_image_srcset', '__return_false' );

And since it’s removed, the srcset is now applied to images. But, you can disable that again by adding that line of code to your child theme’s functions.php. Please check this for child theme’s installation https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57

Hope this helps.

#11

Hello Rad,

This does not seem to work at all,
my image quality is still bad.

Could you look into this further?

Thanks!

#12

Hey @DragonBallZMods,

I am not seeing a child theme being applied to your site. Please install a child theme or at least activate first then follow @Rad’s solution so we can check it again.

Thanks.

#13

Hey RueNel,

I did install the childtheme and have add the piece of code in the functions.php.
It still does not make any difference.

Thanks in advance.

#14

Hi @DragonBallZMods,

It appears the Wordpress only generates a 1024px image from entry from uploaded images. Usually, it should be the max layout width in Layout and Design setting like 1200px.

But the above code works, it’s just that the max on your setup is just 1024px.

There is one possible solution for this, override the 1024px, please add this code to your child theme’s functions.php as well

  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() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          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;
      }

    }

  }

I also installed force regenerated thumbnails, but it fails so the solution would be using the full-size image like in the code.

Thanks!

#15

Hello Rad,

It works! Finally.
Thank you guys so much for helping me.

Best Regards,
GM

#16

Glad it’s working now and you’re most welcome!

#17

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