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)?


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.

  • 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
  • No problem, glad I could help. – nouptime Dec 5 '13 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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