The current framework i use to design webpages currently doesnt 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 their not the same and shouldn't be considered in the same breath).

Dimensioning is the issue im 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 arguements sake)

thanks in advance.

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