Idag är det vanligt att göra webbplatser som är responsiva. Flera responsiva front-endramverk har dykt upp i samband med att användning av smarta mobiler och läsplattorökat. Långsam laddning på mobila enheter är dock ett prestandaproblem som uppståttsedan vi började använda mobiler för att surfa. En anledning till den långsammaladdningen kan vara när bilder inte optimeras för olika skärmstorlekar. En lösning tilldet kan vara att använda responsiva bildtekniker. Den här studien undersöker vanligafront-end ramverks inbyggda bildtekniker för responsivitet och jämför dem med andraresponsiva bildtekniker. Ett experiment genomförs där svarstider samlas in. Det visarsig att de bildtekniker som skickar storleksanpassade bilder till olika enheter erhållersnabbast svarstider.

Information på webben konsumeras idag via en mängd heterogena enheter. Faktorer som nätverksunderlag och skärmupplösning påverkar vilken bild som är lämplig att leverera till klienten, då en bild i sitt originaltillstånd på en tekniskt begränsad enhet tar lång tid att hämta samt kräver en stor datamängd. Eftersom surfandet på mobila enheter via mobila nätverk förväntas att öka är en lösning för adaptiv bildladdning relevant. Syftet är att undersöka huruvida en webbtjänst, bestående av en klient och en server, kan avgöra bäst lämpad bildkvalitet att leverera till klienten, baserat på dennes aktuella nätverksprestanda och skärmupplösning. En enhet med lägre skärmupplösning och ett långsammare nätverk berättigar en bild i sämre kvalitet och lägre bildupplösning. Därmed förkortas hämtnings- tiden och datamängden reduceras, vilket bidrar till en förbättrad användarupplevelse.Uppsatsen presenterar och utvärderar flera lösningar för adaptiv bildladdning. Lös- ningarna baseras på två parametrar: bredden på klientens webbläsarfönster samt svarstid mellan klient och server, med hjälp av javascript. Dessa parametrar står till grund för den skalning av storlek och kvalitet som sedan appliceras på bilden. Bilden tillhandahålls klien- ten genom någon av de två leveransmetoderna fördefinierade bilder, där flera olika versioner av bilden lagras på servern, och dynamiska bilder, där bilderna i realtid renderas på servern genom gd-biblioteket i php utifrån på originalbilden. Tre typer av adaptiv bildladdning – kvalitetsadaption, storleksadaption och en kombination av de båda, undersöks med av- seende på tidsåtgång och levererad datamängd. Dessa utvärderas sedan i förhållande till basfallet bestående av originalbilderna.Att använda någon typ av adaptionsmetod är i 14 av 15 fall bättre än att enbart leverera originalbilder. Bäst resultat ger kombinerad adaption på enheter med mindre skärmupp- lösning och långsammare nätverk men är även gynnsamt för enheter med medelsnabba nätverk och enheter med stöd för högre skärmupplösning. Både fördefinierad och dyna- misk leveransmetod ger bra resultat men då den dynamiska leveransmetodens skalbarhet med flera parallella anslutningar inte är känd rekommenderas fördefinierade bilder. / Today, information on the web is consumed via a variety of heterogeneous devices. Factors, such as network connection and screen resolution, affects which image that is the most suitable to deliver to the client. An image in its original condition, in a technically limited device, takes a long time to download and requires a large amount of data. Since the number of devices browsing the internet via mobile networks are expected to increase, a solution for adaptive image loading is needed. The aim of this thesis is to explore whether a web service, consisting of a client and a server, can determine the best suited image that should be delivered to the client. This is based on the client’s current network connection and screen resolution. A device with a lower screen resolution and a slower network connection requires an image of lower quality and lower resolution. Thus, the download time can be shortened and the data volume reduced, contributing to improved user experience.Our adaptive solution is based on two measurements – the width of the client’s browser window and the latency between the client and the server – using javascript. These para- meters are the basis for the scaling of the size and quality which applies to the image. The image is provided to the client by one of the two delivery methods: “predefined images”, where several different versions of the image are stored on the server, and “dynamic images”, where the images are rendered on the server by the gd library in php, based on the original image. Three types of adaptive image loading – quality adaptation, size adaptation and a combination of both, are investigated considering delivery time and the amount of data delivered. These are then evaluated in relation to the base case consisting of the original images.Using some type of adaptation method is in 14 out of 15 cases better than simply delivering the original images. The best results are given by the combined adaption method on devices with smaller screen resolutions and slower network connections, but is also beneficial for devices with medium speed connections and devices that support higher screen resolutions. Both predefined and dynamic delivery methods shows good results, but since the dynamic delivery method’s scalability with multiple concurrent clients is not known, it is recommended to use predefined images.