Abstract:

Often websites are facing difficulties at providing the right images for the user, one the one hand those images are often not compressed which is a waste of bandwidth and performance. On the other hand since there are many different devices on the market the image needs to be available in different resolutions to be fitting on each of them. On mobile devices a lower resolution increases the performance drastically while on the desktop if the resolution is too low it does not look professional at all. pichasso also handles all of these problems and provides the image with the ideal compression for every use case while also using modern image formats like WebP. pichasso automatically detects alpha channels and chooses the format on behalf of the given client side supported fortmats. Depending on the given size pichasso automatically adjust the picture and returns the perfect compressed image.

One important reason for slow page speed is that over 40% of the tested pages do not use any kind of image optimization. Delivering huge image files over the internet increases the loading time significantly. Only 10% use good compression techniques, which allow the reduction of the size without degrading the quality of the image to an unacceptable level.

The patience of mobile users is limited. Studies from Gomez.com and Akamai.com say that in e-commerce one second longer of loading time leads to a decrease in sales of up to 7%. The majority is willing to wait 6 to 10 seconds for a website to load, after that they would close it. Only 16% of the participants of the study are expecting results in less than 5 seconds. This is based on the expectation that mobile load times are as fast as on the desktop or a little bit slower, which more than 40% of the participants were expecting.

For our platform openWHO we implemented some optimizations to improve the loading times worldwide to increase the first user experience. The optimizations are separated into two different steps: Images optimization and the use of a content delivery network (CDN).

We tested the use of media queries with correctly cropped images and stronger image compression. The simple result for the openWHO landing page returned that all images could be compressed with loosing a minimum of quality to ¾ of origin size to 255 KB over all images on the landing page. The resulting image data amount was finally reduced from 49% to only 20% of all asset data.

This paper will introduce an open source micro service for image optimisation and thumbnail creation and evaluate its usage on the learning platform openWHO.org. Furthermore the usage of a Content delivery network was evaluated.

Results from this tests can be used as a motivation and blueprint for all web based learning tools that are using image based content and are aiming at a globally distributed audience.

Keywords:

Image optimization, WebP, CDN.