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.
Related
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.
I thought I had my ios app icon all settled. I designed in Photoshop and tested in the prescribed sizes and it looks great (resizing in photoshop and saving to .png). I also tested via the "add to home screen" to see how it would look and looks nice and crisp (via a cool little webpage that lets you upload icon and bookmark on your device).
However, when I upload it as the large 1024 x 1024 icon (png) you do via iTunes Connect my shapes look all jagged. At least in the preview you get when initially getting ready to submit a new application.
Wondering what causes this and what I need to take into account as it pertains to how Apple resizes icons for delivery. Any help in pointing me in the right direction would be great.
What resolution did you design it in? If you designed it in Photoshop, it is a raster image and I would suggest you design in illustrator as a vector, but at the very minimum make sure your designed resolution is higher than the proportions required for the icon by Itunes.
I'm working on an image heavy web site that's essentially got three designs for multiple screens: smart phone, tablet and desktop.
The main feature of this site is background/fullscreen images. Has anyone got any recommendations regarding the suggested sizes that these background images should be?
They'll all be progressive jpegs as that seems the most sensible path for resizing and optimisation.
Handling the different images sizes will be another test, but essentially it seems sensible to handle it on the client side since this design allows for a polite loader.
I would recommend formatting for a non-retina phone such as the iPhone 3Gs at 480x320, a retina iPhone 5 at 1136x640, a retina iPad at 2048x1536, a retina mac book pro at 2880x1800. Then setup your media queries to pick the best of those sizes for non-retina ipad, standard desktop (your default image), and the Google Nexus 10 which has a display near the MBP retina (2560x1600).
For background images you will want to use media queries. For fullscreen images what I've done is implement a JavaScript module that allows you to imitate the picture element proposed by the Responsive Images Community Group. Or if you prefer you could go the "srcset" route.
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 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.