Image Optimization
One of the aspects that not many people know about web design is just how important concepts like image optimization are.
Image optimization is the act of cutting down the file sizes of images through compression, cropping, or any other means of shrinking a file.
For web design, it is essential to optimize any image that goes on your site, as massive images that are even a few megabites in size could start slowing down your site loading times, and affect the responsiveness of aspects of the page.
The following is an example below, first on the left is a unoptimized image, and the right an optimized image.
Unoptimized Image
Optimized Image
While both images look almost exactly the same, the optimized image on the right is 1/3 of the file size of the original, being 316 kilobytes vs the original 983 kilobytes.
The devil however is in the details, as when one looks closer, you are able to tell where some of the quality was lost, how some aspects look slightly blurrier or more pixelated than others.
Even though of the lack of quality, the benefits far out way the minute differences, allowing for pages to be more responsive, especially when adjusting for resizes or refreshes on the page, while also loading much quicker.
For me, I know that optimized images are far superior in almost every way, as I don’t want any potential customer to turn away from my site just because a product image or hero didn’t load.
Just look at sites like Samsung, when we right click and save one of these product images, we see that the size is just 5 kilobytes, being small enough to load in almost any circumstance.
Though it may seem easier to leave unoptimized images up on your own site, when doing web design or site maintenance for bigger companies, the first aspect we want to look at is how to improve performance, and optimizing images to take away loading times for viewers.
From there we are really able to make a site that is both elegant, and usable.
Imperva Staff. (2019, December 30). What is image optimization: Image compression and loading: CDN guide: Imperva. Learning Center. https://www.imperva.com/learn/performance/image-optimization/