Using WebP Images to Improve Page Speed

luke's picture
| 26th June 2019
Share
Posted in:

The SilverDisc development team are always on the lookout for ways to improve website performance. With the heaviest part of a web page being imagery, it is one of the most important things to get right. I’ve written about optimising imagery in a previous blog post.

I’m going to go one step further today, and discuss the WebP image format.

 

So, What is WebP?

According to Google, who introduced the format in 2010, “WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.” 

 

Why Use WebP?

The sole benefit of using WebP is the reduced file size this format offers without having to reduce image quality. This is especially important on the web, where every kilobyte saved contributes to a faster page speed and improved user experience. SilverDisc have recently introduced WebP images to the new Be Wiser site, and have been able to increase page speed scores dramatically.

To help demonstrate, see the two images below. One is saved as a JPEG, and the other has been saved as a WebP image. There is no noticable difference in quality of the images, but the WebP image has been reduced in file size by 60%.

 

 Lion JPEG Example
JPEG - 104 KB File Size

 Lion WebP Example
WebP - 42 KB File Size (60% reduction in file size.)

 

Sounds Great, Right?

So no problems so far. High quality images at less than half the file size seems like an ideal solution. Sadly, nothing on the web is ever that easy. Not every browser available will offer the support needed to display WebP images.

 

Can I Use WebP Example

 

The table above demonstrates which of the most common browsers support WebP. Notice Safari being among the culprits which do not. That’s all Mac and iPhone users unable to make reap the benefits of WebP (unless they are sensible enough to download a better browser).

At the time of writing this blog, 78.81% of the global population use a browser which supports WebP images. Now, even with this majority, fully committing to WebP would leave 21.19% of your users missing out on images altogether. We need to find a solution that works for everybody.

 

Keeping Everybody Happy

Ok, so we need to deliver super-fast WebP images to those who can see them, but provide an alternative for those who can’t. Let me introduce the HTML5 picture tag.

 

<picture>

     <source srcset="img/lion.webp" type="image/webp">

     <source srcset="img/lion.jpg" type="image/jpeg">

     <img src="img/lion.jpg" alt="A Lion">

</picture>

 

The picture tag allows us to provide multiple versions of the image, in priority order. In this code example we ask the browser to render the WebP image first. If unable to do so it will fall back to the JPEG version. This approach serves the smaller faster loading image to the majority, but will not punish the minority.

 

To Finish

Making the switch to WebP is just one of the many methods SilverDisc implements to improve website speed. If you feel like your website is letting you down, why not get in touch with us, and see how we can help? Contact us online or call 01536 316100.

 

Tagged in

You might also like

blog
Cheetah Running
A good website is a whole lot more than a nice design. As well as looking the part, it needs to be secure, fast and functional. This blog post will focus on the fast.
By:
Luke Holmes
On: 8th February 2019
Posted In:
SEO | Web Design & Development | Websites | Bounce Rate
blog
Progressing as a team
I have only recently joined the web development team at SilverDisc, but i have already learned much more than I thought I ever could! I find it can be hard to put yourself into new situations,...
By:
Harry Perkins
On: 1st June 2018
Posted In:
Websites
blog
Recently SilverDisc were invited to attend an AMP hackathon at the Google offices in London. Marc and myself were the lucky two let out on day release and hopped on an EARLY morning train down to London. We spent the day creating our very own AMP pages, managing to reduce mobile page speed considerably.
By:
Luke Holmes
On: 21st April 2017
Posted In:
Websites | Web Design & Development | Responsive Web Design

Why Choose SilverDisc

Track Record Of Success

Continuously getting it right for our clients is of paramount importance and we have some great testimonies to this.

Credibility

Being Google Premier Partners and Bing Select Partners gives you the assurance that we’re fully trained, that we have demonstrated exceptional account management across a range of client spends and industries, and that our track record will continue.

Thought Leaders

We see where digital marketing is heading and position our clients to meet it. For example, we are so far ahead of the SEO game that we helped Google to write their webmaster guidelines, so you can enjoy SEO success without fear of being penalised.

Ethical & Honest

We have your best interests at heart and we give it to you straight, even if that’s painful to you or us. For example, we won’t spend your money marketing a website when it’s plain to us that the money would be wasted. We look for a win-win-win …

Focused

We listen to your individual needs, identify targets and work relentlessly towards meeting them, concentrating on what’s effective.

Driven

We exist to unlock the value of technology for business, and we love what we do. We have 25 straight years in digital marketing.

Friendly, Open and Giving

These words are at the core of our values. We build strong partnerships and go out of our way to help solve problems for clients, suppliers and the wider world.

Let's Get Started

Please fill in the form below or give us a call on 01536 316100

Follow SilverDisc