Design Images for the iPhone and iPad - dummies

Design Images for the iPhone and iPad

Having eye-catching images on your website is one of the best ways to attract image-conscious iPhone and iPad enthusiasts. But cramming a high-resolution image that can be blown up to poster size onto an iPhone screen makes no sense. Not only would the photos not display correctly, but downloading a file that large would also take an inordinately long time and your visitors would likely abandon your site.

Rather than force visitors to download large images on the home page of your mobile site, which iPhone users would access, you should ensure that your designs honor the constraints under which your users labor.

If you plan to put images on your mobile website, the design process goes more smoothly if you have a strategy to handle the different screen sizes, resolutions, and aspect ratios.

  • Sizing one image to fit both screens: A practical and timesaving way to create images optimized to work on both the iPhone and iPad is to create one web-optimized image that looks good on both devices.

    It isn’t a perfect science, but both the iPad and iPhone 4 have such great-looking displays that you can scale an image up or down quite a bit and it can still look quite good. Although this method isn’t foolproof, creating one optimized image is the simplest option, and it will work for many sites.

  • Using multiple image sizes: If you have the resources and the time, the best solution is to tailor a site to each device’s capabilities and screen size.

    Using this approach, you create multiple versions of each image in different sizes, from 320 pixels wide to 1024 pixels (if you want the image to stretch across the iPad’s screen in Landscape mode). Then you deliver the size that best fits the device with some kind of device detection script.

    Because setting up a device detection script is complex and creating multiple versions of every image adds a lot of work to the average web site, many people use services, such as Galleria, to quickly create slide shows with many images that are optimized for each device as they’re delivered.

  • Displaying image portfolios or galleries: If you design portfolio sites — where the whole point is to empower clients to show off their work anywhere, at any time (and to look their absolute best) — you may have a legitimate need to include higher-resolution images with larger file sizes.

    The best way to handle this situation is to create one page with low-resolution thumbnails or short text descriptions and then link to the larger images. You can see an example of this approach at the inplainsight art website. As shown in the figure, the thumbnails at the top of the page link to larger versions, as shown in the page below it.

    This way, your most important pages load quickly with small versions of your images that all your visitors can view, and those who are interested in high-resolution images can choose to download the larger versions one at a time.

    [Credit: Images by artists Amy Baur and Brian Boldon,]
    Credit: Images by artists Amy Baur and Brian Boldon,

You have many ways to create galleries that work on both the iPhone and iPad. The main concept to remember is not to use Flash.

As you design galleries like these, remember that one of the differences between a web browser on a desktop computer and a touchscreen is that you can’t roll over an image with a mouse on an iPhone or iPad. Instead, rollover events, such as those commonly used with an image gallery, are converted into links on an iPad or iPhone.