My header image is 900px wide and perfectly fine quality. When I upload it and use it as header, in the original size, it gets a little blurry. It’s the actual size, and none of my others pictures get blurry. It’s hard to see, it’s details, but it’s still a little lower quality, lower pixels or something. Why does this happene to my header?
The blog I need help with is liseliten.com.
It might have something to do with the text overlapping the photo… when I was using Publisher or Quark to add text to my header images I always found the quality suffered when the image was uploaded — especially around the text. Since I’ve been using PhotoShop the quality is still off a little, but not nearly as bad as before.
Try uploading a simple photo (sized to 900x300px) as a header, just to see if the quality of the photo changes significantly…
The main issue is anti-aliasing with jpgs. Jpgs are for photographic images, and do not typically handle text well unless your image editing program allows you to adjust the anti-aliasing. PNG and GIF are better for for graphic type images and text and solid-color graphic elements will always look sharper. When you have a mixed image with graphic and photographic elements it takes some work to thread the needle.
I would suggest giving a PNG a try and see how the images turn out, or if your image editing program allows, play with the anti-aliasing settings for the jpg.
Expanding on what TSP said: The issue is that jpg’s store the picture in a compressed format, and compression consists of throwing away part of the information needed to fully reconstruct the image, primarily the high contrast edges. For “smooth” photographic pictures that’s mostly not a problem, but for text or graphics with hard edges, you see faint echoes of the edge nearby, making it look fuzzy. You can especially see this in the rightmost star of your header, and also within what should be solid fill in your large letters.
But jpg supports different degrees of compression, and the software that you use to produce the jpg should offer you a setting for this — sometimes a percentage number, and sometimes a “quality” setting.
As it happens, the current image has been compressed a lot: it’s only 37 k, and would look much better if only compressed to say 60k or 100k — so try that first. You might also try png format as TSP suggests. GIF is a possibility but has limited ability to show smooth gradients as it supports <255 colors in the image, and this can result in banding — like in your “fade to white” areas that look good if smooth, but pretty bad if the fade turns to steps..
The difference in compression will really only be apparent at the extremes, and on a typical 72 or 96dpi monitor you will be hard pressed to tell the difference between a jpg at 40% and one at 80% – unless you have a good eye and have the images side by side on the same computer monitor.
JPG’s anti-alias by default, and that is mostly to help prevent banding and such in color gradients within photographic images. In fact unless you have a high-end image editing program you cannot even adjust anti-aliasing for a JPG, and if you are starting from an image that has anti-aliasing and then try to back it out, the results are typically not going to be good.
Lisa, if you come back to this thread and want a sharper version of your image, open this link, http://flippintestblog.wordpress.com/files/2009/11/lisebanner-sharp.jpg , then download it to your computer and upload it to your media library and use it as your header. I sharpened it up as much as I could without causing it to go all artificial looking.
I think you and I are discussing how to address different issues. You’ve focused on sharpening the image. Meanwhile I suspected that what made lise dissatisfied was the generally muddy or dirty appearance of various areas of her image, which I attributed to the very conspicuous artifacts from too much jpg compression.
I completely agree with your:
“you will be hard pressed to tell the difference between a jpg at 40% and one at 80%”
… however this is a 900×300 image, which means it’s a 810k raw bitmap (assuming 24 bit color). So the current 30k jpg rendition is less than 4% of that, meaning over 96% compression. The very visible ripply artifacts around the stars, and above the dark hair in the left photo are characteristic. Indeed your sharpened version actually makes these clearer to see. Similar artifacts, though less individually conspicuous, are scruffing up the fills in the text and other areas.
Hence I suggested being less aggressive on the compression, moving to say 92% (a 60k image) or 88% (a 100k image). That will make a major difference, assuming one starts with the pre-jpg-ified original image (that lise says she likes), and not try to repair an image that had the life compressed out of it :-(.
In the OP she mentions it get blurry, and that in my opinion is an issue with anti-aliasing although it could be some of both – compression and the anti-aliasing.
Since she mentions it is not that way on the original image, it could be that wordpress is automatically “optimizing” header images like they started doing with images inserted into posts. I’m sure their bandwidth charges are quite extreme given the number of blogs and the traffic .COM gets, and with the number of blogs I visit when helping out in the forums, I see far too many people uploading 2 and 3mb images. In one case a few months back I found images on one blog that were over 6mb each.
If wordpress is indeed optimizing header images now, then it will not matter if you upload a 100% jpg. It will still end up being around 30k after wordpress finishes with it.
liseliten: what program are you using to create the image? And at what level are your photo-software skills?
I’d say that header is just compressed tremendously. I use text images quite a lot and often save as jpg (as seen at http://tpata.wordpress.com/ ). Though I do optimize the images before I save, also saving at max quality doesn’t add that much to the size either. What images can be over 6mb (?!) each unless it was in formats like TIFF or RAW.
The topic ‘Blurry header’ is closed to new replies.