Optimized Image:
Original Image:
This was an interesting exercise because I’ve never spent much time thinking about load time when it comes to exporting web graphics. Basically, I’d just ‘save as’ a JPEG set to “high” and go with whatever the outcome of it was. Here, I found that achieving a decent file size to load time ratio was much more of a finely-tuned process, and not necessarily as easy as it seemed.
The original image was a whopping 3.09M…not exactly an optimal size for a web page. I used Photoshop (Export -> Save for Web) to lay out four options of varying quality in order to compare the difference between the size and load times of each optimized image. Because this image wasn’t employing a wide range of colors, I decided to save it as a JPEG rather than a PNG. Also, because of the limited color palette, I felt as if I would be able to air on the side of a lower quality optimization without suffering any major visual loss.
The only discernable quality loss is in the lower right-hand corner, around the bright orange-hued light. The edges of the light don’t appear to be as crisp as in the original. However, if the original was not present to compare the optimization against, I feel the viewer may not be quick to judge this imperfection.
The chosen optimization clocked in at 172.9k and 32 seconds at 56.6kbps. When I loaded both the original and the exported version to this blog, I didn’t see a huge difference in load time. This may just be due to the internet speed in the area I am, but I’d be interested in hearing if anyone else notices a difference. I’m pleased with the result, but I attribute much of that to the image itself, as it was already quite crisp. I imagine that this exercise on an image with a softer focus would be much more difficult to complete.