Large images blurry, in Chrome pixelated on load then correct when refreshed

  • Hi,

    I have developed a site for a photographer and am having difficulty with larger images, which are inserted within posts (ie. not Featured Images), rendering correctly. I have changed the Media Settings to:

    [ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

    Thumbnail: 800 x 800
    Medium Size: 1200 x 1200
    Large Size: 2000 x 2000

    in any case I am really only using the Full Size option when inserting these images into posts. I have also added set_post_thumbnail_size( 4000, 9999 ); to the functions.php file.

    What is happening is that Safari & Firefox are showing these images as blurry, and Chrome is showing them as pixelated on page load, but then when I refresh the image displays correctly.

    Any ideas what I am doing wrong?

    Here is a link to the site:

    https://pblk.eu

    You will hopefully see what I am talking about on that first large image that loads.

    Many thanks,

    Nick

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

  • Did you create the child theme?

    You are showing a small image stretched out.

    the image is 840×557 and is being displayed at 1325×2000

    so yes it will be blurry or pixelated.

    Thread Starter nickwp2017

    (@nickwp2017)

    Hi

    Thanks for your response!

    Yes I created a child theme. How can I rectify this problem? As far as I can see I have done everything to change the settings to allow images to be displayed as per their actual dimensions, what have I neglected to do?

    Thanks

    Nick

    Take a look here:
    https://codex.www.ads-software.com/Post_Thumbnails#Set_the_Post_Thumbnail_Size

    Thread Starter nickwp2017

    (@nickwp2017)

    Hi,

    Thanks again for replying but as far as I’m aware I have already set the post thumbnail size correctly already, my functions.php file looks like this:

    <?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

set_post_thumbnail_size( 4000, 9999 );

?>

    Do you think the fact that I added 9999 for unlimited height could be creating the problem? It seems to be the correct convention as per the instructions slightly further down the page you linked to.

    Thanks again for your help!

    Nick

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Large images blurry, in Chrome pixelated on load then correct when refreshed’ is closed to new replies.