Summary. Images are a necessary part of the user experience as they assist in identifying actionable buttons, clarifying concepts, shaping behavior, and providing a pleasant experience. They can also negatively impact the user experience when they are too large. This article is a review of two free image compression websites which combat this very issue.
Images are an important part of any design. They can assist users in locating important functions, and helping shape behaviors that assist users to complete their goals. However, depending on their size they can take imped the user experience. Systems that use large images can have long loading times or take an abundant amount of memory from smart devices. Image compressors provide a solution to this problem; however, not all compressors are created equal. This review discusses the usability of two websites; tinypng.com and compressor.oi.
Tinypng is a free website which allows users to compress up to 20 images at a time with a limit of 5 MB per image in either jpg or png formats.
To compress, users simply click the box within the middle of the screen, add the desired images, and view the progress via a bar for each image. Figure 1 shows that once compressed, users can see the images size before and after compression to get an understanding of how the image has changed. User can then click the download link to get the newly compressed images and see the percent size reduction.
Figure 1. Tinypng.com after image compression.
Figure 2 shows compressor which is another free website which allows for image compression in four formats (jpg, png, gif, and svg). Unlike tinypng, only one image can be compressed at a time, but does not have any documented size limits.
Figure 2. Compressor.oi home page.
Users click the box within the middle of the page, select the desired image and watch it be compressed. Figure 3 shows the final results after compression. Users can see the initial size on the left side of a long bar and as the image is compressed a bar moves towards the left and displays a number representing the size of the compressed image. Once compressed, users have the flexibility to choose the destination of the image (download, save to google drive, add to Dropbox, and/or compress another image).
Figure 3. Users can see the before/after, total compression, and decide what to do with the image.
To adequately evaluate the websites, a series of four images were used. Table 1 shows with each image, its dimensions, and size. Please note that the information is BEFORE compression.
Table 1. Image, dimensions, and size BEFORE compression.
Each image was compressed with both websites. Table 2 shows image, dimensions, size before, and size after compression for both websites.
Table 2. Image, dimensions, size before, size after tinypng, and size after compressor.
The data shows that both tinypng and compressor are great tools to reduce image size without losing quality. Both significantly reduced the size of the images, with an average image reduction of 72% and 83% respectively in this experiment.
As with any website, there are differences which separate them from the competition. Table 3 compares both websites on six features. These features were either directly tested or discovered in researching on the website itself. There are some additions coming to later versions of compressor for adding a bulk upload feature comparable to tinypng and increasing the maximum file size.
Table 3. Features for both tinypng and compressor.
Usability Issues – tinypng.com
While both websites performed well and the initial interface for uploading images was intuitive, there were a few areas for improvement. The main screen which contains the image and moving bar showing the compression was initially confusing.
Figure 4. The before, after, and download font colors should be different to increase saliency.
Usability Issues – Compressor.oi
Figure 5 shows how some text indicating what is happening could inform users that the moving bar indicates the amount of compression.
Also the options provided after compression were initially missed. Possibly making these individual buttons with the current icons could make them “pop” more on the page.
Figure 5. The moving bar could be seen as initially confusing. The option boxes below should be easier to see.
Images are an important part of the user experience when used correctly. Image size is an important factor when attempting to create a specific effect. When images are too large, they can increase loading times and/or take up memory. Both tinypng and compressor are good websites, each with their own strengths and weaknesses which should be considered based on the design goal and user needs. When considering these two websites, consider the number of images that can be compressed, size of the desired images, and amount of compression. By considering these features the best possible user experience can be created.