I am developing a simple web page to be viewed after an iphone application completes. I am finding the safari degrades the image quality of the jpg so its all fuzzy.
The image is background image applied to a div
div.foo
{
background: url(../images/foo.jpg) no-repeat;
width:320px;
height:349px;
}
The width and height are exactly the same as the jpg image. Is there a way to make sure the image gets displayed in its full quality?
Found the answer. The iphone "optimises" jpg's, compressing them to minimise the file size but destroying the quality of the image. All the reading I did suggested there was no way to switch this "feature" off.
The solution is simple, switch to pngs.
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.
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.
I have a website that requires a very large background image. The page loads correctly in all web browsers I have tried except the Safari on the iPhone and the iPad. In Safari on these two mobile devices the background only covers the left 50% of the page.
From all the testing I have done I can tell that is because of the length of the background image I am using. This is my css:
#bodyLong
{
background-image:url('/Images/TaylorProductsBackground3459.jpg');
background-repeat:no-repeat;
width: 1150px;
height: 3459px;
margin: 0 auto;
text-align: left;
padding: 0px;
position:relative;
}
I know that there is something specifically wrong in this case because if I make one change to the CSS and set height: 1000px;, the background image is no longer shown twice across the back of the page. What can I do to fix this? I would prefer not to use such a large image but it is a client request and I have not been able to convince them otherwise.
I think you are running hard into a limit of the iOS version of Safari. Check all the doco on creating web pages for mobile devices and you might find something about image size limits.
Check the answer here: Image size limitations in mobile safari?
Possible solutions might be to use a smaller image size and scale it up if detail is not important, or to break up the image and tile it.
But seriously, why would you need a 3500px sized image as a background. Bad idea(TM)
I know there has been some talk about large images not rendering well on the new iPad because of a limitation in WebKit. The workaround is to use progressive Jpegs. Try saving your image as a progressive Jpeg and see if that fixes the problem.
You need to make sure the image matches the screen resolution and you need to make sure you retina and non retina sizes
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.
You can see the problem at myspace.com/dejaentenduband
on an iPhone, the background image is shrunk by what appears to be nearly 50%
I haven't had this issue on on other browser. I'd expect the background to simply be cropped where it doesn't fit the screen.
Since it is unusual behavior, and apple must realise this, I'm hoping there is a pure css or HTML based solution. Should I be defining something differently or giving my page's body a particular attribute?
turns out that this has nothing to do with the viewport.
there's an article on it here:
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
one of the limitations of an iphone is stated by Mac:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
JPEG images larger than 2 megapixels are subsampled - that is, decoded to a reduced size
Maybe you need to configure the page's viewport.
If the background image is taller than 1000px it will resize to the width of the viewport. Try reducing the height and see if this has an effect.
I just found out the easiest fix for this. Just open the image through Photoshop and save the image using the "Save for Web & Devices"..
Here is the easiest fix of ALL:
Open Fireworks, export your image as a 32 bit png, and use that png in your background. IOS doesn't scale THAT. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)