Why is my .png image replaced with a .webp image in Chrome browser?

user_16268239 0
Viewed 177

This is my first question, please be gentle. I am working on a website. I have deployed all my code to my web server. Everything looks identical between the localhost and web environment except for the company logo picture: Example in Chrome browser - Left: localhost rendering; Right: web server rendering

I've obviously checked that the path to the image is correct and the same image file is loaded.

When I inspect the image in Chrome, Edge, and Opera (all latest versions for Windows), the src attribute is an ugly thing, and the served image displays poorly:

<img src="images/Nx80xbrr_final_logo_white.png.pagespeed.ic.6XkhN2MIrr.webp" alt="logo" height="80px">

In Firefox, the src attribute matches what I have in my local environment, and it displays like I expect:

<a class='navbar-brand' href='index.php'><img src='images/brr_final_logo_white.png' alt='logo' height='80px'></a>

I have searched the interwebs without success to figure out what could be happening on the web server to alter the src / image like that. Any help is greatly appreciated!

google-chrome html
1 Answers

It looks like your production environment is using https://www.modpagespeed.com/doc/filter-image-optimize to optimize images, which is why it ends up being a very different URL and a different file extension. This appears to be decreasing the time that your page takes to load by lowering the quality of images.

From their documentation: "PageSpeed improves web page latency by changing the resources on that web page to implement web performance best practices" which explains why your images are coming from a different URL than on localhost.

user_14998770
Related