Incorporating images into responsive website design

Friday, September 07, 2012 9:02 AM

Professional web designers need to be careful about incorporating an image on a responsive web page, as it might not appear as it should on all screens.

Professional web designers need to be careful about incorporating an image on a responsive web page, as it might not appear as it should on all screens.

Professional web designers need to be careful about incorporating an image on a responsive web page, as it might not appear as it should on all screens.

Responsive web design is one of the best web design solutions for optimising a site for desktop and mobile device viewing. However, professional web designers need to be careful about incorporating an image on a page, as it might not appear as it should on all screens.

"We can't expect that an image intended for a 27" display will be suitable for a 3.5" display - we'll need to provide a different image that has the same semantic meaning," web designer Matt Wilcox wrote in a June article on dev.opera.com. "A good example is a photograph of an author on a biography page; at large sizes we can use a photo of the author standing in a book store, surrounded by their books, and not lose the detail of who that author is. For a small screen, the author would become unrecognisable, so we'd want to switch to a drivers licence type head shot in order to keep the same meaning for the user."

The main issue, according to Wilcox, is between load times and graphic design. A large high-resolution image will look great on a desktop, but the image will be far too big for a smartphone and will make the page load more slowly. A smaller image would be ideal for optimal viewing on a mobile device, but that same page would lack visual appeal when seen on a desktop or laptop.

Potential responsive web image solutions
Website designer Jake Rayson wrote that professional web designers have a few options to solve this problem. An image could be formatted using an adapted images server that generates different sizes of the same image to correspond to the screen size detected. Another option can be to use the same size image, but to have a different resolution of the image appear based on the device used.

Wilcox offered additional solutions, including changing the format of a webpage from a horizontal format to a more vertical design based on the internet-enabled device and using image formats other than jpeg that are more adaptable across a variety of screens.

Regardless of the solution undertaken, corporate web design professionals should take note that any changes to make images more adaptable could yield more coding on a page, Rayson said. This can make a page load more slowly, and can sometimes yield display issues.

For now, Wilcox recommended that website designers implement an image solution that works best for the site's particular needs, as a definitive solution does not exist yet.

Division [1] Web Design is an Edmonton Website, Application and Software firm specializing in design and development since 2002.

comments powered by Disqus