If your web team, social media paid advertising team, or email marketing team is using the wrong graphics compression, it could be costing your company millions of dollars. Whether you’re working on a web page, Facebook ad, or email marketing piece, one thing remains constant and crucial: the load time of the images. The faster the images load, the more likely your content will be viewed and do its job. This fact falls into one of my mantras.
As a designer and developer, I live by:
• We hate to wait.
• We hate to read.
• And we hate to scroll.
If you follow those three principles, you’ll design content that loads quickly.
Over half of all web traffic is now consumed on mobile phones. Techjury reports that 54.3% of all internet traffic was on mobile phones in 2021. And CNBC reports that nearly three quarters of the world will access the web on their smartphones alone by 2025.
First let’s understand some basics, and that each of the below have different types of compression available.
• JPEG stands for joint photographic experts group and can display up to 16 million colors. This is the most common format for photos.
• PNG stands for portable network graphics and can do 24- or 32-bit color with an alpha channel for transparency. If you need a transparent, professional-looking image (such as a logo), the format most generally will be PNG.
• GIF stands for graphics interchange format. The Lempel–Ziv–Welch (LZW) data compression algorithm used in the GIF format was patented by Unisys. GIFs have very small file sizes. Steve Wilhite created the GIF while working for CompuServe in 1987. But GIFs have a serious limitation: They are only capable of displaying 256 colors and often look blocky or not as professional.
Now let’s cover compression and what works best for most of your applications.
For the sake of demonstration, we’ll use an iStock photo image that is originally 6.3 MB JPG and 7360 x 4912 in pixels. Let’s size it to 1080 wide. Now it becomes 322.2k in size with maximum quality. If we made the mistake of saving it as a PNG, the file size would become 454.4k. If it was an interlaced PNG, the file size grows to 551.2k.
Next, let’s change the export of the JPEG to 50% quality. The compressed size of the file is now 54.31k. Now let’s make it 50% and optimized. It’s 50.86k. Next, we’ll use progressive compression. The size is now 47.21k. Progressive is an older standard that allows for the image to come in blurry for a fraction of a second, as opposed to interlaced images that load line by line from top to bottom. And yet, this old standard gives us the smallest of the file sizes. Progressive will yield the smallest file size without a difference in quality compared to the optimized version.
Why would we care about such a small gain?
The size of the web page matters because the smaller the size, the faster the users get your content. And unfortunately, our love of content is pushing the size of web pages up every year. Pingdom reports that web pages are getting larger every year and the average web page file size is 1517.7k. On mobile, it’s 1279.9k. Consider that 53% of all mobile site visits are abandoned if the page takes longer than three seconds to load.
So, using the average size of 1517.7k, how many photos could we have if they were uncompressed? The answer is just 4.7 photos.
But, how many could we have if we use the jpeg-optimized version at 50%? (This is the most common file format for web developers. They usually compress 60%-80%.) We could have 29.84 photos. If we left it on the setting that even seasoned web developers use (60%), we could only have gotten 19.39. That small difference in setting on the compression would have allowed us 10 more photos.
Why does it make them smaller? Because the progressive JPEG works and loads much in the same way as a GIF.
Now, how many photos could we have if we used the baseline progressive JPEG compression at 50%? Well, we could have 32.14 photos. What a difference the compression makes in terms of how much content we could offer. If we went with less content, the page would load faster and we would get to users’ devices faster than the average web page — and that’s the strategy I recommend.
Within the past two months, I received a phone call from a very recognizable celebrity chef. His restaurant had a website that was not performing, and management wanted to know what was wrong with it. After testing it, I discovered the person who made the website had uploaded all the images uncompressed. This was costing the restaurant a lot of money in lost reservations and customers.
This is also certainly true of email marketing, where users have little patience for slow loading time. And on Facebook ads, a lighter image reduces your cost per like. If you spread that out over an ad budget of several million a year, plus all of your other marketing channels, the money adds up quickly.
So, it’s easy to see how using the wrong format could be costing your company millions of dollars in lost revenue and overpayments.
Laura Kerbyson | Designer | Developer | Marketing | Photography | Computer Science | Internet Expert