Responsive design has become the watchword for achieving success when it comes to building an outstanding online presence. To engage with customers and keep their interest it’s well known that you need to offer a unique, positive user experience. This is not difficult if the design of your web page focuses on one gadget, for example, a laptop. However, in today’s tech world consumers are accessing information via a wide range of devices with a variety of screen sizes and orientations. Responsive design seeks to address this issue, among others, but images, in particular, can be problematic unless handled with expertise.
Get the picture
Text size can be adjusted relatively easily for smartphones, tablets and laptops if you know what you are doing. Web designers who test their work across several platforms simultaneously can address issues around flexibility, in terms of orientation options. Images, however, can be problematic as the quality of a picture can often suffer when scaled down or up. In terms of resolution, gadgets these days can range between 72ppi and 600ppi although the former is becoming rarer.
To maintain the integrity of an image you may have to increase the size of the entire site including each image. Unfortunately, this can have a resulting negative effect on performance. Bear in mind that slower load times and a site that is cumbersome or eats data will frustrate your customers and won’t make for optimum user experience.
To resize or not to resize
Scaling images may sound ideal bit it can result in poor quality and some techniques for handling this problem include creating several versions of an image that have a variety of resolutions. Having said that, there are designers who argue that if you do this you risk diluting or losing the impact altogether especially on smaller screens. In fact, it is devices of this type that suffer most when it comes to maintaining image quality as doing so may require making files bigger than the size needed, say, for a desktop or laptop.
Do you need that image?
It’s tempting to reduce the number of images on a site or drop them altogether, to improve how easy it is for a multitude of devices to handle the site. Unfortunately, this is not the simple solution it may seem to be – even if you are running a small blog rather than a major promotional campaign site, your chosen images create an important connection with your consumers.
Research indicates that images now account for more than half the size of the average online page and are known to influence responses to a site – both emotional and intellectual. Undoubtedly they are an invaluable tool in your marketing or web designer armory, whether you are reinforcing a brand message or seeking to engage with site visitors.
Getting it right
So, how do you go about getting it right? Perhaps the place to start is with the quality of the original image and your options for how it can be used. For example, if you’re promoting a site about food and cooking that offers great recipes, it’s tempting to use that cute photo you took at the weekend of grandma’s delicious down home apple pie. Unfortunately, depending on the resolution of the photo, your apple pie picture might disintegrate on certain platforms and therefore do you a disservice.
It makes more sense to use the high-quality images made available by online stock libraries, many of which can supply you with quality material in a range of resolutions. Stock images cover an enormous number of topics and have access to an image for practically anything you may need. You can browse to see what will fit best with the content of your site and then check out which resolutions will work most effectively with your web design and with each variation of it that is tailored to mobile devices.
Alternative technologies
One of the new kids on the block when it comes to advanced ways to handle images is Scalable Vector graphics (SVG). As the name implies, these graphics are based on images that use distances, angles and points (vector) and they are designed to be easy to resize (scalable). They can be a useful alternative to standard bitmaps unless the file size of the SVG is prohibitive when compared to the bitmap version.
JavaScript is another avenue open to web designers aiming to streamline image making but is not without its opponents. Difficulties occur when users opt to switch it off, which is possible, although this is less common on the mobile web.
An alternative to JavaScript, Sencho.io SRC is a third party option when it comes to identifying and using methods of image resizing. A cloud-based solution that assists with orientation for a large number of devices it can alter screen resolution to find the best version of an image for optimum viewing.
Your browser also makes a big difference to how images are perceived by a specific device. In fact, designers have had to build in failsafe options to ensure that certain types of images don’t adversely affect or ‘break’ some types of browsers.
Responsiveness
Ultimately, it may be that the level of responsiveness of any given site is in the eye of the beholder because what works for one client or web designer can be deemed below par or over the top by another. In terms of best practice, therefore, it’s important to bear in mind what the expectations of the client are – is direct and proactive customer engagement key or do they simply want you to ensure their site makes a good overall impression that will attract repeat visits?
Once the clients’ expectations are clear, it will be easier to work with web designers who are familiar with creating responsive sites and handling images in such a way as to be most creative, eye-catching and impactful.