First image in post always low resolution – sidekick theme

  • Author
  • #2918968

    Lately, the first image of every post I make on my blog has been low resolution. This only has happened for my last four posts, before that it worked fine.

    My method is to make a post, insert images as I go along from my phone’s camera roll, edit > alignment=centre, link to=none, size=large > done.

    I’m using the sidekick theme and I can’t remember changing any settings recently.

    The blog I need help with is


    Hi –

    Is the low res image displaying on your phone only? Or on a phone and a computer? Does it continue on a different network connection?

    Please send a link to an affected post so I can take a closer look.


    The problem shows on desktop and mobile.

    Here is my latest post, showing the low resolution first image:

    And here is the last post where it worked properly, which is 5 posts in the past:

    You can easily see the problem from the homepage as the first image of each post is always shown:

    The problem occurs across different connections.


    Thank you for those examples. Is this happening through the mobile WordPress app or via the browser?


    Viewing the blog through the wordpress app, the featured image appears perfectly (as in the image used to head the post with a blog snippet). Clicking through to the post in the app, the first image is pixellated.


    However this same behaviour isn’t seen in a mobile or desktop browser – there is no preview of all blog posts as the main page: all the posts are shown in full.


    looking into this further, the code behind the images is different from unaffected vs affected posts.

    <img data-attachment-id="471" data-permalink="" data-orig-file="" data-orig-size="4032,3024" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;1.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 7&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1489072618&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;3.99&quot;,&quot;iso&quot;:&quot;100&quot;,&quot;shutter_speed&quot;:&quot;0.071428571428571&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="img_4884" data-image-description="" data-medium-file="" data-large-file="" alt="" src="" title="" class="aligncenter size-large wp-image-471" srcset=" 810w, 1620w, 150w, 300w, 768w, 1024w" sizes="(max-width: 810px) 100vw, 810px">

    <img data-attachment-id="500" data-permalink="" data-orig-file="" data-orig-size="750,1334" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="img_5017" data-image-description="" data-medium-file="" data-large-file="" alt="" src="" title="" class="aligncenter size-large wp-image-500" srcset=" 84w, 169w" sizes="(max-width: 574px) 100vw, 574px">

    the srcset attribute in the problem images seems to be much smaller than in the good ones.


    It seems that the larger sizes supplied in the good srcset are needed to make things work as they should. Something in the theme or wordpress has changed so not include these and the remaining smaller h/w dimensions are forcing the theme to only show a low resolution image but stretch it out over the intended size.


    Good Morning –

    My apologies for the delayed response. I was out for a few days. Thanks for taking the time to post all those details.

    It looks like the image is inserted correctly and perhaps this may be an issue with the theme – I’m investigating that and I’ll post an update here soon.


    Good Morning –

    I’m back with a few more questions. I want to clarify which editor (wp-admin or the new editor) you’re using and the exact steps involved. Which device(s) are being used?

    Are you editing the image size through the html tab?

    Let’s look at this image:

    If you remove the width="269" height="480" and just leave size-large does that fix it?


    Hi, I am using whichever editor is found at /admin. I do most posts from the iOS WordPress app but some on PC through Chrome. I don’t edit image sizing in HTML, I click the ‘edit’ modal over the image and set the size there.

    I tried the above. In the editor, the blurred images show up as they should, crisp and not blurred. Previewing changes and they are back to blurred. I removed the width and height attributes and the image shows up clearly when previewing, but the size is way too large. After I insert an image I set the size to ‘large’ because this seems to give me the best fit on the page (except for first images of course, where it breaks).


    I’m guessing it’s a bug in the featured image style as the theme seems to take the first image as the featured one and those are the ones being effected.


    Hi –

    So far I’ve only been able to replicate this blurred image when using your image from the post rather than a sample image. I’ll be back in touch once I have more details.


    Hi, today I wrote a new post and this time I used the new editor. The problem doesn’t occur. I haven’t had time to check the html to see what’s different yet. but here it is:

    <img data-attachment-id=”551″ data-permalink=”” data-orig-file=”″ data-orig-size=”4032,3024″ data-comments-opened=”1″ data-image-meta=”{"aperture":"1.8","credit":"","camera":"iPhone 7","caption":"","created_timestamp":"1493990813","copyright":"","focal_length":"3.99","iso":"32","shutter_speed":"0.05","title":"","orientation":"1"}” data-image-title=”IMG_5414″ data-image-description=”” data-medium-file=”″ data-large-file=”″ class=”alignnone size-full wp-image-551″ src=”″ alt=”IMG_5414″ srcset=” 810w, 1620w, 150w, 300w, 768w, 1024w” sizes=”(max-width: 810px) 100vw, 810px”>


    pasting as code for readability

    <img data-attachment-id="551" data-permalink="" data-orig-file="" data-orig-size="4032,3024" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;1.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 7&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1493990813&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;3.99&quot;,&quot;iso&quot;:&quot;32&quot;,&quot;shutter_speed&quot;:&quot;0.05&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="IMG_5414" data-image-description="" data-medium-file="" data-large-file="" class="alignnone size-full wp-image-551" src="" alt="IMG_5414" srcset=" 810w, 1620w, 150w, 300w, 768w, 1024w" sizes="(max-width: 810px) 100vw, 810px">


    I ran the blurry image and the one that works through and the one that works has a lot more Exif data and is a larger size.

    To clarify, have you edited the blurred one at all after taking it? And how were they uploaded both from the mobile app or a different way? I’m trying to narrow down these items so I can reproduce it better.

The topic ‘First image in post always low resolution – sidekick theme’ is closed to new replies.