Can anyone tell me if jquery automatically scales my header image and makes it grainy? All images are very crisp except this logo image that appear in the header using the class="ui-btn-right". Should it be sized to a specific height to avoid re-sizing and grainy appearance? Any suggestions would be appreciated.
You (or your client, or your boss) have unrealistic expectations.
The reason it looks grainy is because it's a poor-quality image to begin with and it is just too small to have a clean appearance.
I downloaded it and examined it in PhotoShop, and it doesn't look any better there than it does in the header. Even if well-done, it would be difficult to execute.
It is not being resized by the browser from it's native size of 67x33, so browser resizing is not an issue.
I don't know how you expect anybody to read that tiny "Cummins" inside the big C. If you blow it up, it's absolutely unreadable. At smaller sizes, if you squint, you might guess that it says "Cummins", if you knew in advance that that is what you were looking for.
It's poorly-dithered, to boot, so the edges of the larger elements don't look great, either.
Not sure how you produced this image, but you need to render to the small size from the original vector artwork. This looks like it might have been resized from a bitmap image. And you need to make it as large as will fit in the header and convince your client (or boss) that they will have to drop the litte "Cummins" inside of the big C, which they are unlikely to agree to, since it is a trademark logo.
Does that logo up in the corner serve any real purpose?
The larger logo on the cloud looks as good as can be expected, given that that one is being resized by the browser. It looks OK, but it's not going to look great.
The larger one would work well if you were to accept a fixed size, or else use the original vector artwork to create a letter in an icon font, so that the browser can resize it properly from the vector. (Actually, use one letter for the big C, and then figure out what font is being used and use that for "West". The registered mark might be recognizable in the big logo if you use a font letter, as well.)
You could try this for the smaller one, as well, but I think if there is any hope for that one at all, it will have to as large as will fit, do a quality job of dithering, and then hand-adjust the edges, painfully, pixel-by-pixel until it looks decent.
In any case, your problem has nothing to do with any jQuery Mobile issue.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic