People want websites to load fast, whether they realize it or not. Said a different way, when a user notices a delay in load time, they experience a kind of cognitive dissonance that can cause them to bounce. As consumers of content, users expect things to “just work”.
According to a great article by Kissmetrics, 47% of consumers expect a web page to load within 2 seconds, and 40% of users leave any website that takes more than 3 seconds to load. From these two statistics alone, one can quickly grasp the direct impact that page load speed has on conversion. Time is money.
In addition to this, Google will actually penalize your site’s search ranking if your pages take more than a couple seconds to load.
That all being said, one of the easiest wins for reducing page load time is to tackle image compression. Images are by far one of the most common offenders to page load speed. If you run any give page through Pingdom’s Speed Test, you can sort the waterfall by “type” or “file size” to easily spot images which need to be reduced in size.
Like with many sites these days, they use a large background image in the “hero” section of their home page. At ROIworks we see a lot of unnecessarily heavy hero images. Let’s take fruitstreet.com, for example. According to Pingdom, their hero image was a whopping 189kb.
Using Photoshop’s “Save for web” feature, I was able to compress this image to only 54kb without dramatically impact the quality of the image.
There is an art form to the threshold at which any given image should be compressed, and this is largely related to the quality of the original image. We believe that background images can afford more compression as they are not the focus of the eyeballs, but rather there to support the message.
In our updated design for Fruit Street, we were able to dramatically increase readability of the text on top of the hero while also reducing the weight of the hero image even more than in their original design, weighing in at only 44kb.
A few additional tips for image weight reduction:
- Focus on your home page first. This is where you will get the most value out of optimizing images. Then, move to secondary pages.
- Images with more negative space and less variation in color lend themselves a lot better to being compressed. Conversely, images that have a lot of detail and color variation are much harder to reduce successfully, and compressing them too much will result in unfavorable artifacts.
- Always resize images according to the actual size the image needs to be displayed. Too many times we see images that are 2400px wide being displayed at 800px wide. This is bad for business. In the case of a hero image, it’s best to use Media Queries to load different images at different breakpoints and compress accordingly.
- Using Gaussian Blur artistically on a background image will greatly reduce the detail in an image, therefore reducing an images overall weight.
- Similar to the blur technique, decreasing an images contrast ratio will also reduce image weight. Again this technique comes in handy for background images.
