How can I fix the distorted images on my blog?

  • Sometimes I draw little pictures to add to my blog, and within the past few months they’ve somehow stopped displaying. If you look at this post, you’ll see what I mean – the images are disfigured with black bars:
    https://elodieunderglass.wordpress.com/2012/10/26/youre-a-strange-man-charlie-darwin/

    It was freshly pressed in October and was perfectly fine then; the issue seems to have started sometime this winter. Most of the “paint” images on my blog are affected in some way.

    I have reuploaded the images, changed the settings/orientation/zoom on them using the Visual and HTML editors, and changed my layout and theme several times. Images that were formerly fine seem to break quite frequently. I see it using different ISPs, different computers and different browsers.

    The issue has been reported by readers using a variety of other computers and ISPs.

    When you click on the broken image, it links appropriately to the correct one, but it’s very, very, very annoying and really ruins the appearance of my blog. It’s just very frustrating.
    https://elodieunderglass.wordpress.com/2012/10/26/youre-a-strange-man-charlie-darwin/

    The blog I need help with is: (visible only to logged in users)

  • absurdoldbird · Member ·

    I’m going to mark this for staff to look at. I’ve actually had the same problem on a few posts in recent times and can’t find the answer either.

  • Hi there,

    I can’t see this when I look at that post – can you take a screenshot? Here’s a bit more information about how to take a screenshot:
    http://en.support.wordpress.com/make-a-screenshot/

    You can load this into your media library, and I can check it there.

    Have you recently cleared your cache? Would you try doing so to test if this helps at all? Here is more information about how to do that:
    http://en.support.wordpress.com/browser-issues/

    Thanks so much for the extra clarification!

  • absurdoldbird · Member ·

    @zandyring – excuse me for interrupting here, but I can the OP’s images with the black bars, here: http://elodieunderglass.wordpress.com/2012/10/26/youre-a-strange-man-charlie-darwin/ (the link given had https:// so maybe that’s why it wouldn’t open)

    And on my own blog (though I’m happy to start my own thread if you want) the images are on this post: http://artyoldbird.com/2012/11/21/to-be-or-not-to-be-freshly-pressed/

    There was another one, but I resized and reposted the pics and made them not open on another page/tab.

  • Happy to have you, Val!

    I do see the post and the images, just not the black bars. I’m also not seeing them in your post – either my eyes are simply terrible, or I need a screenshot! Could you do one as well as the original poster, please?

    Thanks so much!

  • ufohunterorguk · Member ·

    Looks like the resolution of the image used is to low to me !

  • ufohunterorguk · Member ·

    Its a format issue, if you have the original unbarred images get a converter and try a different format like say jpg to gif or vice versa then re-upload see if that cures it !

  • I see these PNG images as 96dpi and in the RGB color space, which is just fine for the Interwebs

    On the OP’s post, there are several images that I also see with black bars. If you open the images in a new window, you can see the full size image and nothing has bars on it. I’m viewing in Chrome 24.0.1312.57 m Here’s a screenshot.

    This appears to be an issue with Chrome, as in FF18, everything displays normally. Screenshot

  • ufohunterorguk · Member ·

    Hello, I can see the bars no problem , the banding just looked to me to be a rendering problem , that why I suggested to convert the original images (if the op has them ) to a different format as each format is compiled differently , the banding you are seeing is similar to the banding you get when a video is not synced with a television, you get thick black bars that go across the screen.

  • ufohunterorguk · Member ·

    video camera that is :))

  • Switching to a different image format (JPG) would indeed solve the problem of the bars being displayed.

    However, that would not solve the problem of how resized PNG images are being displayed in Chrome. Since PNG images are supported here on WordPress.com, this needs to be resolved by Staff.

  • ufohunterorguk · Member ·

    I agree with that , but my suggestion is a temporary work around until its resolved. Those poor coders up there must have sore fingertips lol :))

  • absurdoldbird · Member ·

    @zandyring Thanks. I’ve put all the images from my post mentioned above, on a page of their own in my blog, here:

    http://artyoldbird.com/for-my-support-query-on-forum/

    All but image 4 were done in Microsoft Paint, saved as .bmp files, imported into Photoshop Elements 4 to save as a .PNG files suitable to upload to my WordPress.com blog as, from what I recall one can’t use .bmp image files here.

    Image 4 was done in Photoshop and saved as a .PNG file, directly. Image 4 displays fine on both the Post and attachment views.

    All the attachment pages on the original post show the images fine, with no banding, and there is no banding on the image that I created directly in Photoshop.

    I use Firefox 18.0.2 on a Windows computer using XP. I’ve updated the browser at least twice since doing the original post.

    I’ve cleared my cache/cookies/history multiple times (I do it every day anyway).

    I think that ufohunterorguk is probably somewhat correct and that this is a format issue. My thought is that it’s a file conversion issue as the only ones with problems were saved originally in .bmp and then converted to .PNG. However, it still doesn’t explain why they have banding on the post page views but are fine on the attachment page views.

    The O.P. said that she uses Paint and that is what I have an issue with too – the ones I did in Paint are the ones that don’t display properly. So there surely must be an issue with WordPress.com not displaying them properly. I wonder actually if it’s some sort of coding problem in much the same way that WordPress.com can’t display Microsoft Word without it being ‘cleaned’ first?

    I can’t see how it’s a brower issue. I can see the banding in Firefox, @justjennifer can’t. I haven’t tried Chrome (and really don’t want to). I can have a look at it in IE, but the latter is an older version as I can’t update to the current version on XP.

    However, one thing – another post (I forget which) showed this banding some weeks ago and what I did was resize the originals (in photoshop) and remove the attachment page link, and that worked fine.

    Let’s hope this can be sorted out soon. :)

  • Hello! Sorry, I’ve been caught up with work. Thanks for all of your help and suggestions! Absurdoldbird, I’m sorry to hear that you’re having this trouble too. I use a Mac running OS 10, I think, as well as a Windows running 7 at work, and an iPod and an iPad. Browsers are Chrome, Firefox, Explorer and Safari.

    I have indeed cleared the browser cache, and I have seen the problem on computers that have never viewed my blog. I also saw it with AbsurdOldBird’s blog post. All of my Paint images are in PNG format.

    I’ve loaded two screenshots into my media library. One shows an okay PNG next to a distorted one to indicate that some of my PNGs are fine. The other shows a PNG that should be a flying pony pulling a rainbow banner.

    The post I was particularly bothered by was http://elodieunderglass.wordpress.com/2012/10/26/youre-a-strange-man-charlie-darwin/ since nearly all of the images are ruined, but it affects other Paint images on my blog, too. And it’s erratic: some of the PNGs in this post are incomprehensible, but others of exactly the same size are fine: http://elodieunderglass.wordpress.com/2012/11/01/elodies-compendium-of-illustrated-search-terms/

    It’s annoying because the post was fine for months (and was perfectly normal when it got FPed). The corruption of displayed PNGs seems to be a new thing, and that worries me.

    I replaced the flying pony/rainbow banner image with a JPEG of the same image and it seems to work now, but the thought of replacing and reformatting all of those images is….. argh!

  • I am having the same problem on my blog and have had a reader report that he’s seeing the same issue. All of my images are screenshots and PNG. Images that contain both text and a picture appear fine. But some images (but not all) that are text-only are distorted with the black vertical bars. I have the problem on Chrome, FireFox, and IE. The blog is terriblywrite.wordpress.com

  • Hi all, thanks for the reports, we are investigating this. @lauravar: could you please let me know which specific posts/images are you seeing the problem with, and what browser and version you are using? Screenshots would help too (you can upload those to your Media Library).

  • I’m seeing them in Firefox 19, Chrome 24.0.1312.57 m, and IE 8. I’m seeing the distorted images in hundreds of posts — including the one posted this morning. I’ve included two screenshots in my media library — “tw distorted images 1.png” and “tw distorted images 2. png”

  • WOW, Lauravar, those images are really barred. I’ve never been to your blog before (obviously this isn’t a cache problem)

    @jenia, one of her affected posts is http://terriblywrite.wordpress.com/2013/02/14/the-new-york-times-would-not-make-that-mistake/

    I’m really glad it’s not just me having this problem.

  • Oh, and I viewed Lauravar’s post with Windows 8 running Firefox 19.

  • absurdoldbird · Member ·

    That’s weird. To me, lauravar’s posts – even the one elodieunderglass gave a link to – look fine. :( This is indeed a puzzle.

  • The topic ‘How can I fix the distorted images on my blog?’ is closed to new replies.