Support » Fixing WordPress » Pixelated/distorted header

  • Resolved Hrist

    (@hrist)


    My header images are getting weird jaggedy lines across them that I can’t describe. http://www.boxwrestlefence.com. There’s a different image on most of the pages, and they all have the same problem. If you look directly at the image, though, it’s fine. I’ve got Twenty Ten running right now, but I’ve also got Constructor set up on a local host and it’s doing the same thing.

    The images are the correct size, and I’ve tried both higher and lower quality and it’s the same. I tried jpegs and gifs. Nothing works.

    Any thoughts?

    *Edit* I just checked, and it looks okay on Chromium, so it might be just Firefox.

Viewing 9 replies - 1 through 9 (of 9 total)
  • As a general rule, it is not enough that the image you are showing is not scaled in HTML/CSS (which can definitely introduce jaggies), the bitmapped image needs to be <i>created</i> at exactly the resolution at which you will use it.

    For this reason most logos are created in EPS format in programs like Adobe Illustrator. EPS files describe their images as a series of bezier curves which can be scaled infinitely up or down and then saved as a PNG/JPG/GIF with no jaggies.

    Thread Starter Hrist

    (@hrist)

    Yes, I see what you’re seeing there and it is my crappily scaled logo. That problem I’ve fixed already in the new version that’s on the localhost setup right now.

    What I’m still trying to figure out is why in the header it looks like this, when the actual image looks like this.

    You must have changed something in the last few hours because when I just looked at the text in the header on the Instructors page it looks fine — not like your screenshot-4 image.

    BTW, nice looking site.

    Thread Starter Hrist

    (@hrist)

    Hmm, maybe it’s just me, then. Firefox cached the image weirdly, or something. It seems to be okay on my laptop too.

    Oh well, I’ll stop worrying then. Thanks!

    Important development tip: when using Firefox (and some other browsers), Ctrl-Shift-R or Shift-Reload_Button tells the browser to ignore its cache and reload everything. This can save a lot of frustration.

    Thread Starter Hrist

    (@hrist)

    I just figured it out, so I’ll post it here in case somebody else is similarly idiotic.

    Occasionally one of the cats steps on Ctrl while I’m scrolling, so it zooms in or out, and I have to reset it. Apparently last time it happened I missed, so I’ve been looking at everything one notch zoomed in, which give it a slight jaggedyness.

    Hi im also having problems with my images, on the home page of my site, there is a feature page made up from my theme wootheme: premiumnews. The images are appearing pixelated please check this out if you can, any feedback would be helpful. Im using a mac computer safari browser.

    Thanks

    http://www.tolifemag.co.uk

    I just took a quick look in Windows FF 7.0.1 and Chrome “14.0.835.202 m”, and I don’t see anything I would describe as pixelated. Try looking at your page in FF and Chrome on a Mac, and then try IE/FF/Chrome on a Windows machine. If they aren’t all identical then what you are seeing may be browser-induced (but don’t ask me how).

    Oh, and it’s normally not a good idea to restart a thread that is 10 months old; just start a new one, they’re free!

    Ok i wasnt sure how this forum works and i think i have started a new thread. The picture once clicked on becomes pixelated. The dimensions are the right size i saved it as a jpeg 300x 250, the theme resizes it so that it fits at nicely as a thumb nail. However once the thumb nail has been clicked it stretches the thumb nail to fit in with the feature image.

    Ive checked all browsers now, just got home.

    Thanks for the response even though its an old thread.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Pixelated/distorted header’ is closed to new replies.