Knjižnica Filozofskog fakulteta
Sveučilišta u Zagrebu
Faculty of Humanities and Social Sciences Institutional Repository

Responsive images in web design


Downloads per month over past year

Matija, Marohnić. (2018). Responsive images in web design. Diploma Thesis. Filozofski fakultet u Zagrebu, Department of Information Science. [mentor Kocijan, Kristina].

PDF (Croatian)
Download (11MB) | Preview


The diversity of web-capable devices prompted the start of responsive web design. Because of the boom of mobile devices and the high prices of internet connection in many parts of the world, the need for delivering smaller images on smaller devices was rising. Programmers have thought of various workarounds for responsive images, most often using JavaScript. However, each solution suffered from insurmountable shortcomings. It was necessary to make a specification for a standard solution which web browsers could understand. The solution needed to satisfy most common use cases of responsive images, e. g. screen density, media type, image format etc. A group of people got together to tackle this challenge, they called themselves Responsive Issues Community Group (RICG), and after several years of iterations they came up with a proposal for a specification in the form of additional HTML attributes and a new element. Eventually all major web browsers have implemented this specification, which meant that programmers could start using it. Other than saving bandwidth it’s also important to ensure that images are accessible to people who are visually impaired and colorblind. Each image needs to have a text which describes it or its function and make it easy to understand to people who can’t tell some of its colors apart. After responsive web design maintaining images became a lot harder, which is why it’s useful to look for options to automatize a part of that job. Solutions vary from manually compressing images to using web services specialized for images. In order to gain a sense of images on the web, images on popular local and foreign news sites are being compared on mobile and desktop devices. Total image weights are being calculated in order to see how much images are optimized for mobile devices and how news sites compare to each other. Considering that the total weight of an average web page consists mostly of images, it’s important to decide when images are actually needed, and when they aren’t.

Item Type: Diploma Thesis
Uncontrolled Keywords: Responsive, web, images, accessibility, automatization.
Subjects: Information sciences > Social-humanistic informatics
Departments: Department of Information Science
Supervisor: Kocijan, Kristina
Date Deposited: 24 Sep 2018 13:20
Last Modified: 24 Sep 2018 14:36

Actions (login required)

View Item View Item