Umeå University's logo

In today's digital world, the appearance of visual content is essential in shaping online experiences and influencing the user experience. Images improve user experience because they convey messages and feelings much quicker than pure text. Incorrect usage may adversely affect the website and result in fewer completed purchases for a business. The performance of the website is pivotal for its success. Image optimisation is, therefore, a crucial aspect of web development aimed at enhancing performance. 

This paper highlights the significance of website performance in achieving higher Google rankings while also addressing the environmental impact of using images on the web. Discussing the benefits of using an image format designed for use on the web while still maintaining pleasing image quality. Together with Page Speed Insight, the different subpages were tested against each other to evaluate different image optimisation strategies. Then, the loading strategies were reviewed to determine how much they benefit the overall performance of the website. 

A/B testing revealed valuable results, comparing different optimisation methods. The results describe and evaluate different methods for handling images on the web; srcset, lazy-loading, and eager-loading. Distinct variants of handling images were tested using server-side and client-side rendering. How much bandwidth could be saved by providing multiple images in different sizes to lower bandwidth consumption?

The consequences of the optimisation resulted in greatly improved performance results obtained with Page Speed Insight, and greatly lowering the energy consumption for each time someone visits the page. By utilising these insights into a business's website, it can enhance its user experience, effectively boosting its online visibility and achieving higher web rankings. The best version gave an increase of about 72% in performance score and a 98% decrease in carbon emissions. 

I dagens digitala värld är utseendet på grafiskt innehåll avgörande för att forma onlineupplevelser och påverka användarupplevelsen. Bilder förbättrar användarupplevelsen eftersom de förmedlar budskap och känslor mycket snabbare än ren text. Felaktig användning av bilder kan påverka webbplatsen negativt och resultera i färre genomförda köp för ett företag. Webbplatsens prestanda är avgörande för dess framgång. Bildoptimering är därför en avgörande aspekt av webbutveckling som syftar till att förbättra prestandan.

Detta examensarbete påvisar vikten av webbplatsprestanda för att uppnå högre Google-rankningar samtidigt som den tar upp vad bilderna har för  miljöpåverkan på webben. Diskussioner kring fördelarna med att använda ett bildformat som är designat för användning på webben med bibehållen kvalitet som fortfarande är tilltalande för använderen. Tillsammans med Page Speed Insight testas de olika undersidorna mot varandra för att utvärdera olika bildoptimeringsstrategier. Sedan granskas laddningsstrategierna för att avgöra hur mycket de gynnar webbplatsens övergripande prestanda.

A/B-testningen visar värdefulla resultat, som jämför olika optimeringsmetoder. Resultatet beskriver och utvärderar olika metoder för att hantera bilder på webben; srcset, lazy-loading och eager-loading. Distinkta varianter av hantering av bilder testades med rendering på serversidan och klientsidan. Hur mycket bandbredd kan sparas genom att tillhandahålla flera bilder i olika storlekar för att minska bandbreddsförbrukningen?

Konsekvenserna av optimeringen resulterade i kraftigt förbättrade prestandaresultat som erhållits med Page Speed Insight, och kraftigt sänkt energiförbrukning för varje gång någon besöker sidan. Genom den data som presenterad av Page Speed Insight kan ett företag förbättra både användarvänligheten men också effektivt öka sin synlighet online genom att öppnå högre ranking på Google. Den bästa versionen gav en ökning med cirka 72% i prestandapoäng och en minskning av koldioxidutsläppen med 98%.