This is a test with the images straight from Unsplash. I don’t want network latency to affect the results.Ĭurl -s -o /dev/null -w "%\n" -H "Pragma: no-cache" Let’s optimize some images and see the results. I am serving it up with the NPM serve package because it’s a simple HTML server that runs locally. I’m testing load time by creating a simple index.html file in each folder that loads up a table of the images. 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. We will examine file size and page load time. The raw files - with nothing done to themĪnd we’ll see how these methods stack up.I used this script to pull down 32 images and put them into a folder. I randomized the width and height to get various dimensions you might see on the web. Feel free to play around with it.įor testing, I decided to grab random images from unsplash. You can download the files and perform your own tests by downloading this repo. I’ll explain how I tested them and show you the results. In this article, I will show you four ways to optimize your images and the results from each of them. Do you need any more reasons to optimize your images? What We’ll Do It makes your page more accessible in low bandwidth situationsĪll this in exchange for a few minutes of your time.
#Xnconvert webp to jpg series#
But a series of small changes will lead to a screaming fast website. Image optimization is frequently overlooked because it’s only a small difference and takes some time to do. You probably aren’t optimizing your images enough.
0 kommentar(er)
