How to Make Images Look Good on High Resolution Displays

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.


The “logo” is temporary.

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 :smile:
There are a couple of approaches.

  1. 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.

jeffreylees, this is the problem. Expand for the full view.

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:

I agree with @ralphm thoughts, if you’re referring to the Retina display type of issue.

There really isn’t a “standard response” that I know of, but a lot of people put out higher resolution images to deal with that. Hopefully and other advancements to HTML5 will give us better solutions as the code goes to keep up with the hardware :smile:

From this very recent article:

"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."

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.