This bachelor thesis dives into the topic of responsive images on the web. With more and more devices different devices accessing the web all with different conditions, serving the right image for each and every device is an important matter. This thesis looks into the topic and compares a few available techniques that potentially could solve this problem of providing the right image. This thesis will include a literature study as well as an experiment. When both these parts are done they will be presented, analyzed and summarized for the reader. The experiment is a performance benchmark of two different responsive image techniques, a non responsive image alternative is also tested in order to have something to evaluate the responsive image techniques with and see how big of a difference the techniques can make. Ultimately both responsive image techniques put through the experiment performed relatively even and both showed huge improvements in terms of performance over the non responsive alternative.

Due to the varied climate of devices used today, the web must accommodate to every use case via responsive design. The problem is that images are often forgotten when implementing fluid design, resulting in slower loading of pages and more data sent than necessary. This thesis aims to explore through a literary study which valid standardized responsive image solutions there are using HTML5 and how to implement them. The empirical study of this thesis will be an experiment conducted to find answers on what the benefits are and what you must consider when implementing responsive image solutions. The experiment consists of collecting data from three different websites implementing various degrees of responsive image solutions. We conclude from the literary study that there are currently two valid standardized responsive image solutions in HTML5 in the form of the ‘picture’ element and the ‘srcset’ attribute. We find that the increased size of data stored on disk and the increased complexity of the markup and images must be considered when implementing responsive image solutions. The benefits of the technique will show in terms of decreased loading times of the page and less data sent over the network. We also concluded that a clearer focus and more context was achieved on the images implementing art direction.