I created a website. The images on the projects page appear blurry when viewed in mobile safari. The images on the project detail page however, are perfectly sharp.
I can't figure out, what's blurring the images. The images' resolution is high enough, so it doesn't have anything to do with the retina display.
You are using html to resize your images. Use photoshop or in code to make a seperate, resampled smaller version of the files.
Browsers resize images poorly, you should use software to resize (can be done in your own code if you like).
Just putting an image size into your markup will make it do a non-resampling resize which often looks rubbish.
This link is dated, but it says what you need to know...
http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm
The only reason this works on yor pc is that modern pcs will do resampling when they resize in the browser. Not all will do this and mobile ones likely won't.
Related
Background images in HTML email look blurry when viewed on mobile phone.
There is a technique for swapping out a wider banner image for a smaller background image on mobile devices. Email on Acid has a nice write-up that explains using a media query to hide the img and add a background-image to it's parent td. Pretty simple.
However, my issue is the background image looks blurry on iPhone and Androids in my Litmus tests and actual device testing.
Has anyone else come across this issue? I optimized the jpg to look good (85 quality setting in photoshop's save for web feature). It looks good on my computer.
I also did an interesting test where I viewed the html for the email on my iPhone4 using mobile safari and the background image was not blurry. Whereas when I use mailchimp to send the email it looks blurry on my phone.
Thanks!
What you're seeing is the Android / iPhone scaling the background images to match it's pixel density. You should be able to make your background image twice as big and put a style of background-size:100px 100px; or whatever the original dimensions were on the td.
So, how do they look? Tiny? Does chrome/the OS scale them up? I'd like to publish an app but I don't have a high dpi screen to test this things out and I'm really curious about it.
If they in fact look tiny, would a device-pixel-ratio media query that sets the html font-size fix it? All my units are set in rems, no images and only a few text.
Chrome apps generally look great on high-DPI screens -- just as Chrome itself does.
Even if your CSS specifies all dimensions in px, those are CSS pixels, and adapt to the display based on the device-pixel-ratio.
With rems, and no images, your app should look much better on a high-DPI display than on a standard one.
Low-DPI Images on a high-DPI screen can look pixellated -- not because they are tiny, but because they have been scaled up, and they are being presented beside crisply rendered text. For those cases, there are techniques that you can use to present high-resolution images to those displays, and standard images to others.
The other issue to be aware of is drawing with a <canvas> -- if you want a sharp image, you have to remember to scale the canvas area by device-pixel-ratio, and scale up all of your coordinates the same way as you draw.
this site in development look fine in many different browser except on my iPhone4s safari browser. For reason i don't know, the full width image at the top is "scale"
site in question : http://studioteknik.ca/stada/
The question is, why the scaling append, and what to do to get it perfect as in desktop browser.
Other sub question : do you know a library that can help make mobile and destop look the same, i mean for image but for text sizing.
The question is not localized or precise, it's a development question for crosse browser compatibility. Thanks in advance.
And BTW, i test it in iPhone emulator online, witch they all pretty much sucks, and don't really show reality, but they show all the site correctly! so i am more mystify that anything else (as opposed to being help)
To prove my point, here is a screen capture of my iphone render : http://studioteknik.ca/stackoverflow_question/stada.jpg
Goggling for the right thing (resized sprite on safari iphone) lead me to the right answer. Here is the solution and some other site i have found interesting, helpful information.
from : http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk
It turns out the reason for this is a resource limit on the iPhone - the amount of memory an image can use once downloaded and opened. This same limit applies to mobile Safari on the iPod and iPad. Note that this limit is nothing to do with the file size. The maximum limit for images is 1024x1024x3 (3,145,728). If the width and height dimensions of your image multiplied together exceed this value, the image will be down sized. The result can vary depending on the viewport size (whether you're on an iPhone or an iPad).
and more resources :
http://www.thecssninja.com/css/high-res-sprites
http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-font-sizing-media-query-efficiency-more/
http://www.studiopress.com/design/css-background-size-graphics.htm
http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I have been doing a bit of testing with images today and found that I could not make a blurry PNG image, which looked fine on my desktop appear non-blurry on the iphone without doing some strange things.
It wasn't until I made the images twice the resolution, then resized them within the iphone that they appeared crisp on screen. Is that normal practice?
What say if you have a background image that you want to be non-blurry? I don't see how I can do something like upload a background image and tell it to run at half the size...
Thanks for any pointers!
I found the answer.
It turns out that pixels are not the same on the iphone and are actually at a higher resolution.
In order to make images non-blurry, I needed to basically upload images 2-3 times regular size and then make their size smaller within the CSS.
For example, if I wanted a 50px image, I uploaded a 100px image and styled in within css to have a width of 50px.
It looks like the new iPads have even higher resolutions which means you may even want to upload higher resolution images to cater to those.
A bit lame I think, but it does look nice.
I might be misunderstanding you, but if you'd like to present a crisp image on a retina phone, you can place it in a UIImageView half it's size and set the contentMode to scale to fill.
I'm developing an iPhone app. A simple image is the background of the main view.
I've set an UIImageView in the background and set an image in, using IB.
the image is a 160dpi PNG image. It appears like CRAP in IB. When running in the simulator it is ok, crisp.
How am I supposed to work and place my controls precisely on a such poor resolution image ?
Is this a bug ?
Thanks for you help!
IB is not a tool for designing a UI, it is a tool for implementing one. It is designed to perform well rather than display well (this is more important in complex desktop UI design than mobile but the tool is the same for both). The best advice is perhaps to take a cue from the publishing world (where this is a common practice for applications that display large amounts of high resolution graphics such as Adobe InDesign) and keep track of exact measurements for controls - the x,y coordinate positions and height/width. Then you can use the inspector to precisely position controls.
Actually, the DPI is not irrelevant at all.
Change the DPI to 72 and the image will display in IB/Xcode fine.
I don't see anything like this when I work with images in IB. Maybe there's something special about your PNG file? You say that it's 160 dpi, which is fairly irrelevant. More important are what its pixel diomensions are, and how they compare to the screen size.
Maybe the UIImageView is having trouble rendering your PNG, and is for some reason using the preview icon instead? Try a different image, or try resizing your image to 480x320, with 32-bit color.
I am wondering about this as well. I don't think the DPI of the image is what is doing this, because I have a project where everything looks fine in IB on one machine, then on my laptop, it displays the way the OP is describing.
The image dimensions are the same as the iPhone screen and the view dimensions (320x480), but the image displays all tiny instead of filling up the whole dimeal nsions of the UIImageView. If I scale to fill, then the image gets all blurry, at 320x480, even though I can confirm that those are the actual dimensions of the image... It's acting as if the image itself is 320x480 of empty space with a small version of my image centered inside it... this is very strange. As I said- this is the same project that looks completely fine in IB on another machine (and when they build, they both look normal in the simulator). This also happens on my friends's macbook.
Is there some setting in IB that might be the difference?
EDIT:
Guess I spoke too soon- I went back to my other machine and noticed the same problem this time, and it indeed was the dpi. This must have been a change in one of the recent updates to xcode/IB, because I originally never saw this issue, and the image files are exactly the same... strange.