Adaptiv bildladdning i en kontextmedveten webbtjänst

Teknik och samhälle Datavetenskap

Examensarbete 15 högskolepoäng, grundnivå

Adaptiv bildladdning i en kontextmedveten webbtjänst

Att avgöra bildkvalitet baserat på klientens tekniska förutsättningar

Adaptive image loading in a context-aware web service Deciding image quality based on the client’s technical capabilities

Albin Halldén

Madeleine Schönemann

Handledare: Fredrik Ohlin

“It is far better to adapt the technology to the user than to force the user to adapt to the technology." — Larry Marine

Sammanfattning

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 dynadyna-miska leveransmetodens skalbarhet med flera parallella anslutningar inte är känd rekommenderas fördefinierade bilder.

Abstract

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.

Keywords: Image resolution, adaptive images, adaptive image loading, image scaling, adaptibility, web service, context awareness

Ordlista

Alexa-rank Företaget Alexa samlar in data kring användares surfning och utifrån en analys av detta rangordnar vilka webbsidor som är populärast. api Application Programming Interface: ett gränssnitt för att kommunicera

med en programvara.

eb Exabyte: en triljon bytes.

Klient En enhet som begär data från en server.

Media Query _{En css3-modul som kan användas för att leverera olika typer av data} till olika enheter. Exempelvis kan högupplösta bilder väljas att levere-ras till enbart enheter med stöd för det.

mtu Maximum Transission Unit: den maximala längd på ett datapaket som skickas på internet.

Server En enhet som står för central enhet eller leverantör av data till klien-ter.

pb Petabyte: en biljard bytes.

Smarttelefon En telefon med funktionalitet som tidigare enbart existerade på, så kallade, “riktiga” datorer. Även kallat smartphone.

Svarstid Åtgången tid för ett meddelande att färdas från en enhet till en annan enhet och sen tillbaka, det vill säga transporttiden för ett datapaket. tcp Transmission Control Protocol: Ett transportprotokoll för att sända

datagram över ett ip-nätverk med en pålitlig dataström.

Truecolor En egenskap i bildformatssammanhang där ett bildformat har stöd för minst 16 777 216 olika färger, 24 bitar per pixel.

udp User Datagram Protocol: Ett transportprotokoll för att sända da-tagram över ett ip-nätverk utan att en session upprättas mellan sän-dare och mottagare.

w3c World Wide Web Consortium: ett konsortium bestående av industrier, forskningsinstitut, regeringar, eu med flera, med syftet att utveckla standarder för programvara och webben.

Webbserver _{En server med syfte att ta emot http-anrop och leverera data till} kli-ent. Används i många fall för att leverera en hemsidas data.

Innehåll

2.1.1 Att välja rätt bildformat . . . 4

2.1.2 _{ppi, pixlar och punkter . . . .} 5

2.2 Datakonsumtion . . . 6 2.2.1 Internetstatistik . . . 6 2.2.2 Mobilt internetanvändande . . . 6 2.3 Mänskliga faktorer . . . 7 2.3.1 Svarstid . . . 7 2.3.2 Uppfattning av bildkvalitet . . . 7 2.4 Bildkvalitetshantering . . . 7

2.5 Parametrar för adaptiv bildladdning . . . 7

2.5.1 Mätning av överföringskapacitet . . . 7

2.5.2 Svarstid . . . 8

2.5.3 Fysisk skärmstorlek och upplösning . . . 8

2.6 Sammanfattning av möjliga tekniker för anpassningsparametrar . . . 9

3 Metod 10 3.1 Metoddiskussion . . . 10

3.2 Metodbeskrivning . . . 10

4 Genomförande av adaptiv bildladdning 12 4.1 Mätning av nätverkskapacitet . . . 12 4.2 Mätning av skärmupplösning . . . 13 4.3 Testenheter . . . 14 4.4 Genomförande av bildleverans . . . 14 4.4.1 Fördefinierade bilder . . . 15 4.4.2 Dynamiska bilder . . . 17 5 Resultat 18 5.1 Tidsåtgång för nätverkstest . . . 18 5.2 Basfall . . . 18 5.3 Kvalitetsadaption . . . 19 5.4 Storleksadaption . . . 19 5.5 Kombinerad adaption . . . 20

6 Analys 22 6.1 Kvalitetsadaption . . . 22 6.2 Storleksadaption . . . 24 6.3 Kombinerad adaption . . . 26

7 Diskussion 31

7.1 Att välja rätt adaptionsmetod . . . 31 7.2 Användaraspekt . . . 32

Tabeller

1 Sammanfattning av möjliga tekniker för anpassningsparametrar. . . 9

2 Testfall. . . 11

3 Brytpunkter för bildkvalitet. . . 12

4 Testenheter. . . 14

5 Fördefinierade bilders kvalitet och storlekar. . . 15

6 Data för bilder vilka lagras på servern för respektive adaptionsmetod. . . 16

7 Tidsåtgång för nätverkstest använda i kvalitetsadaption. . . 18

8 Tidsåtgång för nedladdning av originalbilder på olika nätverkstyper. . . 19

9 Tidsåtgång för nedladdning av kvalitetsskalade bilder på olika nätverkstyper. 19 10 Tidsåtgång för nedladdning av storleksanpassade bilder på snabbt nätverk. 20 11 Tidsåtgång för nedladdning av bilder anpassade enligt kombinerad adaption på olika nätverkstyper och skärmstorlekar. . . 21

Figurer

2 Bildförfrågningar på hemsida enligt format i februari 2014 [14]. . . 4

3 Dominerande mobilnätverkstyper år 2013 och 2018. . . 6

4 Kvalitetsadaption för snabbt, medelsnabbt och långsamt nätverk. . . 23

5 Storleksadaption för stor, medelstor och liten skärm. . . 25

6 Kombinerad adaption för enheter med snabbt nätverk och stor, medelstor och liten skärm. . . 27

7 Kombinerad adaption för enheter med medelsnabbt nätverk och stor, me-delstor och liten skärm. . . 28

8 Kombinerad adaption för enheter med långsamt nätverk och stor, medelstor och liten skärm. . . 29

1

Inledning

I följande avsnitt presenteras uppsatsens bakgrund, syfte, frågeställning samt avgränsning.

1.1 Bakgrund

En person kan idag konsumera information på webben via en mängd enheter med fler-talet olika tekniska förutsättningar och begränsningar. Fysiska skärmstorlekar varierar från smarttelefoner med storlekar på 3,3 tum1 till stationära datorskärmar med storlekar på 31,5 tum2 samtidigt som skärmupplösningen på mobila och stationära enheter närmar sig varandra.

Vidare är användaren inte längre stationär, utan surfandet kan ske både via surfplattor och smarttelefoner [6], samt över 3G- och 4G-uppkopplingar med varierande prestanda. Detta kan resultera i en konflikt mellan enhetens förmåga att visa bilder med en hög kvalitet och nätverkets begränsade prestanda, vilket kan leda till att bilder inte levereras inom en skälig tid. Redan vid en svarstid på över 300 millisekunder upplevs en hemsida som långsam och efter en sekund börjar användaren tänka på annat [26][27]. Är det därför bättre att leverera bilder av sämre kvalitet inom en rimlig tid, istället för den maximala bildkvaliteten enheten har stöd för?

1.2 Syfte

Denna uppsats ämnar till att undersöka och utvärdera lösningar för adaptiv bildladdning baserat på klientenhetens tekniska förutsättningar. Detta inkluderar en inventering av möj-liga adaptiva metoder för viktiga förutsättningar så som nätverksprestanda, skärmstorlek samt skärmupplösning. Adaptiv bildladdning är lämplig exempelvis då en användare befin-ner sig på en enhet med instabil uppkoppling, minimal skärm eller nyttjar ett abonnemang med begränsad datamängd. Då bör en hemsida med lägre kvalitet och storlek på bilder levereras från servern.

Metoder för att leverera olika bildkvaliteter via html är under utveckling, främst med <picture>-elementet och srcset-attributet, där en bildkälla avgörs av en media query [49][29]. I detta fall är det dock webbläsaren som avgör vilken bildkvalitet som skall in-hämtas, det vill säga att det är klienten istället för servern som ansvarar för detta. För närvarande har ingen webbläsare ännu implementerat fullt stöd för dessa element och attri-but [49]. Därför behövs en lösning som fungerar i dagsläget, är bakåtkompatibel med äldre webbläsare samt ger utvecklaren mer kontroll över vilken bildkvalitet som skall levereras till klienten.

1.3 Frågeställning

Hur kan en webbtjänst, bestående av en klient och server, avgöra bäst lämpad bildkva-litet att leverera till klienten, baserat på dennes aktuella nätverksprestanda och tekniska

1

Den genomsnittliga skärmstorleken för smarttelefoner under år 2013 enligt npd Display Search [12].

2_{Den största skärm tillgänglig hos NetOnNet i mars 2014 [25].}

förutsättningar i form av skärmupplösning och skärmstorlek, och därmed förbättra använ-darupplevelsen?

1.4 Avgränsning

Även i andra hänseenden kan en hemsida optimeras, men denna uppsats kommer enbart att fokusera på leveransen av bilder, eftersom bilder står för cirka 60 % av datamängden på en genomsnittlig hemsida [14]. Vidare är hälften av bilderna på internet i bildformatet jpeg [14], varför enbart detta bildformat kommer att undersökas. Slutligen kommer un-dersökningarna inte att omfatta stilmallar, då funktionalitet för att leverera olika bilder redan kan genomföras med hjälp av media queries. Istället ligger undersökningens fokus på jpeg-bilder i html-dokumentet, vilka implementeras med taggen <img>. Då ingen an-vändarstudie inkluderas i undersökningen kommer inte heller en användarvänlig design att behövas.

2

Teori

Avsnittet redogör för den teori och forskning som ligger till grund för uppsatsen samt presenterar de olika tekniker som gör besvarandet av uppsatsens frågeställning möjlig.

2.1 Bilder på internet

Storleken på hemsidor växer ständigt. Enligt http Archives3 mätning i februari 2014 [13] var genomsnittsstorleken på topp-1000 hemsidor 1,4 megabyte, en ökning med nästan 50 % gentemot mätningen två år tidigare. I samma undersökning kan det även utläsas att bilder upptar i genomsnitt 1040 kilobyte – ungefär 60 % av den totala datamängden på hemsidan.

Figur 1: Genomsnittligt innehåll på hemsidor [14].

Everts [9] nämner tre anledningar till att bilder tar upp mycket plats på internet: 1. Bilder är i ett filformat ej optimalt för ändamålet.

2. Bilder är i större storlek än vad som är lämpligt för klienten. 3. Många bilder är inte komprimerade.

Detta är vanligtvis inte ett problem då användaren nyttjar en bredbandsuppkoppling men kan ge betydligt långsammare laddningstider vid användande av en instabil mobil nät-verksuppkoppling [41]. Vidare leder stora bilder till ineffektiv datakonsumtion för mobila klienter då internetleverantörer kan ha en gräns för hur mycket datamängd klienterna är tillåtna att konsumera.

3

http Archive är en samlingssida där prestandainformation om de 1 000 000 högst Alexa-rankade webbsidorna sparas. Ny data insamlas två gånger per månad.

2.1.1 Att välja rätt bildformat

I dagsläget används bilder på hemsidor med syftet att utsmycka samt att presentera ma-terial. Bilder fyller roller som dekoration, effekter och innehåll på hemsidan. Trots att det inte existerar några klara definitioner över de olika bildformatens användningsområden finns det större skillnader i de olika formaten som gör att det förekommer tillfällen då ett format lämpar sig bättre än ett annat. Enligt http Archives sammanställda statistik mellan februari 2013 till februari 2014 står bildformatet jpeg för 45 % till 50 % av alla http-anrop för bilder på hemsidor [14].

Figur 2: Bildförfrågningar på hemsida enligt format i februari 2014 [14].

Då de tre formaten jpeg, png och gif, enligt http Archive [14], är de vanligast fö-rekommande formaten hos hemsidor idag kommer dessa att diskuteras mer utförligt nedan. gif

gif, vilket är ett akronym för Graphics Interchange Format, är ett bildformat som endast stödjer 256 färger [46]. gif komprimeras genom en så kallad Lempel-Ziv-Welch (lzw)-algoritm, vilken tillhandahåller en förlustfri komprimering där bildstorleken minskas utan att kvaliteten förändras, givet att innehållet kan uttryckas inom den färgrymd som for-matet stödjer [2]. Då denna algoritm patenterades 1985 uppstod en del kontroverser [11], och png började istället utvecklas som en konkurrent till gif med ett flertal funktioner som gif inte kan tillhandahålla [20]. gif stödjer dock sparande av flera bilder i samma fil, vilket innebär att animeringar kan skapas [46], något varken png eller jpeg stödjer. Detta filformat är därmed överlägset när det gäller att skapa små animationer.

png

png står för Portable Network Graphics och är ett patentfritt format med syfte att er-sätta gif och till viss del även formatet tiff [20]. png, till skillnad från gif, har stöd för

truecolor [19]. Komprimeringstekniken som används till png är 5 % till 25 % bättre än gifs, vilket gör att dess filstorlek blir något mindre än gifs för bilder i mindre storlekar [19][17]. Komprimeringstekniken är dessutom förlustfri, vilket medför att bildkvaliteten ej degraderas vid redigering utan bibehåller samma kvalitet [19]. För fotografier, som oftast är väldigt högupplösta med många färger och detaljer, tenderar pngs komprimeringsalgoritm att producera bilder där filstorleken är väldigt stor [10]. Filformaten png och gif beskrivs i en jämförelse av World Wide Web Consortium att användas för grafik, diagram och loggor men då png har stöd för fler färger, transparens och tvådimensionell progressiv rendering rekommenderas denna framför gif [47].

jpeg

jpeg står för Joint Photographic Experts Group och är det format som stödjer stora detal-jerade bilder bäst bland jpeg, png och gif [10]. Med sin komprimeringsteknik kan jpeg producera stora bilder med hög bildkvalitet och en lägre filstorlek än png och gif kan för samma bild[10].

Komprimeringstekniken som används av jpeg är förstörande, vilket innebär att de färger som det mänskliga ögat ej kan uppfatta avlägsnas ur bilden vid komprimering [10]. Komprimeringsnivån sker i en procentenhetlig skala där 100 % är den minst förstörande. Eftersom denna komprimeringsteknik raderar de färger som gränsar till varandra lämpar den sig ej lika väl för bilder i gråskala eller bilder med stort avstånd mellan färgskalorna [10]. Bildformatet bör därför användas till fotografier eller stillbilder från verkliga miljöer och ej till grafik eller text.

2.1.2 _{ppi, pixlar och punkter}

Punkt är en måttenhet inom typografi enligt den europeiska standarden Didotsystemet, där en punkt motsvarar 0,376 millimeter [23]. När tryckerikonsten övergick från analog till digital blev den nya standarden istället enligt Adobes programspråk Postscript, där en punkt uppmäter 0,353 millimeter, vilket motsvarar ₇₂1 tum [24]. I samband med den digitala övergången tillkom även enheten pixel - den minsta beståndsdelen i en digital bild. Pixlar har därmed ingen fysisk storlek utan denna varierar beroende på bildskärmens upplösning enligt ppi (antalet pixlar per tum) [11].

Den första Macintosh-datorn hade en skärmupplösning på 72 ppi med syftet att en pixel skulle motsvara en punkt, och att en bild visad på skärmen skulle bli exakt lika stor vid utskrift [22]. Detta är dock inte optimalt eftersom text på en skärm oftast läses på avstånd 1₃ större än en bok [22]. Lösningen till detta kom Microsoft med genom att öka skärmupplösningen med 1_{3, därav blev standardskärmupplösningen 96 ppi [22]. Idag stödjer} bildskärmar, framför allt på mindre enheter som laptops och smarttelefoner, betydligt högre ppi men fortfarande är 96 ppi standard vid utveckling av applikationer [22].

Bilder sparade i olika bildupplösningar enligt ppi är därför oväsentligt eftersom en pixel i bilden alltid visas som en pixel på skärmen oavsett bildens fysiska storlek. Det är först vid utskrift som ppi visar en skillnad storleksmässigt [16].

2.2 Datakonsumtion

Nedan diskuteras olika aspekter kring internetanvändande. 2.2.1 Internetstatistik

Undersökningar genomförda av Statistiska Centralbyrån gällande den svenska befolkning-ens internetvanor år 2013, visar att 91 % av Sveriges befolkning mellan åldrarna 16 och 85 år hade tillgång till internet hemma [32]. Med ökad tillgång till internet förväntas kurvan över total mängd konsumerad data via internet att kontinuerligt stiga.

2.2.2 Mobilt internetanvändande

Då allt fler personer får tillgång till smarttelefoner med internetanslutning förväntas den mobila datakonsumtionen att växa. Cisco [6] förutspår en ökning i datakonsumtionen ifrån 1,4 exabytes 2013 till 15,4 exabytes 2018, en tillväxt på 61 %. Cisco förutspår även att andelen smarta enheter som används för att surfa på internet kommer att stiga ifrån 21 % (2013) till 96 % (2018) [6]. Beträffande hur de mobila enheterna som konsumerar data på internet kommer att vara uppkopplade, förutspår Cisco att dagens nuvarande fördelning på 68 % via 2G, 29 % via 3G och 3 % via 4G kommer, till 2018, att förändras till 26 % via 2G, 59 % via 3G och 15 % via 4G [6].

Figur 3: Dominerande mobilnätverkstyper år 2013 och 2018.

Då surfandet på mobila enheter ökar väntas ett paradigmskifte där internet till största delen kommer att konsumeras av mobila enheter med mindre skärmstolekar uppkopplade via mobila nätverk. I Sverige har 56 % av befolkningen i åldrarna 16 till 74 år under första kvartalet 2013 använt sig av sin smarttelefon för att surfa på internet utanför hemmet [32].

2.3 Mänskliga faktorer

Avsnittet som följer skildrar de mänskliga faktorer som är relevanta för uppsatsens syfte. 2.3.1 Svarstid

Nielsen pekar ut tre viktiga tidsgränser för användare vid navigering på en hemsida [26]. I det fall där sidan laddas klart på under 100 millisekunder upplevs detta för användaren som en direkt manipulation av sidans komponenter, exempelvis genom att det objekt användaren valt markeras [27]. Det är först kring en sekund som användarens tankar riktas åt annat håll och upplevelsen av att sidan laddas långsamt ökas [26]. Efter tio sekunder har de flesta hemsidor tappat användarens uppmärksamhet, framförallt i det fall då ingen återkoppling ges angående när en operation förväntas att slutföras [26].

Eftersom människan begränsas både i fråga av minne och förmåga att bibehålla uppmärk-samhet, kombinerat med strävandet efter att kontrollera ett flöde, är det därför av största vikt att hålla väntetiden så låg som möjligt [8][27].

2.3.2 Uppfattning av bildkvalitet

Bildkvalitet baseras på många olika faktorer, däribland färg, upplösning, skarphet och brus [18]. En bilds kvalitet är dock besvärlig att avgöra och mäta [40][39], vilket främst beror på att människan har svårt att uppfatta bildkvalitet utan att jämföra med originalbilden [28]. I många fall urskiljs skillnaderna enbart när bilderna är placerade bredvid varandra.

2.4 Bildkvalitetshantering

Ett alternativ för adaptiv bildladdning är så kallade fördefinierade bilder, där bildversio-ner med olika bildupplösningar och kvalitet lagras på servern, som i sin tur returbildversio-nerar bilden bäst lämpad för klienten. Detta kräver dock mycket lagringsutrymme och istället för att spara flera olika versioner av samma bild kan ett php-skript på serversidan som använder sig av biblioteket gd [36] användas för att skapa en kopia av bilden i andra di-mensioner. Klienten kan då ange sina tekniska förutsättningar samt sökväg till bilden som skall visas, och baserat på detta ansvarar servern för att returnera lämplig bildkvalitet och bildstorlek. Detta tillvägagångssätt, hädanefter kallat dynamiska bilder, kräver istället för lagringsutrymme större arbetskraft från servern.

2.5 Parametrar för adaptiv bildladdning

Nedanstående avsnitt presenterar möjliga tekniker för att avgöra parametrar för adaptiv bildladdning.

2.5.1 Mätning av överföringskapacitet Javascript på klientsidan

Genom att ladda in en bild kan ett javascript mäta hur lång tid överföringen tar, och på så sätt uppskatta överföringskapaciteten genom att dividera bildstorleken (i kilobyte) med

laddningshastigheten (i sekunder). Denna metod används bland annat i ett api tillhanda-hållet av Speedofme [30], dock med en mätningstid på upp emot 15 sekunder. Den långa laddningstiden beror på att flera bilder skickas, från 128 kilobyte upp till 128 megabyte, eller tills det fall då en nedladdning har tagit längre än 8 sekunder [31].

Alternativet för att mäta nätverksprestanda effektivare än metoden nämnd ovan är att leverera en bild av minimal storlek till klienten och mäta tidsåtgången. Då mängden data som levereras är minimal kan det värde som erhålls användas för att avgöra klientens nätverksprestanda.

Iperf

Iperf är ett välanvänt verktyg, skrivet med öppen källkod, för att mäta den maximala tcp och udp-överföringskapaciteten samt dess kvalitet [15][4]. Mätningen sker med hjälp av en installation av programmet, både hos klienten och servern, där klienten efterfrågar en tcp-anslutning till servern [4]. När tcp-anslutningen har etablerats mäts kapaciteten däremellan och presenteras i programmet installerat på servern [4].

2.5.2 Svarstid

Enligt statistik publicerad av Bredbandskollen över bredbandshastigheter och svarstider i februari 2014 [3] kan det utläsas, av de tio mest analyserade nätverksuppkopplingarna, att mobila bredband har en svarstid som varierar mellan 45 millisekunder och 79 millisekun-der. Det kan även i statistiken utläsas att bredband, trådburna som mobila, med överfö-ringskapacitet under 3 megabit per sekund har en betydligt sämre svarstid än bredband med snabb uppkoppling. Svarstiden är inte en precis definition över överföringskapaciteten men enligt den presenterade statistiken ovan tenderar nätverksuppkopplingar med lägre överföringskapacitet ha en högre svarstid än bredband med högre överföringskapacitet. 2.5.3 Fysisk skärmstorlek och upplösning

Statistik presenterad av World Wide Web Consortium [44][43] visar att antal färger som stödjs på smarttelefoner och andra mobila enheter ökar samtidigt som enheternas skärm-upplösningar närmar sig skärmskärm-upplösningarna hos stationära datorer. Det går dock ej att dra en slutsats av att enheternas skärmstolekar blir större då enheterna idag istället har skärmar med stöd för högre ppi [42]. Detta medför att det för webbutvecklare i dagsläget inte är möjligt att förlita sig på att avgöra vilken resurs på hemsidan som skall levereras till klienten enligt enbart maxbredd och maxhöjd på klientens skärm i pixlar, utan det-ta måste avgöras enligt klientenhetens fysiska skärmstorlek i kombination med klientens skärmupplösning [45][21].

En enhets fysiska skärmstorlek kan uträknas genom att dividera skärmupplösningens bredd och höjd med ppi. I sin tur kan detta användas för att avgöra om enheten är en mobiltelefon, surfplatta eller en dator, och på så sätt kan en väl tillämpad hemsida till-handahållas. Javascript möjliggör att inhämta enhetens skärmupplösning i formatet pixlar. Att erhålla enhetens ppi är däremot svårare då Internet Explorer för närvarande är den enda webbläsare som stödjer detta [7]. Hypotetiskt sett hade detta gått att mäta i alla webbläsare genom att ange ett <div>-element som en tum långt och sedan mäta hur många

pixlar detta element är. Tyvärr är det i praktiken inte genomförbart då en tum i css är fördefinierat som 96 pixlar, oberoende av den faktiska storleken [48].

2.6 Sammanfattning av möjliga tekniker för anpassningsparametrar

Nedan följer en tabell som presenterar de tekniker som diskuterats i föregående avsnitt.

Tabell 1: Sammanfattning av möjliga tekniker för anpassningsparametrar.

Överförings-kapacitet Svarstid ppi

Skärm-upplösning • Javascript • Javascript • Går enbart med Internet Explorer • Javascript • Iperf

• Speedofme

3

Metod

Undersökningen ämnar att utreda huruvida en webbtjänst kan konstrueras med möjlig-het att avgöra en ansluten klients tekniska förutsättningar och låta servern besluta vilken bild som skall levereras. Då studien är tekniskt baserad används ett experiment för att konstruera och analysera en implementering av adaptiv bildladdning. Data insamlas under experimentet och jämförs i efterhand för att utvinna skillnad i datamängd samt tidsåt-gång för en sidhämtning. Experimentets lösningar utformas och utvärderas i enlighet med hänsynstagandena som är redovisade i teoridelen.

En teknisk implementation krävs, därav är det inte möjligt att använda en annan metod då inga andra metoder kan påvisa den data som krävs för att besvara rapportens frågeställning.

3.1 Metoddiskussion

Experiment används för att iordningsställa en miljö för att illustrera ett verkligt fenomen [1]. Genom att använda en simulerad verklighet kan väsentlig mätdata samlas in och analy-seras med möjlighet till minimalt antal faktorer som kan påverka resultatet [1]. Nackdelar som tillkommer vid användning av experiment är tids- och resursåtgången samt utmaning-en att spegla verklighetutmaning-en [1]. Fördelar som ges är att de variabler som är betydelsefulla för resultatet är lätta att analysera samt att experimentet är lätt att göra om [1].

3.2 Metodbeskrivning

Experimentet i studien innefattar konstruktion av en webbserver och klient. Webbservern tillhandahåller ett adaptivt tillvägagångssätt för att leverera en bild till klienten, utefter dess skärmupplösning och nätverksprestanda. Två mätvärden registreras hos klienten: bred-den på klientens webbläsarfönster samt svarstibred-den mellan klient och server. Båda dessa parametrar mäts med hjälp av javascript. Mängden data samt tidsåtgången för klienten att hämta bilderna mäts med hjälp av proxyprogrammet Charles [5].

De hemsidor vilka används i experimentet innehåller olika antal bilder i hög kvalitet och stort format, där en innehåller 4 bilder och en innehåller 24 bilder. Detta för att kunna jämföra skillnaden mellan en bildtung hemsida och en hemsida med färre bilder och därmed kunna argumentera i vilket fall en adaptiv bildladdning är nödvändig.

Många hemsidor med syftet att visa bilder av hög kvalitet och upplösning använder sig av bilder i lägre upplösning och kvalitet medan en användare bläddrar mellan dessa. Ett exempel på detta är Unsplash.com [37] där användaren själv väljer när en specifik bild skall visas i sin originalstorlek, varpå servern levererar originalbilden till klienten. Genom denna metod undgår servern att leverera stora bilder som användaren inte vill se. Då detta i sig är en metod för att minska datamängden på en hemsida har vi valt att exkludera detta fenomen ur experimentet och levererar bilderna i dess originalkvalitet direkt till klienten.

Eftersom experimentet enbart fokuserar på bildleverans, samt att jpeg står för 47 % av bilderna på webben och är därmed är det vanligast förekommande bildformatet, inkluderas enbart bilder i detta format i experimentet.

Tabell 2: Testfall.

Anpassningsparameter Bild

1. Basfall - Originalbilden som lagras på

servern 2.

Kvalitets-adaption

Svarstid Reducerad kvalitet enligt nät-verksunderlag

3. Storleks-adaption

Enhetens webbläsarfönsters bredd i pixlar

Anpassad till enhetens maxi-mala skärmstorlek

4. Kombinerad adaption

Svarstid, enhetens webbläsar-fönsters bredd i pixlar

Reducerad kvalitet enligt nät-verksunderlag och anpassad till enhetens maximala skärmstor-lek

Första testet genomförs enbart med originalbilderna för att samla in data kring dessa, vilket resulterar i ett basfall som övriga metoder sedan kan jämföras med. Kvalitetsadap-tion, storleksadaption och kombinerad adaption utförs både med dynamiska bilder, som med hjälp av det tidigare nämnda php-skriptet i realtid skalar om bilderna till lämplig storlek och kvalitet„ samt med fördefinierade bilder lagrade på servern. Kvalitetsadaption, som har nätverksprestanda i beaktning, realiseras på ett snabbt, medelsnabbt och långsamt nätverk. Storleksadaption, som enbart behandlar skärmstorlek, kommer enbart att genom-föras på ett snabbt nätverk men istället med tre olika skärmstorlekar. Kombinerad adaption verkställs med hänsyn både till skärmstorlek och nätverksprestanda. Därmed testas detta i tre olika skärmstorlekar och tre olika nätverksuppkopplingar i olika kombinationer.

Vidare genomförs alla tester både med 4 och 24 bilder, definierat som en lätt och en tung hemsida, för att kunna jämföra och undersöka skillnader mellan lätta och tunga hem-sidor avseende datamängd. Totalt genomförs 66 olika tester.

Resultatet sammanställs därefter och förväntas för respektive adaptionsmetod påvisa: • Tidsåtgången det tar att ladda en lätt respektive en tung hemsida.

• Datamängden för en lätt respektive en tung hemsida.

• Antalet http-anrop och dess storlek av den totala datamängden. Sedermera genomförs en analys av resultatet, vilken fokuserar på:

• Vilken adaptionsmetod ger mest störst vinst i förhållande till originalbilderna, i fråga av tid och datamängd.

4

Genomförande av adaptiv bildladdning

Experimentet genomförs med servermjukvara Apache version 2.2.26 på en Macbook Pro från 2011 med Intel Core i5 2,3 ghz processor, 4 gb 1333 mhz ddr3 minne och Intel hd Graphics 3000 384 mb grafikkort, vilken agerar webbserver, proxy och klient. Syftet med detta är att undvika felkällor i form av nätverksproblem, vilket förhindras när experimen-tet genomförs lokalt. Att samma maskin utgör alla enheter i webbtjänsten kan resultera i en felkälla, eftersom klientens rendering av en hemsida kan uppta arbetskraft som på-verkar serverns bildrendering för de bilder som skall levereras. Denna felkälla bedöms som mindre allvarlig än de nätverksproblem som kan uppkomma när experimentet genomförs distribuerat på flera enheter vilket ligger till grund för beslutet att genomföra testet lokalt.

4.1 Mätning av nätverkskapacitet

Mätningen av överföringskapacitet sker med hjälp av ett javascript på klientsidan. api:t tillhandahållet av Speedofme används ej då genomförande av detta test på ett mobilt nätverk inte är optimalt, med tanke på den datamängd som krävs och den tid det tar. Iperf används ej heller då detta kräver en installation både hos klienten och servern. Det hade varit möjligt i ett prototyptest, men då syftet är att finna en lösning som kan implementeras i verkligheten, är det inte möjligt att anta att alla klienter skall ha Iperf installerat. För att mäta nätverkskapaciteten kommer istället en metod, liknande tillvägagångssättet hos Speedofme, att användas där en gif-bild på 35 byte4 laddas in från servern till klienten. För att få ett så stabilt resultat som möjligt laddas bilden in tio gånger och det lägsta resultatet sänds sedan vidare i en cookie till innehållssidan där bildadaptionen utförs. För att webbläsarna inte ska spara bilden i dess cache-minne genereras en url-parameter med ett slumpmässigt tal via javascriptmetoden Math.Random.

Klientens nätverkstyp avgörs enligt den svarstid som tillhandahålls från testet nämnt ovan och används för att avgöra vilken bildkvalitet som skall levereras. Brytpunkterna är definierade enligt den data som Bredbandskollen presenterar i sin statistik [3], där det går att utläsa att svarstiden är högre hos nätverksuppkopplingar med lägre överföringskapacitet samt hos mobila nätverk. De tre brytpunkterna som används för att reglera bildkvalitet i experimentet är följande:

Tabell 3: Brytpunkter för bildkvalitet.

Titel Brytpunkt Bildkvalitet

Snabbt nätverk Under 60 ms Hög bildkvalitet (100 %) Medelsnabbt nätverk Mellan 60 ms och 100 ms Medel bildkvalitet (66 %) Långsamt nätverk Över 100 ms Låg bildkvalitet (33 %)

För att mäta nätverksunderlag registreras en tidpunkt precis innan gif-bilden skickas och en tidpunkt när sändningen är slutförd. Vidare subtraheras starttiden från sluttiden

4

En bild i storleken 1×1 pixlar med transparent bakgrund.

och total sändningstid erhålls. Total sändningstid används därefter för att avgöra vilken bildkvalitet som levereras till klienten, se tabell 3.

4.2 Mätning av skärmupplösning

Då det som tidigare nämnts ej är möjligt att läsa av en klients ppi kommer istället klientens webbläsares bredd, i pixlar, att utläsas genom javascriptmetoden window.innerWidth, vilken påverkar valet av bild som levereras. I det fall leveransmetoden dynamiska bilder används levereras bilderna i storleken motsvarande klientens webbläsares bredd. För de tester där fördefinierade bilder används kommer en bild med lika stor, eller större, bredd att levereras. Detta för att den bild som levereras skall uppfylla kravet att vara minst lika bred som klientens skärm.

4.3 Testenheter

Tabell 4: Testenheter.

Enhet

Överförings-hastighet Svarstid Skärmstorlek 1. Snabbt nätverk, stor skärm 30 Mbit/s 20 ms 1920 × 1080

Stationär dator med fibernätverk

2. Snabbt nätverk, medelstor skärm 30 Mbit/s 20 ms 1280 × 800

Bärbar dator med fibernätverk

3. Snabbt nätverk, liten skärm 30 Mbit/s 20 ms 768 × 1024

Iphone 4 i porträttläge med fibernätverk

4. Medelsnabbt nätverk, stor skärm 7 Mbit/s 75 ms 1920 × 1080

Stationär dator med adsl-nätverk

5. Medelsnabbt nätverk, medelstor skärm

7 Mbit/s 75 ms 1280 × 800

Bärbar dator med adsl-nätverk

6. Medelsnabbt nätverk, liten skärm 7 Mbit/s 75 ms 768 × 1024

Iphone 4 i porträttläge med adsl-nätverk

7. Långsamt nätverk, stor skärm 1 Mbit/s 150 ms 1920 × 1080

Stationär dator med 3G-nätverk

8. Långsamt nätverk, medelstor skärm

1 Mbit/s 150 ms 1280 × 800

Bärbar dator med 3G-nätverk

9. Långsamt nätverk, liten skärm 1 Mbit/s 150 ms 768 × 1024

Iphone 4 i porträttläge med 3G-nätverk

Alla enheter har mtu (Maximum Transmission Unit) med ett värde på 1500.

4.4 Genomförande av bildleverans

24 jpeg-bilder med olika motiv och färgspektrum har laddats ned och står till grund för experimentet [38] [37].

4.4.1 Fördefinierade bilder

De 24 olika bilderna som används i experimentet har med hjälp av gd-biblioteket version 2.1.0 via php skalats om till 11 andra versioner enligt tabellen nedan5:

Tabell 5: Fördefinierade bilders kvalitet och storlekar.

Bildtyp Kvalitet

(0-100 %) Bredd i pixlar

01. Original 100 % Original

02. Medium kvalitet 66 % Original

03. Låg kvalitet 33 % Original

04. Störst bredd 100 % 2560 pixlar

05. Medium bredd 100 % 1366 pixlar

06. Minst bredd 100 % 1024 pixlar

07. Högst kvalitet & störst bredd 100 % 2560 pixlar 08. Högst kvalitet & medium bredd 100 % 1366 pixlar 09. Högst kvalitet & minst bredd 100 % 1024 pixlar 10. Medium kvalitet & störst bredd 66 % 2560 pixlar 11. Medium kvalitet & medium bredd 66 % 1366 pixlar 12. Medium kvalitet & minst bredd 66 % 1024 pixlar 13. Låg kvalitet & störst bredd 33 % 2560 pixlar 14. Låg kvalitet & medium bredd 33 % 1366 pixlar 15. Låg kvalitet & minst bredd 33 % 1024 pixlar

Sammanlagt lagras 12 olika versioner av samma bild på servern och totalt lagras 288 bilder.

Kvalitetsadaption

Alla bilder är döpta enligt namnkonventionen bx_q_y där x motsvarar bildens nummer och y motsvarar dess kvalitet enligt parametrarna s (small), m (medium) eller l (large).

Rätt bild returneras med hjälp av ett javacript med inparametrarna svarstid och sökväg till bilden som skall visas. Skriptet exekveras i följande steg:

1. En variabel path definieras med sökvägen till katalogen med alla bilder finns lagrade. 2. En variabel q definieras men är tills vidare tom.

3. Om svarstiden är lägre än 60 ms får q värdet _q_l. Är svarstiden lägre än 100 ms får q värdet _q_m. Är svarstiden högre än 100 ms får q värdet _q_s.

5

Bilderna 7, 8 och 9 är desamma som bild 4, 5 och 6 då bildkvaliteten är 100 % på allihop och de har alla samma bredd.

4. Den slutgiltiga sökvägen konkateneras av path + bildens namn + q + “.jpg”.

Storleksadaption

Alla bilder är döpta enligt namnkonventionen bx_w_y där x motsvarar bildens nummer och y motsvarar dess storlek enligt parametrarna s (small), m (medium) eller l (large). Den bild som levereras till klienten uppfyller kravet att minst vara lika stor som klientens bredd. Till exempel kommer en klient med en skärmbredd på 1200 pixlar levereras en bild med medium bredd och en klient med en skärmbredd på 800 pixlar levereras en bild med liten bredd.

Rätt bild returneras med hjälp av ett javascript vilket har inparametrar i form av klientens skärmbredd samt sökväg till aktuell bild. Skriptet exekveras i följande steg:

1. En variabel path definieras med sökvägen till katalogen där alla bilder finns lagrade. 2. En variabel wi definieras men är tills vidare tom.

3. Om bredden är större eller lika med 1024 pixlar får wi värdet _w_s. Är bredden större eller lika med 1366 pixlar får wi värdet _w_m. Annars får wi värdet _w_l. 4. Den slutgiltiga sökvägen konkateneras av path + bildens namn + wi + “.jpg”.

Kombinerad adaption

I den kombinerade adaptionsmetoden returneras bilderna på samma sätt som i de två ovanstående fallen, med den skillnaden att bilderna lagrade på servern är döpta enligt namnkonventionen bx_q_y_w_z samt att både nätverksadaption och breddadaption ge-nomförs och dess resultat konkateneras i den slutgiltiga sökvägen till bilden.

Tabell 6: Data för bilder vilka lagras på servern för respektive adaptionsmetod.

Antal bilder Total storlek Genomsnitts-storlek/bild Basfall (lätt) 4 st _{14,10 mb 3,52 mb} Kvalitetsadaption (lätt) 12 st _{17,60 mb 1,47 mb} Storleksadaption (lätt) 12 st _{13,40 mb 1,12 mb} Kombinerad adaption (lätt) 36 st _{16,80 mb 0,47 mb} Basfall (tung) 24 st _{105,00 mb 4,40 mb} Kvalitetsadaption (tung) 72 st _{138,00 mb 1,92 mb} Storleksadaption (tung) 72 st _{92,00 mb 1,30 mb}

Kombinerad adaption (tung) 216 st _{114,00 mb 0,50 mb}

4.4.2 Dynamiska bilder

För dynamiska bilder på serversidan används php-biblioteket gd version 2.1.0. Meto-den förutsätter att en bild med största bildstorlek och högsta kvalitet sparas på servern. Till skriptet krävs parametrarna bildnamn, bildbredd samt bildkvalitet (ett värde mellan 0-100). I de tester där enbart bredd mäts sätts kvaliteten till 100 och i de fall där enbart nätverket mäts behåller bilden samma bredd och höjd som originalbilden men får lägre kvalitet. php-skriptet exekveras i följande steg:

1. Content Type sätts till image/jpeg vilket möjliggör att skriptet kan anropas direkt i ett <img>-attribut.

2. En url till originalbilden genereras.

3. Förhållandet mellan bredd och höjd räknas ut och en ny höjd beräknas utefter den bildbredd som skickats in till metoden.

4. Metoden imagecreatetruecolor [35] anropas med bildbredd och den beräknade bildhöjden som i sin tur genererar en helsvart bild av önskad bildstorlek.

5. Originalbilden som den nya bilden skall genereras från läses in genom imagecreatefromjpeg [34].

6. Metoden imagecopyresampled [33] anropas för att skala om originalbilden till den nya storleken.

7. Metoden imagejpeg anropas för att generera den slutgiltiga bilden. Till metoden specificeras även kvaliteten.

5

Resultat

I detta avsnitt presenteras resultatet från de tester som utförs med följande mätpunkter: • Tidsåtgång för nätverkstest på de tre olika nätverkstyperna.

• Laddningstid för respektive hemsida. • Datamängd för respektive hemsida.

• Antalet http-anrop samt dess storlek för respektive hemsida.

5.1 Tidsåtgång för nätverkstest

Här presenteras den tidsåtgång som krävs för att utföra det nätverkstest som ligger som grund för den kvalitetsadaption som görs på bilderna i undersökningen.

Tabell 7: Tidsåtgång för nätverkstest använda i kvalitetsadaption.

Nätverkstyp Tidsåtgång

Snabbt nätverk ≈ 1200 millisekunder Medelsnabbt nätverk ≈ 2200 millisekunder Långsamt nätverk ≈ 3900 millisekunder

5.2 Basfall

Datamängden är densamma för alla enheter eftersom ingen adaptionsmetod tillämpas. Datamängden för en lätt hemsida är 14,12 megabyte och datamängden för en tung hemsida är 105,02 megabyte.

Antal http-anrop för den lätta hemsidan är 5 med storleken 2,27 kilobyte för varje anrop, medan den tunga hemsidan har 25 http-anrop med en storlek på 11,04 kilobyte för varje anrop. Varje bild använder därmed ett anrop vardera samt att ett anrop krävs för att nå hemsidan från första början.

Tabell 8: Tidsåtgång för nedladdning av originalbilder på olika nätverkstyper.

Enhet Typ Laddningstid

1. Snabbt nätverk Lätt 2,68 s

2. Medelsnabbt nätverk Lätt 34,34 s

3. Långsamt nätverk Lätt 119,99 s

4. Snabbt nätverk Tung 28,35 s

5. Medelsnabbt nätverk Tung 125,96 s

6. Långsamt nätverk Tung 886,57 s

5.3 Kvalitetsadaption

I denna mätning ändras enbart bildkvaliteten hos bilderna, medan storleken förblir den-samma som hos originalbilderna. Beslut kring vilken kvalitet som levereras fattas baserat på klientens nätverksprestanda. Både de fördefinierade bilderna och de dynamiska bilderna skalas enligt brytpunkterna 33 %, 66 % och 100 % (originalbilden).

Denna mätning kräver 7 respektive 27 http-anrop, alltså två fler än vad enbart original-bilderna kräver. De fördefinierade original-bildernas anrop är 2,37 kilobyte respektive 12,47 kilobyte. De dynamiska bildernas anrop är 3,68 kilobyte respektive 14,19 kilobyte.

Tabell 9: Tidsåtgång för nedladdning av kvalitetsskalade bilder på olika nätverkstyper.

Kvalitet fördefinierad Kvalitet dynamisk

Tidsåtgång i sekunder Datamängd i megabyte Tidsåtgång i sekunder Datamängd i megabyte Snabbt nätverk (lätt) 2,99 14,13 4,21 15,23

Snabbt nätverk (tung) 29,05 105,03 35,14 125,77

Medelsnabbt nätverk (lätt) 2,80 2,20 3,05 2,20

Medelsnabbt nätverk (tung) 23,78 20,05 25,92 21,20

Långsamt nätverk (lätt) 11,99 1,34 11,92 1,35

Långsamt nätverk (tung) 110,77 13,12 111,41 13,13

5.4 Storleksadaption

Bilder inkluderade i mätningen skalas baserat på klientens bredd. Gällande fördefinierade bilder skalas de enligt brytpunkterna 1024 pixlar, 1366 pixlar samt 2560 pixlar, medan de dynamiska bilderna skalas i exakt samma storlek som klientens webbläsarfönsters bredd.

Likaså kräver denna mätning 7 respektive 27 http-anrop. Fördefinierade bilders an-ropsstorlek är 2,31 kilobyte och 11,24 kilobyte. Dynamiska bilders anan-ropsstorlek är 2,42 kilobyte respektive 11,82 kilobyte.

Tabell 10: Tidsåtgång för nedladdning av storleksanpassade bilder på snabbt nätverk.

Bredd fördefinierad Bredd dynamisk

Tidsåtgång i sekunder Datamängd i megabyte Tidsåtgång i sekunder Datamängd i megabyte Stor skärm (lätt) 2,04 8,65 2,23 5,41 Stor skärm (tung) 15,64 59,96 14,07 36,78 Medelstor skärm (lätt) 0,25 3,02 2,00 2,70 Medelstor skärm (tung) 4,77 19,68 10,72 17,55 Liten skärm (lätt) 0,18 1,81 1,25 1,09 Liten skärm (tung) 3,10 11,51 8,19 6,74 5.5 Kombinerad adaption

Bilderna i mätningen skalas både baserat på klientens nätverksprestanda samt dess bredd, likt i ovanstående mätningar.

Slutligen kräver även den sista adaptionsmetoden 7 respektive 27 anrop. Storleken på http-anropen för fördefinierade bilder är 3,37 kilobyte respektive 12,41 kilobyte. För dy-namiska bilder är storleken 3,71 kilobyte och 14,36 kilobyte.

Tabell 11: Tidsåtgång för nedladdning av bilder anpassade enligt kombinerad adaption på olika nätverkstyper och skärmstorlekar.

Kvalitet och bredd fördefinierad

Kvalitet och bredd dynamisk Tidsåtgång i sekunder Datamängd i megabyte Tidsåtgång i sekunder Datamängd i megabyte Snabbt nätverk, stor

skärm (lätt)

2,10 8,66 2,51 5,42

Snabbt nätverk, medel-stor skärm (lätt)

0,33 3,03 1,87 2,70

Snabbt nätverk, liten skärm (lätt)

0,33 1,81 1,40 1,09

Snabbt nätverk, stor skärm (tung)

16,22 59,97 14,23 36,78

Snabbt nätverk, medel-stor skärm (tung)

4,78 19,69 11,41 17,55

Snabbt nätverk, liten skärm (tung) 3,21 11,51 8,43 6,75 Medelsnabbt nätverk, stor skärm (lätt) 1,41 1,29 2,42 0,81 Medelsnabbt nätverk, medelstor skärm (lätt) 0,60 0,48 1,91 0,44 Medelsnabbt nätverk, liten skärm (lätt) 0,56 0,31 1,58 0,20 Medelsnabbt nätverk, stor skärm (tung) 10,75 9,25 12,70 5,58 Medelsnabbt nätverk, medelstor skärm (tung) 3,47 3,09 10,41 0,44 Medelsnabbt nätverk, liten skärm (tung) 2,40 1,88 8,48 1,15

Långsamt nätverk, stor skärm (lätt)

7,21 0,83 5,44 0,53

Långsamt nätverk, me-delstor skärm (lätt)

2,98 0,31 3,43 0,29

Långsamt nätverk, liten skärm (lätt)

1,60 0,20 2,12 0,13

Långsamt nätverk, stor skärm (tung)

48,74 5,80 31,01 3,50

Långsamt nätverk, me-delstor skärm (tung)

26,23 3,09 14,92 1,74

Långsamt nätverk, liten skärm (tung)

9,75 1,17 9,02 0,72

6

Analys

Analysen baseras på resultat från mätningar gjorda på en lätt hemsida, med 4 bilder, och på en tung hemsida, med 24 bilder, där de tre adaptionsmetoderna kvalitetsadaption, storleksadaption samt kombinerad adaption realiseras.

Utan att tillämpa någon form av adaptionsmetod riskerar inladdningen av bilder på ett långsamt nätverk att ta lång tid. Laddning av den bildtunga hemsidan på den lång-sammaste uppkopplingen tar fjorton minuter, en siffra som är ohållbar. Även på det snabb-aste nätverket tar samma hemsida nästan en halv minut att hämta, vilket även detta är för långsamt enligt Nielsens riktlinjer [26]. Vidare förbrukar levererandet av bilderna i basfallet en stor mängd data och en nedladdning av 105 megabyte på ett mobilt nätverk kan snabbt begränsa användarens datamängd.

Nedan följer analyser av respektive adaptionsmetod, där laddningstid och datamängd för de olika enheterna jämförs gentemot tidsåtgång och datamängd för basfallet. Ett värde på 100 % representerar tidsåtgång respektive datamängd för basfallet. Ett värde lägre än 100 % innebär en snabbare laddningstid eller mindre datamängd, medan ett värde över 100 % betyder en ökning i tid eller data i jämförelse med basfallet.

Vidare analyseras den datamängd som respektive adaptionsmetod kräver i utrymme från servern. För dynamiska bilder krävs, som tidigare nämnts, att alla bilder lagras i dess originalstorlek. För den tunga hemsidan motsvarar detta 105 megabyte och för den lätta 14,1 megabyte.

6.1 Kvalitetsadaption

När en kvalitetsadaption tillämpas på de bilder som levereras från servern till klienten kan det i två av tre testfall utläsas att både fördefinierade bilder och dynamiska bilder ger ett betydligt bättre resultat än om bilderna levererats i sin originalkvalitet. För de enheter med snabbt nätverk, definierade i avsnitt 4, ger kvalitetsadaptionen större mängd data och högre leveranstid för både lätt och tung hemsida.

Fördefinierade bilder vid kvalitetsadaption kräver totalt 17,6 megabyte lagringsutrymme på servern för en lätt hemsida och 138 megabyte för en tung hemsida. Istället för 4 respek-tive 24 bilder krävs 12 bilder för en lätt hemsida och 72 bilder för en tung hemsida. Genomsnittsstorleken för en bild skalad baserat på kvalitet är cirka 1,92 megabyte.

Figur 4: Kvalitetsadaption för snabbt, medelsnabbt och långsamt nätverk.

På ett snabbt nätverk sker ingen besparing av varken tid eller data med någon av de två leveransmetoderna eftersom den bild som levereras är densamma som originalbilden. De beräkningar som genomförs resulterar i extra tid gentemot originalbilden, framförallt gällande dynamisk bildleverans då en helt ny bild renderas. En kvalitetsadaption på ett snabbt nätverk är därmed inte nödvändigt att applicera.

På ett medelsnabbt nätverk sker den största vinsten i form av tid, där leveranstiden är som lägst med fördefinierade bilder på en lätt hemsida. Även på en tung hemsida är fördefinierade bilder något snabbare än dynamiska bilder. Vidare producerar fördefiniera-de bilfördefiniera-der också mindre data på en tung hemsida. På en lätt hemsida producerar fördefiniera-de två leveransmetoderna lika mycket data.

För en enhet med ett långsamt nätverk ser vinsterna relativt lika ut för de båda le-veransmetoderna. Båda har en stor tidsbesparing gentemot basfallet, men fördefinierade bilder är något snabbare. Den leveransmetod som förbrukar minst data är fördefinierade bilder, men skillnaden är nästan obetydlig.

6.2 Storleksadaption

När en storleksadaption tillämpas kan det utläsas att både fördefinierade bilder och dy-namiska bilder ger betydligt bättre resultat än om bilderna levereras i sin originalstorlek. I dessa testfall har enbart klientens webbläsares skärmstorlek påverkat leveransen av bild. Därav är mätningarna enbart exekverade på enheter med snabba nätverk, men med varie-rande skärmstorlekar. Detta medför att en stor skillnad i tid kan utläsas gentemot basfallet, medan datamängden inte har lika dramatiska minskningar.

Fördefinierade bilder vid storleksadaption kräver totalt 13,4 megabyte lagringsutrymme på servern för en lätt hemsida och 92 megabyte för en tung hemsida. Istället för 4 respektive 24 bilder krävs 12 bilder för en lätt hemsida och 72 bilder för en tung hemsida. Genom-snittsstorleken för en bild skalad baserat på bredd är cirka 1,3 megabyte.

Figur 5: Storleksadaption för stor, medelstor och liten skärm.

På en enhet med stor skärm och snabbt nätverk är dynamiska bilder alltid bättre än fördefinierade bilder, förutom när det gäller tidsvinning för hemsidor med få bilder. Båda leveransmetoderna är dock bättre än att enbart leverera originalbilderna.

Ur en tidsaspekt för en enhet med medelstor skärm och snabbt nätverk är fördefi-nierade bilder alltid bättre än dynamiska bilder. Skillnaden i datamängd mellan de två leveransmetoderna är inte stor, men lägst är den hos dynamiska bilder.

Även på enheter med en liten skärm är tidsvinsten som störst hos fördefinierade bilder och datavinsten som störst hos dynamiska bilder.

6.3 Kombinerad adaption

I de fall där båda adaptionsmetoderna kombineras går det att utläsa stora vinster i både levererad datamängd och leveranstid för alla enheter med medelstor eller liten skärm och för alla enheter med medelsnabbt eller långsamt nätverk. Vinsten är även som störst för tunga hemsidor med stor datamängd. Detta påvisar att när en kombinerad adaptionsmetod implementeras kan vinster i total leveranstid utläsas till en tiondel av sändningstid för basfallet.

Vid kombinerad adaption kräver fördefinierade bilder 16,8 megabyte lagringsutrymme på servern för en lätt hemsida och 114 megabyte för en tung hemsida. Istället för 4 respek-tive 24 bilder krävs 36 bilder för en lätt hemsida och 216 bilder för en tung hemsida, där genomsnittsstorleken för en bild skalad baserat på kvalitet och bredd enbart är cirka 0,5 megabyte.

Figur 6: Kombinerad adaption för enheter med snabbt nätverk och stor, medelstor och liten skärm.

På en enhet med snabbt nätverk och stor skärm ser tidsvinsten olika ut beroende på om det gäller en lätt eller tung hemsida. För en lätt sida är fördefinierade bilder snabbast medan dynamiska bilder är snabbast på en tung hemsida. Gällande datamängd producerar dynamiska bilder i båda fallen mindre data.

På en enhet med snabbt nätverk och en medelstor skärm sker den allra största tids-vinsten med fördefinierade bilder på en lätt hemsida. Även på den tunga hemsidan är fördefinierade bilder betydligt snabbare än dynamiska bilder. Med avseende på datamängd kräver dynamiska bilder mindre data än fördefinierade bilder.

På enheter med en liten skärm och ett snabbt nätverk ger fördefinierade bilder betydligt mer tidsvinst än dynamiska bilder. Skillnaden i datamängd är liten, men dynamiska bilder kräver mindre data än fördefinierade bilder.

Figur 7: Kombinerad adaption för enheter med medelsnabbt nätverk och stor, medelstor och liten skärm.

För en enhet med stor skärm men medelsnabbt nätverk är fördefinierade bilder snabbare än dynamiska bilder både vid en lätt och tung hemsida, medan dynamiska bilder producerar en betydligt lägre datamängd i båda fallen.

Även på en enhet med ett medelsnabbt nätverk och en medelstor skärm är fördefinierade bilder snabbare än dynamiska bilder. Skillnaden i datamängd är inte stor, men dynamiska bilder kräver mindre data än fördefinierade bilder.

På en enhet med ett medelsnabbt nätverk och en liten skärm görs stora tidsvinster med fördefinierade bilder. Dynamiska bilder ger inte lika stor tidsvinst, men ger däremot en stor vinst med avseende på datamängd, framför allt när hemsidan innehåller många bilder.

Figur 8: Kombinerad adaption för enheter med långsamt nätverk och stor, medelstor och liten skärm.

På en enhet med ett långsamt nätverk och en stor skärm är dynamiska bilder bättre än fördefinierade bilder i fråga av tidsåtgång men främst gällande datamängd. Fördefinierade bilder och dynamiska bilder ger på en enhet med ett långsamt nätverk och en medelstor skärm en stor besparing i både data och tid. För en lätt hemsida är fördefinierade bilder snabbast medan dynamiska bilder är snabbast på en tung hemsida. Gällande datamängd är dynamiska bilder även här bättre än fördefinierade bilder, där den största vinsten erhålls

på en bildtung hemsida.

En enhet med ett långsamt nätverk och liten skärm ger stora vinster i form av tids- och databesparing både för fördefinierade bilder och dynamiska bilder. Den största tidsvinsten sker för fördefinierade bilder medan den största datavinsten sker för dynamiska bilder.

7

Diskussion

För en webbutvecklare är det viktigt att förstå användarens kontext, då konsumtion av information på internet inte längre enbart sker vid en stationär dator. Att surfa på mobilen kan ske under varierande förhållanden – från tåg där täckningen av det mobila nätverket kan variera stort, till hemma i soffan där information kan konsumeras via ett snabbt och stabilt fibernätverk. Oavsett var detta sker är det viktigt att implementera någon form av adaptionsmetod, eftersom leverans av originalbilder kan ta för lång tid för att användaren skall kunna bibehålla sitt intresse.

Vidare kan förbrukad datamängd minska, främst i fallet då bilder levereras på ett långsamt eller medelsnabbt nätverk, där bilderna utgör mellan 1 % till 11 % av basfallets datamängd. Dagens dataförbrukning för mobila enheter på 1,4 exabyte minskas därmed till värden mellan 14,3 petabyte och 157,7 petabyte. Om Cisco förutspått rätt innebär det att den mobila dataförbrukningen 2018 på 15,4 exabyte kan sänkas till datamängder mellan 157,7 petabyte och 1,7 exabyte, en minskning i datamängd mellan 89 % till 99 %. Detta innebär att total datamängd som sänds i framtiden kan reduceras vilket leder till mindre belastning på nätverk och ger utrymme för fler jämlöpande hämtningar.

Reducerad datamängd för mobila användare betyder även att användaren kan kon-sumera mer information på sitt abonnemang utan att överskrida sin nätverksoperatörs definierade maxgräns, om en sådan finns. Med minskad datamängd kan en tidsvinst ut-läsas för att ladda in en hemsida vilket leder till att användaren kan ta del av önskad information snabbare.

7.1 Att välja rätt adaptionsmetod

Enligt de resultat som framkom i testerna kan vinster i tid utläsas hos alla tre adaptions-metoder gentemot hemsidor vilka levereras i sitt originaltillstånd, bortsett från kvalitets-adaption på en enhet med snabbt nätverk, vilken ger marginellt större tidsåtgång gente-mot basfallet. Vinsterna i sparad datamängd hos de två metoderna kvalitetsadaption och storleksadaption är inte lika stora som hos kombinerad adaption. Skall maximal tid och datamängd sparas är istället en kombinerad adaptionsmetod att föredra, varav denna ad-aptionsmetod får anses vara den bästa och är därför den som kommer att diskuteras vidare. I testfall för kombinerad adaptionsmetod på en enhet med snabbt nätverk är tidsbe-sparingen för en hemsida med få bilder inte stor, varken för enheter med stor, medelstor eller liten skärm. Dynamiska bilder ger långsammare resultat, vilket beror på att bilderna levereras snabbare än servern hinner rendera dem. På samma klient, men med fler bilder, är tidsvinsten större eftersom bildrenderingen hinner genomföras medan bilderna levere-ras. Både dynamiska bilder och fördefinierade bilder ger en mindre datamängd än basfallet, men att implementera en adaptionsmetod på ett snabbt nätverk är inte nödvändigt då tids-vinsten inte är utmärkande och i det fall enheten har tillräckligt underlag för att erhålla en maximal hemsida bör den också levereras det.

Däremot ökar vinsten i tidsåtgång och levererad datamängd i samband med att enhe-ternas skärmstorlekar blir mindre eller deras nätverk försämras. För klienter med sämre förutsättningar innebär alltid kombinerad adaptionsmetod en förbättring både gällande dy-namiska och fördefinierade bilder, varför en sådan adaption bör implementeras. Huruvida

en kombinerad adaptionsmetod skall verkställas med fördefinierade bilder eller dynamiska bilder beror dels på vilka prioriteringar som finns, då båda leveransmetoderna har för- och nackdelar, samt hur många bilder som skall levereras. På en hemsida med många bilder och en enhet med långsamt nätverk presterar dynamiska bilder alltid bättre än fördefinierade bilder, både tids- och datamängdsmässigt, eftersom bildrenderingen hinner ske under tiden bilderna laddas. På hemsidor med få bilder finns också en stor vinst med dynamiska bilder, men fördefinierade bilder är snabbast. Samma resultat syns också på medelsnabba nätverk, där båda leveransmetoderna ger stora vinster men fördefinierade bilder är någon sekund snabbare. Dynamiska bilder levererar dock alltid en mindre datamängd än fördefinierade bilder.

Innehåller hemsidan många bilder är dynamiska bilder i särklass den bästa leverans-metoden. Innehåller hemsidan färre bilder spelar det ingen större roll vilken metod som används. Är tidsaspekten viktig är fördefinierade bilder att föredra. Denna metod kräver dock mer lagringsutrymme på servern eftersom alla bilder sparas i olika versioner, men också tid i form av att skapa alla versionerna. Det är också viktigt att namnge bilderna enligt samma namnkonventioner så att webbtjänsten lätt kan hitta rätt bild. Är istället den levererade datamängden till klienten av stor vikt är dynamiska bilder den bästa metoden eftersom testerna påvisar en betydligt mindre datamängd gentemot fördefinierade bilder. Denna adaptionsmetod kräver dock större arbetskraft från servern.

Vidare har testerna enbart inkluderat en anslutande klient och inga undersökningar har genomförts med flera klienter anslutna samtidigt, vilket kan komma att påverka leve-ranstiden negativt.

7.2 Användaraspekt

En adaptionsmetod är ej ämnad att tillämpas på de bilder som utgör en hemsidas stilmall då en adaption av dessa kan leda till att hemsidans utseende förändras. Detta för att användaren inte ska få samma hemsida levererad i olika versioner då detta kan verka förvirrande och påverka användarvänligheten negativt. Om stilmallens bilder ska anpassas bör detta enbart göras på dess kvalitet och ej på dess bildstorlek. Att ändra kvalitet på bilder är inte lika kritiskt, eftersom det enligt Pappas et al., är svårt för användaren att se en försämring i bildkvalitet utan att jämföra med originalbilden.

Användaren bör även ges möjlighet att påverka vilken hemsida som denne vill ha le-vererad till en viss enhet. Om användaren surfar på ett mobilt nätverk med begränsad datamängd bör användaren själv kunna välja vilken hemsida denne skall levereras. Samma gäller även för en användare på en stationär dator med långsamt nätverk som bör ges möjligheten att konsumera hemsidan i dess originaltillstånd.

Det spelar ingen roll hur funktionell eller grafiskt tilltalande en hemsida är om använ-daren inte kan ta del av den. För att värna om en hemsidas besökare bör Nielsens riktlinjer, angående den maximala tidsgång en användare har möjlighet att behålla intresset och fo-kus för en hemsida medan den laddar, tas i beaktning. En adaptionsmetod bör följaktligen tillämpas för att garantera att användaren aldrig behöver vänta längre än tio sekunder på att en hemsida skall laddas klart.

8

Slutsatser och vidare forskning

Vi rekommenderar att en kombinerad adaptionsmetod inkluderande fördefinierade bilder bör implementeras för enheter med medelsnabbt eller långsamt nätverk för förbättrad användarupplevelse. Vidare bör bilder alltid sparas i rätt format enligt ändamål, se avsnitt 2.1.1.

Enligt våra studier är dynamisk adaption mer fördelaktig och hade förespråkats om det inte vore så att det saknas kännedom kring skalbarheten för dynamisk bildadaption. Om skalbarheten hade varit känd och gett samma resultat även i fall med många jämlöpande anslutningar hade detta varit att rekommendera.

Vidare forskning bör inkludera:

• En perspektivanalys över vilken minimumkvalitet genererad från gd-biblioteket som, för användaren, påverkar användarupplevelsen negativt. Detta bör ge svar på hur aggressivt kvaliteten i en bild kan angripas utan att försämra användarens upplevelse. • En uppskalning av hur resultatet i testerna blir med ökat antal jämlöpande klienter för att hitta riktlinjer för hur mycket prestanda som krävs av servern vid användning av phps gd-bibliotek för dynamisk bildskalning.

• Om en adaptionsmetod bör utökas till att anpassa kvalitet på grafik definierat i css som påverkar sidans stilmall.

• Implementation av adaptionsmetoden på en hemsida där användaren har möjlighet att själv påverka till vilken grad adaptionen skall anpassa hemsidans material. Skall detta göras ur tekniska förutsättningar och begränsningar eller enligt användarens preferenser?

Referenser

[1] M. Björklund, U. Paulsson, Seminarieboken, Lund: Studentlitteratur, 2012. [2] S. Blackstock, ”LZW and GIF explained”, University of Delaware [Online].

Tillgänglig: http://www.eecis.udel.edu/˜amer/CISC651/lzw.and.gif.explained.html. [Hämtad 2014-02-19].

[3] Bredbandskollen, ”Statistik | Bredbandskollen” [Online].

Tillgänglig: http://www.bredbandskollen.se/statistik/?section=1&month=032014. [Hämtad 2013-03-08].

[4] Y. Byun, S. Narayanan, S. Mott, J. Schwenkler, K. Biba, R. Osborn, M. Morris, ”Wireless Broadband Measurement in California”, Information Technology: New Ge-nerations, s. 505-509, 2013.

[5] Charles Proxy, ”Charles Web Debugging Proxy” [Online].

Tillgänglig: http://www.charlesproxy.com/. [Hämtad 2014-02-20].

[6] Cisco, ”Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2013–2018”, 2014-02-05. [Online].

Tillgänglig: http://www.cisco.com/c/en/us/solutions/collateral/service-provider/ visual-networking-index-vni/white_paper_c11-520862.html. [Hämtad 2014-02-18]. [7] Dottoro, ”SystemYDPI property” [Online].

Tillgänglig: http://help.dottoro.com/ljgxblhf.php. [Hämtad 2014-03-30].

[8] S. Egger, P. Reichl, T. Hosfeld, R. Schatz, "“Time is bandwidth”? Narrowing the gap between subjective time perception and Quality of Experience", Communications (ICC), 2012 IEEE International Conference, s. 1325-1330, 2012.

[9] T. Everts, ”The average web page has almost doubled in size since 2010”, Web Per-formance Today, 2013-05-06. [Online].

Tillgänglig: http://www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/. [Hämtad 2014-02-18].

[10] J. D. Foley, A. van Dam, ”JPEG Compression” i Fundamentals of Interactive Com-puter Graphics, Addison-Wesley, 1982.

[11] J. D. Foley, A. van Dam, Lempel-Ziv-Welch (LZW) Compression"i Fundamentals of Interactive Computer Graphics. Addison-Wesley, 1982.

[12] D. Hsieh, Y. Tamura, ”Quarterly Worldwide FPD Shipment and Forecast Report” Display Search, [Online].

Tillgänglig: http://www.displaysearch.com/cps/rde/xchg/displaysearch/hs.xsl/ quarterly_worldwide_fpd_forecast_report.asp. [Hämtad 2014-03-14].

[13] HTTP Archive, [Online].

Tillgänglig: http://httparchive.org/index.php. [Hämtad 2014-02-18]. 34

[14] HTTP Archive, ”HTTP Archive - Interesting Stats” HTTP Archive, [Online]. Tillgänglig: http://httparchive.org/interesting.php?a=All&l=Feb%201%202014. [Hämtad 2014-02-19].

[15] ”Iperf TCP and UDP bandwidth performance measurement tool” [Online]. Tillgäng-lig: https://code.google.com/p/iperf/. [Hämtad 2014-03-17].

[16] A. Jensen, ”Allt du någonsin har velat veta om DPI och PPI”, Moderskeppet, 2013-03-20. [Online].

Tillgänglig: http://www.moderskeppet.se/live/allt-du-nagonsin-har-velat-veta-om-dpi-och-ppi/ . [Hämtad 2014-03-30].

[17] R. Khare, I. Jacobs, ”W3C Recommendations Reduce ’World Wide Wait’ ”, World Wide Web Consortium, 1999-07-08. [Online].

Tillgänglig: http://www.w3.org/Protocols/NL-PerfNote.html. [Hämtad 2014-02-18]. [18] J.-S. Kim, M.-S. Cho ,B.-K. Koo, ”Experimental Approach for Human Perception Based Image Quality Assessment” i Proceedings of the 5th International Conference on Entertainment Computing, Berlin, 2006.

[19] Libpng, ”Intro to PNG features”, 2009-03-14. [Online].

Tillgänglig: http://www.libpng.org/pub/png/pngintro.html. [Hämtad 2014-02-18]. [20] C. Lilley, ”Portable Network Graphics”, World Wide Web Consortium, 2006-03-17.

[Online].

Tillgänglig: http://www.w3.org/Graphics/PNG/. [Hämtad 2014-02-18].

[21] Microsoft, ”Making the Web Bigger: DPI Scaling and Internet Explorer 8”, [Online]. Tillgänglig: http://msdn.microsoft.com/en-us/library/cc849094(v=vs.85).aspx. [Hämtad 2014-03-07].

[22] MSDN, ”Where does 96 DPI come from in Windows?”, 2005-11-08. [Online]. Tillgäng-lig: http://blogs.msdn.com/b/fontblog/archive/2005/11/08/490490.aspx. [Hämtad 2014-03-30].

[23] Nationalencyklopedin, ”Punkt” [Online].

Tillgänglig: http://www.ne.se.proxy.mah.se/lang/punkt/288701. [Hämtad 2014-03-29].

[24] Nationalencyklopedin, ”Typografiska mått” [Online].

Tillgänglig: http://www.ne.se.proxy.mah.se/lang/typografiska-m%C3%A5tt. [Hämtad 2014-03-29].

[25] NetOnNet, ”27-tums Full HD-skärm med 3 års garanti!” [Online].

Tillgänglig: http://www.netonnet.se/art/dator/bildskarm/monitor-27-tum-och-storre. [Hämtad 2014-03-14].

[26] J. Nielsen, ”Usability Heuristics,” i Usability Engineering, Academic Press Inc, 1993.