text in jpegs appears blurry
-
I have designed a custom header in Photoshop, and when I save it as a jpeg it appears fine on my screen, until I upload it to my library in WordPress. It appears blurry once I upload it to my library, and therefore appears blurry in my header. I have tried saving it as a high resolution jpeg, png, and at the exact size for the header. Is there anything else I can do to improve the quality?
-
I’m getting errors when I try to upload an image for testing right now, but try this. Prepare an image that is the suggested size for your theme, which is 1040px x 250px. Upload that to your media library first (not from the appearance > header page) and then go to appearance > header and click the “Choose Image” button. Find the image in your media library, select it and click “Set as Header”. If it asks you to crop, click the “use as is” button. and see what happens.
I wish I could test this for you, but I can’t upload anything at the moment.
-
I just tried your advice and loaded the header to the media library first at the exact, as a jpeg and a png, but they are both appearing blurry when compared to when I just open the file on desktop in Preview. There seems to be some information or pixels that aren’t transferring properly when I upload to WordPress. I have learned through Google search that it is a common problem to have with files that contain text, but there must be some way to fix it. I uploaded the same text format to Facebook for my page cover photo, and it came out fine, so maybe there is a resolution setting I am missing or something?
-
I see an image in your media library named header.png. Have you tried using that image? Right now, the header image I’m seeing on your site is cropped-logo-header-2.jpg. When I view those two images in my browser, header.png is far more crisp.
Generally JPG is better for photographic images and images with complex gradients while PNG is better with images that are blocks of solid colors and text (more graphic in nature). JPG images antialias things, so that is why text can look a little fuzzy.
Try header.png and see what happens and let me know.
-
Okay I set the png as the header, but it appears the same as the jpeg version. Maybe there is something I need to do in Photoshop to optimize the text. I’ll do some Google searches on anti-aliasing setting and options for text images and see if I can find any solutions from the Photoshop end. One other questions, are there any links on my page that on your screen appear in a pinkish color? On my screen there are some links that appear in pink, but on the mobile site they are all green. They are set to be all green, so not sure if it’s a problem just with my computer screen or not.
Thanks for all of your help!!
-
I did design the text for the Portfolio and All Categories button in the sidebar, with the same font as part of the header and in the green color that the green font in the header is supposed to appear. Those fonts don’t look blurry at all. Could this be an issue with solely header settings?
-
Hmmm, the PNG, when viewed in your media library is cleaner than when viewed as a header in your blog.
Did you set header.png as the header image? I’m seeing evidence it was again cropped. When you chose that header image, did you click the “use as is” button. If you crop it, it may lose sharpness.
-
Header.png is set as the header image, but it doesn’t give me the option to “use as is” for some reason. The only button there is “crop and publish”. I have the png dimensions set at 1042 x 250, so there isn’t really any cropping that occurs.
-
Create a new PNG image from your original that is 1040px in width. Adelle has flexible height with the header image, but not flexible width. If the image is wider or narrower than 1040px, cropping will be required.
When I upload a 1040px x 250px header image in Adelle, I get two buttons below the image: Crop and save and Skip crop, publish as is. If I click the publish as is button, my PNG image is used and text is clear and crisp. If I tell it to crop, I still get a PNG and it also appears clear (although I know it is a second generation.
Are you working off of an original PSD file? Also, (and you probably are) make sure and use the “save for web and devices option when saving so it is saved at 72dpi, which is web standard.
-
Okay I made the adjustments as you recommended, and uploaded the PNG to the media library first and then set it as the header. This time it came out much less blurry. I think it is probably at the best we are going to get it. I wasn’t saving it under the “save for web and devices” option, so maybe that was it.
Thanks again for all of your help!
-
- The topic ‘text in jpegs appears blurry’ is closed to new replies.
WordPress.com Forums 