JPEG XL has experimental support in Firefox, Chrome and other Chromium-based browsers like Edge. In addition to supporting alpha channels/transparency, lossless, progressive loading and animations, the new image format promises high speed encoding and decoding even on phones. Designed for the modern web and with professional photography in mind, JPEG XL offers a more efficient way of storing images. Contact me before republishing this content.Description JPEG XL (or JXL) is a new image format with better compression than other image formats like legacy JPEG, PNG, WebP, AVIF and others. Questions? Comments? yell at me on Twitter! It’s definitely worth the few minutes of extra time. webp images are smaller and more efficient. I will do this experiment again with a larger image set to see how the changes scale. Optimize your images! As you can see, it makes a difference, even with this small page with 32 images on it. This is the total file size for all images: This is something you should consider when doing image optimization on your site. The average is 0.0010326 seconds, which is a new record. Wow! We went from 3.1MB of images to 1.5MB. This is Google’s recommended image format these days, and it’s easy to see why. So I took the same set of raw images and converted them to. These will be significantly smaller and hopefully faster. But, we can take this even a step further and convert everything to Webp images. I highly recommend XNConvert for image optimization. The average is 0.001085 seconds, which is a little faster than RIOT. However, I don’t expect it will significantly improve load time over the previous 2.3MB of images. Then saved them with the following settings:Īt 2.2MB, this is the smallest we’ve seen yet. This is the tool I use the most because it runs in Windows, Mac, or Linux and does batch processing quickly. Optimized with XNConvert (JPG)įor this test, I optimized the images with XNConvert and used it to optimize the JPEGs. Our average load time is 0.0010877 seconds, which is our fastest yet. This reduces your website’s footprint without sacrificing quality. This is only available in Windows, but it’s an excellent tool I’ve been using for years.Īnd even though I left the quality pretty high at 82%, it shrunk the files down considerably:Īt 2.3MB, that’s quite a bit of savings. Next, I optimized the images with the Radical Image Optimization Tool (RIOT). Not much of a surprise with this file size. Our average load time is 0.001213 seconds, which is a little above the raw files. But most of the time, this creates smaller images. I have no idea why this is and will investigate and update later. It’s 3.3MB, which is more than we started with. I set a quality of 60 and set it to progressive with no metadata. Optimized with Photoshopįor the next set of images, I optimized these with Photoshop. I ran the test ten times and got an average load time of 0.0013495 seconds. Here is the total file size for all images: 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.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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |