Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

The current framework I use to design webpages currently doesn't do anything to optimize images across different devices. As I see it, their are four types: mobile, tablet, desktop PC and large desktop PC to make things simple, the last three can be considered as one unit and mobile devices as a separate entity (I understand that they are not the same and shouldn't be considered in the same breath).

Dimensioning is the issue I'm having. If we consider a graphic for the header that will take up 100% of the width and be a height of 500px how is that graphic best translated down to a smaller device (iPhone 5 for argument's sake)?

share|improve this question
up vote 2 down vote accepted

Since the header graphic is wider than it is taller, I would suggest having it follow the width of your target device. The header may have to be re-sized into a different dimension for mobile devices though.

My suggestion would be to enlarge the graphic height and optimize it to look best on a mobile device. For example, you could increase text size to increase readability on a mobile device. Also, try to export the graphic at 2x (150dpi) to ensure best results.

share|improve this answer
So it is a case of having two different sets of graphics? – scriptmonkey Dec 5 '13 at 4:47
Yes. You can then use media queries in your CSS to load different images for each screen size. You can refer to this link for more details. – nouptime Dec 5 '13 at 6:28
Good link, thanks for that! – scriptmonkey Dec 5 '13 at 7:42
No problem, glad I could help. – nouptime Dec 5 '13 at 8:27

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.