Optimization In 3…2…1
Many people today expect websites to instantly pop up on their screen of choice, whether it is on their phone, tablet, laptop, or personal computer.
When the site takes more than a couple of seconds to load, the attention span quickly diminishes and the visitor types in another website address or clicks on a different link.
People do not have the attention spans they used. We have all been spoiled by internet speeds into the hundreds of mega bytes per second. Let us not forget the days of dial up speeds of 9600 baud, or the faster 5600 kbps – but people easily forget what those days were like, or worst yet never got to experience the squelching dial up tone.
Developers have several tools and methods at their fingertips to help speed up how fast a website takes to load. One of the main methods is through image optimization.
If you were to go out and take photos with your cellphone or DSLR camera, you would find that each picture you snap is well into the mega pixels, or MBs in size. The photos are massive, but for good reason: the amount of details that can be captured through digital imagery is unbelievable.
When I shoot with my DSLR camera, I shoot jpg and raw files. Raw is exactly how it sounds; these are images that have not been doctored or processed. JPG images, on the other hand, have been processed but still take up MBs in size.
If you were to shoot 10 images and upload them at their original size to a website, each image, regardless of the internet speed, would take time to load on a website.
Traditionally, the images could be resized, so a 2400 px wide image could be dropped to 900 px and the load time would improve. Unfortunately, 10 photos at 900 px would still take a bit of time to load unless the pictures were optimized – in other words, processed down a bit more to make the images even smaller in bits or bytes.
Take the following image, for example.
This image, at its unaltered size is 432 kb. Although it is much smaller than a megapixel, the image is still rather large and would be slow to load on a device.
Using Adobe Photoshop, that image can be exported as a JPG specifically for the web by going to file, export and save for web.
From there, you can tweak the quality of the image, reducing the size of it and making it optimized for the web.
By just clicking on Save for Web, and dropping the quality from 100 percent to 80 percent, the size of the photo goes from 400 kb to just under 200 kb. To the naked eye, the quality of the image remains intact, though there is a little bit of blur.
I took the image down to 30 percent and started seeing circles in the sky in the image, so that was a bit too much.
When I dropped the quality to 60 percent, I could see a little more blur than at 80 percent, but not enough to strip away the quality of the website. I was also able to decrease the size of the image to 109 kb – nearly a quarter of the original size.
I normally do not drop the quality of images below 70 percent, but in this case, it works.
In the case of uploading 10 images that need to be optimized, 100 kb per image will be much faster than 400 kb per image.
Ultimately, it is your job to keep people on the site, so without sacrificing quality of the images while speeding up the load time, people should be more likely to stick around.