CNIT 132A – Advanced HTML & CSS

Working with Images

Original image file

Color photo of Chinatown landscape in San Francisco in the 1970s
Chinatown, San Francisco, California, 1970s. Photo: Internet Archive
File size 377 kilobytes, Dimensions 1080x810 pixels, Download time 0.87 ms

Optimized image file

Same image of landscape optimized for faster load times
File size 59 kilobytes, Dimensions 720x540 pixels, Download time 93 µs

Image Compression Results

Using a high-resoution photo from the public domain, I included the same image twice on the same page. In the first instance the image is used in its original unedited format (377 kb). The second image has been compressed into a smaller file size (59 kb). I used iLoveIMG because it allowed me to both resize and compress the image file at the same time.

Using developer tools from the Google Chrome browser, I was able to inspect the download speed for each file. The original file has a download speed of 0.87 milliseconds. The optimized image has a download speed of 93 microseconds without any noticeable difference when rendered on the page.

This study illustrates the benefit of optimizing images. The result will be faster loading times without loss of image quality.