Lesson 10 - Sustainable Web Design In 20 Lessons
The entire 10th chapter of the book Sustainable Web Design In 20 Lessons.
Image optimization
Over the past ten years, images have become a widely used media on websites, and it is nearly impossible to find a website without images. Images are used for everything. The logo on a website is primarily an image; also, icons are often images, ads are images, and then, of course, we have the actual pictures. The problem with images is that they are heavy and cost lots of data before the user can enter a website. Images can also significantly slow down the web page, or visitors can use up their monthly data cap before knowing what happened.
As we discussed earlier in the book, many people still live with 3G or worse, and loading a website with unoptimized images can be a long process. In this lesson, we are going to talk about image optimization and how we, in the best possible way, can optimize images for the web using Adobe Photoshop. The steps in this lesson can also be applied to other image processing software, but if you use Adobe Photoshop, you can follow along. At the end of this lesson, you should be comfortable editing images to ensure you add images that are highly optimized for the web to your website.
When I was about 7 years old, I was about to go on the last holiday trip to Italy together with my parents. Every year for as long as I can remember, we used to go to Italy on a 2-week long vacation, and my parents would work hard all year to be able to afford this trip. Right before the last trip, my dad decided to buy a new digital camera so that we could keep even more pictures than with a film camera. It was about the time when digital cameras came out, and we were amazed by the unbelievably high image quality that could come out of approximately 1.3 megapixels.
Compared to the images taken on a cell phone today, I would say that the picture quality is really bad, but at that moment, it was revolutionary. The images that once seemed so colorful and detailed are now pale and pixelated, making them useless in today’s quality-fixated world. But the one good thing about them is the file size. Because of the relatively small amount of pixels and details, images didn’t take up much space, which meant you could store thousands of photos on an SD card. Compared to the average images taken today with a cellphone, the file size has increased by about 800%. First, cameras could take pictures in 12 megapixels, then 20, then 30, and now 50 megapixels. In the video industry, we have seen an increase from full HD to 4K and now 8K. People want bigger even though bigger is not always equal to better.
What is image optimization for the web?
Image optimization is a technique used for editing, resizing, compressing and saving images in the most optimized format for the web. The goal is to reduce the file size without sacrificing the quality so that you can display images on your website with minimal pollution. You can turn your image from full size into an optimized version that can be used on the internet through a set of techniques and tools. Some websites are already doing this automatically without you actively having to do anything. If you were one of the first users to join Facebook, you would probably have noticed that when uploading an image to their social media, the image would show up in much worse quality than the one on your device.
Many people were uploading images to their platforms, meaning they had to attach more and more storage to cope with the demand. Initially, they could not keep up with this, so a way to compensate was to reduce the image quality in order to allow more images to be saved on a single hard drive. Your image is first resized to a specific width and height when uploaded. Facebook decides on these proportions, and it fits the sizes on its platform. Afterward, the image is analyzed and compressed. When compressing the image, you remove details that you usually wouldn’t be able to see with the naked eye. In the beginning, you could see the compression that Facebook did, so images always became pixelated. Over the years, they have decided to allow high-quality photos and videos, which means they can now add enough storage to cope with the demands.
