I worked for several years as a web designer before the iphone changed the industry. I just started a new site and have encountered an issue I never had back then: although text and Font Awesome graphics look great on high resolution displays like the iphone, images and specifically logos look terrible. How do designers and developers compensate? Thank you.
Not really sure what you’re referring to. Low resolution images look increasingly bad on increasingly higher resolution displays, especially if a designer attempts to use, say, a 600px image as a 1200px background.
But not sure what you mean about images just looking bad on mobile specifically. Elaborate?
You need better quality images for a start
There are a couple of approaches.
Start with an image double the size you wants when you create them and then display then at half their size. You can optimise the quality down and thus not incur much extra filesize overhead and still have the images look sharp on retine devices.
") Use media queries and display double density images to retina devices.
PaulOB, thanks! I will look into these.
So, is it now standard practice to either create double-resolution images or use special media queries to have responsive web design?
There’s a lot happening to address this issue now. New elements (such as <picture>) and attributes have been created to deal with it. Here’s a recent article with the latest state of things: http://davidwalsh.name/responsive-images
"At some point we got bored or resizing icons and worked out that if we used Font Icons or SVG icons then it didn’t matter how good the screen would become because the vector looks beautiful and crisp EVERYWHERE.
High DPI/Retina doesn’t matter because you’ve already updated all your logo’s and icons to SVG and that scales to work on any device."