09-09-2011 06:31 PM - edited 09-09-2011 06:35 PM
I've been struggling with an issue with bad image quality in my webworks app on the phone. I've used the proper meta tag that Adam posted in a previous thread with no luck.
I made a quick sample to show you what's going on. The test image is the exact dimensions of the phones screen. In this case 640x480 (BlackBerry Torch 9810).
Device Screenshot: http://twitpic.com/6ih2yj
Notice how the gradients are choppy, smooth edges are now jagged, and over-all the image quality is terrible.This is a screenshot off the actual device.
BlackBerry Torch 9810
This happens in the simulator, as well as on the phone. I have tried other phones and simulators with the same issue.
Sample html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
l.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,target-densitydpi=devi ce-dpi,user-scalable=no,initial-scale=1.0"> </head> <body> <img src="test1.png" border="0" /> </body> </html>
Thanks for your time everybody, hope someone has a solution to this!
09-09-2011 07:13 PM - edited 09-09-2011 07:14 PM
Have you tried simulating an SD card on the simulator and viewing the picture with the pictures app? I'm curious if it is simply a simulator display issue or if it has something to do with the image being an embedded resource.
If it is clear in the picture viewer, try white listing your file:// path to the image in your config.xml file and change the src path of your <image> to point to the local file path.
It could be a color palette difference on what the device supports vs the colors in your gradient.
09-09-2011 07:49 PM
Yes it's fine if you view the actual image on the phone (outside of the application).
I tried what you said and used the full filepath to poin to the image (located on the sdcard) and it is all messed up looking still in the application.
The gradients I can live with, that's understandable however look at the edges of the circles. They're riggid and jagged.
09-09-2011 07:58 PM
What happens if you don't set any <meta> tags? if you zoom in on the picture does it look good?
09-09-2011 08:05 PM
Also for the sake of it, tried setting the img src with base64 encoded image data. same result.
Is there a certain DPI setting for my actual image that I should use in Photoshop when saving it?
09-26-2011 10:03 AM
Not yet.. there was some discussion that some down sampling was going on, but from your description... if you load it onto the SD card of the device and then view it in the picture viewer app it looks fine correct?
09-26-2011 10:14 AM
Some more information...
Apparently WebKit will down sample "large" images. The definition of "large" is a little fuzzy. I'm not sure if it is in physical pixel size, or file size.
In your case I would say that it is likely the pixel size since your file is only 80KB.
Are you using it for a background? could it be accomplished a different way?
You could also try using different color palettes to see if the down sampling had less of an effect.
09-26-2011 10:20 AM