Need help? Check out our Support site, then


How can I fix the distorted images on my blog?

  1. elodieunderglass
    Member

    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 elodieunderglass.wordpress.com.

  2. 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.

  3. 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!

  4. @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.

  5. 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!

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

  7. 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 !

  8. 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

  9. 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.

  10. video camera that is :))

  11. 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.

  12. 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 :))

  13. @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. :)

  14. elodieunderglass
    Member

    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!

  15. 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

  16. 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).

  17. 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"

  18. elodieunderglass
    Member

    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.

  19. elodieunderglass
    Member

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

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

  21. By the way, they are all .PNG images that are having this problem by the look of it. Probaby .PNG converted from .bmp files created in Microsoft Paint.

    @lauravar - did you save your screenshots in Paint?

  22. I take the screenshots in Paint Shop Pro, save them as PNGs and edit and save them (as PNGs) in MS Paint v5.1. All my images are PNGs. It is the same process I have followed since the start of my blog, 5 years ago.

    BTW, my husband, whose computer is next to mine at home, has seen this problem before, too. But today, the first page of my site looks fine on his computer, but the second page (starting with post on 2/12) contains the distorted images and bars. But on my computer, the first page contains the distorted images -- but only on screenshots that are text-only.

  23. Then I think it's got to be related to MS Paint.

  24. My images are showing properly now. So I'll leave this thread. Thank you to whoever sorted it out. :)

  25. elodieunderglass
    Member

    My images seem to work now, thanks very much!

  26. @elodieunderglass-Odd, for me I'm seeing all the images in that post OK now except for this one http://elodieunderglass.files.wordpress.com/2012/10/why-would-you-do-this.png, which still shows up for me in the post as having vertical bars on it, like my screenshot above.

    Still Chrome 24 on Win7.

  27. Hi again all, thank you for your input.

    I checked with our developers about what might be causing this image display issue and how to resolve it. The "barred images" are seldom reported (we only had a handful of similar reports so far), and there are several technical factors at play causing this particular issue, making it something that cannot be "fixed" right away.

    A workaround that works for most users is to re-save the "problematic" images as RGB (rather than sRGB) and to re-insert them into blog posts. Look for "Mode" settings (Photoshop) or something similar in your image editing program.

    Folks that saw their images with black bars, could you please give it a try on your blogs and let me know how it works for you?

  28. @jenia - Instead of saving as RGB, I've just resaved the .PNG files as .jpg's and that has worked. I now need to go back through older posts and make sure that the previous few .PNG's I saved from .bmp files are showing properly. Thank you anyway.

  29. elodieunderglass
    Member

    I just re-saved the images as .jpegs and reuploaded. Unfortunately cannot do them all quickly , and so let it lapse .... but now I am rushing to get the important ones done because I've gotten another FP (thanks WordPress!) and all of the interesting posts that new visitors might enjoy look like they're full of abstract barcodes.

    c'est la vie!

Topic Closed

This topic has been closed to new replies.

About this Topic