In this study, we aimed to determine whether the average user notices the efforts that web designers put into optimizing the images and accompanying code on a website. While numerous studies focus on the technical aspects of this subject, we found little material on whether visitors and laypeople perceive the work invested – if they notice itat all.

We built upon the limited prior research we could find. We designed a fictional website and consulted professional web developers, photographers, and art directors on how they would modify the image formats, sizes, resolutions, and page loading methods. Based on their suggestions, we created a second, more optimized version of the website.

In our study, users were asked to visit both versions of the website and report the type of device they used, as well as whether they noticed any differences between the two sites. Respondents completed a survey in which they indicated whether they perceived differences in image quality and whether the page elements loaded faster. Opinions on loading times among respondents varied. Half of the respondents noticed no difference, but slightly more – seven compared to five – felt that the original site loaded faster. This discrepancy may be due to the use of lazy loading during optimization, where only visible elements are loaded, potentially causing intermittent loading. Some respondents appreciated the lazy loading and felt that the optimized code made the site seem more professional, as noted in their comments. However, respondents were more unanimous regarding the WebP images on the optimized website, with 14 out of 24 preferring them. Six respondents noticed no difference, while four believed that the original JPEG images looked better.

Our conclusion is that a web designer can significantly enhance the user experience by selecting appropriate image formats, dimensions, and formats compatible with various screen sizes. Well-written code that complements the images, speeds up loading times, and ensures that pages look good on all screen sizes also had a noticeable impact on user experience. Overall, the improvements and optimizations we implemented were well received by the respondents.

I denna undersökning ville vi ta reda på om den vardagliga användaren märker av det som webbdesigners lägger ner på att optimera bildmaterialet och tillhörande kod på en webbplats. Det finns många undersökningar vad gäller de tekniska aspekterna i ämnet men vi kunde inte hitta mycket material om hur besökare och lekmän märker av det jobb som lagts ner - om de ens märker av det.

Vi använde den lilla tidigare forskning vi kunde hitta och byggde vidare på den. Vi designade en fiktiv webbplats och frågade professionella webbutvecklare, fotografer och art directors hur de skulle ändrat bildernas format, storlek och upplösning samt hur sidorna laddas. Vi tog deras förslag och gjorde därefter en andra, mer optimerad, variant av webbplatsen. I en undersökning fick användare besöka bägge varianterna och berätta om vilken typ av enhet de använt samt om de märkte av någon skillnad mellan de två webbplatserna. I en enkät fick respondenterna svara på om de upplevde skillander på bildkvaliteten och ifall sidans objekt laddades snabbare? Respondenternas åsikter om laddningstiderna skilde sig åt. De hälften märkte ingen skillnad men något fler, sju mot fem, tyckte originalsidan laddades snabbare. Det kan i sin tur bero på att vi använde så kallad lazy loading vid optimeringen så endast det somska synas laddas in. Det kan göra att sidorna laddas lite ryckigt. I kommentarerna uppgav vissa att de uppskattade lazy loading och att optimeringen i kod fick sidan attkännas mer professionell. Respondenterna var däremot mer eniga om att WebP-bilderna på den optimerade webbplatsen var bättre. 14 av de 24 respondenterna tyckte den var bäst. Sex stycken märkte ingen skillnad och fyra tyckte att originalets JPEG-bilder såg bättre ut.

Vår slutsats blev att en webbdesigner märkbart kan förbättra användarupplevelsen genom att välja passande bildformat, mått på bilderna samt att använda bildformat som fungerar på olika skärmstorlekar. Välskriven kod som kompletterar bildmaterialet och snabbar på laddning samt gör sidorna flexibla nog att se bra ut på alla skärmstorlekar visade sig också påverka upplevelsen bland användarna märkbart. De förslag på förbättringar och optimeringar vi fick slog överlag väl ut bland respondenterna.