You probably aren’t optimizing your images enough. In this article, learn how to optimize images for fast loading time, and which techniques work the best.
Join the DZone community and get the full member experience. Want fast loading web pages? You probably aren’t optimizing your images enough. Image optimization is frequently overlooked because it’s only a small difference and takes some time to do, but a series of small changes will lead to a screaming fast website. It’s worth it. Your pages will load faster. All this in exchange for a few minutes of your time. Do you need any more reasons to optimize your images? In this article, I will show you four ways to optimize your images and the results from each of them. I’ll explain how I tested them and show you the results. You can download the files and perform your own tests by downloading this repo. Feel free to play around with it. For testing, I decided to grab random images from Unsplash. I randomized the width and height to get various dimensions you might see on the web. I used this script to pull down 32 images and put them into a folder. We’re going to look at: We’ll also see how these methods stack up. We will examine file size and page load time. As a note, I do not change the resolution or color depth of these images, so they are all the same except for the optimizations. I’m testing load time by creating a simple index.html file in each folder that loads up a table of the images. I am serving it up with the NPM serve package because it’s a simple HTML server that runs locally. I don’t want network latency to affect the results. Then I use CURL to grab the load time: Let’s optimize some images and see the results.
