0

I am getting into creating mobile device friendly websites and apps.

I am using bootstrap and HTML5 so I am fine with rearranging my layouts.

My question is, is what is the best way to resize images depending on what device the website is being viewed on?

Should I make multiple versions of main images such as the website logo, i.e. a version for Iphone, Ipad and desktop computers? Or have one image where the height and width change?

I currently have a PHP class that detects what browser the user is using by checking the header e.g. the Ipad safari browser has "ipad" in the user-agent header.

I know this isn't 100% reliable and can be spoofed. I'd say 95% of the time it's going to be accurate, because users who are genuinely interested in using your site aren't going to try to break it for lolz.

imperium2335
  • 23,402
  • 38
  • 111
  • 190
  • This is more a UX question, but either way would work fine. If the images look good when scaled up then use scaling, otherwise creating separate images for different screen sizes is probably the better UX – JeffN Apr 24 '13 at 17:49

2 Answers2

0

I would probably just use the width and height approach. Most of my mobile implementations have been very light on graphics, so it hasn't been an issue. You should also look into the viewport meta tag if you haven't done so already.

How to set viewport meta for iPhone that handles rotation properly?

Using Viewport to create a mobile friendly version

Community
  • 1
  • 1
Revent
  • 2,091
  • 2
  • 18
  • 33
  • But wouldn't different image sizes help save on bandwidth and make the site faster for those with poor mobile connections? – imperium2335 Apr 24 '13 at 17:53
  • Certainly - when data bandwidth is an issue you always want to try for minimum file sizes. @David Taiaroa's answer on adaptive images is worth checking out. It probably uses PHP's Imagick to resize the image. My approach so far has been to use very small images and to use them sparingly for mobile pages, but adaptive images could still be useful. – Revent Apr 26 '13 at 21:54
0

If you are asking how to send different sized images to different devices (based on the window width) adaptive images is one good option. It will test the visitors viewpoint then send an appropriately sized image based on break points you specify.

Good luck!

BenMorel
  • 34,448
  • 50
  • 182
  • 322
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • I think you mean "viewport", not "viewpoint"... But the adaptive images look interesting, thanks for the link! – Revent Apr 26 '13 at 21:57