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. …….