How to Boost Page Performance: Image Compression Tips
Dennis Kardys Director of Design & Production#Design, #Design Advice
There are many aspects of page loading times that are uncontrollable, but one part you can control is your images. Here are some tips to compress your images.
How fast or slow a website loads is determined by a combination of factors that span design, development, network architecture, and the end-user's connection speed. Many of these, especially the last, will be out of your control. But one of the biggest, and most easily preventable, causes of a slow-loading website is uncompressed images. Here's what you can do as a content author to make sure you are properly compressing images and not bogging down the load time on pages.
Case Studies
In revisiting the Marian University site that had been launched earlier this year, we noticed that the home page file size was over 1.7MB. That's an exorbitant (but unfortunately common) file size for a web page. With Indiana Wesleyan University, another recent higher-ed project, we encountered similar issues with large graphic page banners. For people accessing the site on a slow connection or over a cell network, this is brutally painful. All the effort that goes into making a responsive, fluid width site that displays optimally on small screens is wasted if the user leaves before the page ever finishes loading.
In the case of Marian, the majority of the page size was a randomly loading transparent PNG file—one in particular weighed in at 1.6MB. There are web-based image compression tools that are freely available that can have a dramatic impact by reducing image file size. That 1.6MB image was able to be compressed down to 230K, with little perceptible difference in image quality. This ended up improving load time by over 85%.
In the case of the Indiana Wesleyan University, here's an example of how significantly we were able to cut page size.
Example A:
(original): 1.07MB
(compressed): 340K
Example B:
(original): 1.1MB
(compressed): 299K
Do this. Period.
Introduce image compression into your content migration/entry workflow, compressing images before uploading into whatever Content Management System you use. Unfortunately, image compression is not baked into most CMSs, even the enterprise ones. And Photoshop, despite its Save For Web compression options, has yet to deliver as drastic results as the better compression tools.
Some of the Best Image Compression Tools
Here are some sites we've used for compression that have returned great results:
- http://tinypng.org/
- https://kraken.io/ (select lossy for highest compression)
- http://compresspng.com/
- http://compressjpg.com/
Set a Performance Budget
If your pages are under 200 or 300K, that's great. For graphically intense pages, if you can keep them beneath 600K, then shoot for that. There's not a magic number, so just aim to get page size as low as you possibly can. If your webpage is over 1MB, you're doing something wrong. If you've already compressed your images, it may be that you're just loading too many image assets. A good way to transform this principle into something actionable is to set performance budgets for pages. The idea is to recognize that page-load time contributes just as much (if not more) to the user experience as interactive or photographic features do (this is especially true for mobile users). By imposing a budget, you set a target goal for page weight and cap it at that. This creates a healthy constraint to measure design and editorial decisions against.
Pay it Forward
Ensuring that your site loads as quickly as possible for all users, regardless of their means of access, has important, but often overlooked, business consequences. Although it may not be a problem specifically plaguing you or me—as we sit at our desks designing, building, or administering websites—we have to remember that our context for the sites’ use does not necessarily match the context of the variety of people our sites must serve. An increasing number of people in cities and around the world have no home internet access and rely on slow mobile connections as their only means of accessing the Web. And if you have little sympathy for the mobile-only user, what about people trying to load your site over sub-standard public Wi-Fi, like in a coffee shop, library, or airport? Let's help 'em out!
Image compression is just one aspect of considering page performance, and there are a lot of other things that can be done to help improve load times. If anyone else has any tips on how content authors can make their sites load faster, please share!
Related Posts
Accessibility Playbook Resources
Useful accessibility resources that are free for web designers, web developers, and content creators to help them build more inclusive websites.
Establishing Equitable Management Practices
It's International Women's Day and Dennis Kardys shares some things we’ve done at Diagram to be mindful of bias and take steps to embrace diversity.
Results Matter.
We design creative digital solutions that grow your business, strengthen your brand and engage your audience. Our team blends creativity with insights, analytics and technology to deliver beauty, function, accessibility and most of all, ROI. Do you have a project you want to discuss?
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.