Responsive Images - What are the issues ?
Introduction
In a world of ever increasing diversity of devices, screen sizes & web browsers, many have chosen to adopt the responsive web design approach when creating their websites.
Through using this approach, web pages and their content are structured in a way that they can adapt to the size of a particular device. A key part of most website’s content is of course their images, and there are several potential issues that arise when we want to make our images work well across a range of devices. I will be looking at this subject across a series of 4 articles. In this article, we will highlight some of the main issues to consider when regarding images on responsive websites. In the second article, we will explore the "fluid image solution", the third article looks at "PictureFill and the Picture element" and the final article dives into "Adaptive images".
Scaling
A key aspect of responsive web pages is that the structure and content of the page itself adapts to fit into the size of the device you are using. On responsive websites: columns change, menus expand or are simplified, and text flows (like water) to fit seamlessly into the screen you are looking at whatever size that is. Previously in web design, it was not uncommon for images to have fixed widths and heights – however if we maintain this approach in a responsive website – our images will not adapt to the size of the device we are on at all, in many cases the image may not even fit on the screen.
Clearly for responsive websites, we need to change how this works to ensure that along with all other page content, images can no longer have a fixed widths and heights – but rather they need widths and heights that increase or decrease automatically in proportion to the size of the device we are looking at them on so that they fit comfortably on the screen.
Performance & Screen Resolution
Gone are the days when people only looked at websites from the comfort of their desktop pc. Naturally, people now view websites on a wide range of devices - from TV’s all the way down to small smartphones – but people are using these different devices in a range of environments and contexts. Some may be using these devices with a super-fast internet connection, others may be using their devices in a place where there is a limited or very slow internet connection. Some maybe using touchscreen devices and others will use a mouse or trackpad.
Why should this matter to us? Well - in traditional web design, websites and the images that are used on their pages were designed for desktop size screens. This meant images would tend to be rather large, adding to the page 'weight' significantly. On image rich sites, half or more of the total web page 'weight’ (file size) might be due to images! This may not matter when using a desktop pc with a fast broadband connection to view that page – but what if you were trying to view that page from a small mobile device with a slow internet connection - or worse still, whilst your roaming from abroad?
After all, what is the point of having a beautifully designed responsive website if it’s so slow to load on on your device that you never even get to see it?
We therefore need to ensure that the images we serve up are of the appropriate file size for the device they’re being viewed on so they can be loaded as quickly as possible.
In addition, more high end devices are being produced that while being small (e.g. the latest iphone’s) are able to display images of extremely high resolution. On these devices simply ‘appropriately sized’ images may look rather ‘blurry’ if they’re not created at a high enough resolution. The additional challenge here then is to deliver higher resolution images to these devices while simultaneously delivering appropriately sized images to other devices.
Art Direction
Ensuring images scale nicely in proportion to the size of device you are using, and that the images are of an appropriate file size are all noble aims. However are there other issues beyond merely making images the right size? The process of designing web pages and choosing appropriate images involves certain assumptions about the context in which the image will be seen. Therefore the same image chosen for a certain web page design may not look right in a different context (i.e. between a desktop & mobile screen layout) even when shrunk down to an appropriate size.
Imagine a traditional, letterbox-style banner image that you find on many desktop webpages - as soon as it hits a mobile screen it’s elongated format would have to shrink down to such a small size that it’s impact would be severely diminished.
This example illustrates how images more suitable for a desktop computer when simply scaled down look increasingly unsuitable.
Ideally, different images may be more suitable for different screen sizes. This is commonly known as the 'art direction problem' – trying to ensure we get suitable images selected for the screen size we are using.
Site size
Another important issue is in regard to how large a website actually is, and how many images it has. While some websites can consist of just a couple of pages, other sites can have hundreds if not thousands of pages. If a particular responsive image solution requires a higher degree of ongoing maintenance per image – this could make it totally impractical to apply to anything but a site with just few pages. Such a solution will be far more difficult to maintain going forward on a website of hundreds of pages as opposed to say a website of a 10 pages. This point will become clearer when we look at the specific solutions available in the article which follows this one. But for organisations with significant sites larger than just a few pages – this is a consideration that has to be taken seriously.
Therefore, site size is another key consideration when considering potential solutions, especially if it's a site of a significant size with many web pages and images.
Conclusion
In this article we have looked at key issues that one should consider when thinking about images on responsive websites. In the next article, we will consider what responsive image solutions are available or coming soon and compare of the merits of each of these.
