WebP – Google’s Image Extension for Web Internet Browsers – How to Properly Use

webplogoRecently, when I launched a new design for a website, one of the biggest features was a photo gallery. This photo gallery was calling a number of high-res PNG files, which was a big part that caused the home page to load slowly. Seeing few options for the same quality images at a smaller file size. I then recalled a couple of years ago when Google announced a new image format specific for web browsers. That format is WebP, and for all intents and purposes it’s the same as a PNG file at 1/5th the size, allowing for faster loading.

I immediately jumped at the chance to convert my PNG files into WebP images, and was more than pleased at the results. However, imagine my chagrin when I realized that WebP can only be used by Google Chrome and no other browser! What to do?

The simple answer seems to be that for now, make image loading browser specific, at least until all other browsers (Internet Explorer, Firefox, Safari, Opera, etc.) get up to speed. It’s a shame as WebP loads lightening-fast, but that what cross-browser compatibility is all about. If the browser is Chrome, then unleash the WebP goodness it has to offer. Else, load the slow-loading PNG files. But how?

Looking at browser-specific CSS rules, I realized then and there that from a CSS perspective, you cannot isolate Chrome from Safari, Chrome from Opera, etc. The only two ways are server-side or JQuery.

Since too much Javascript is never a good thing, I did the responsible thing: I hard-coded a condition in PHP:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false)
{
    // User agent is Google Chrome
    // Output WebP background CSS file
}
else{
    //Output slow-loading PNG background CSS file
}

And voila! It worked!

Oh, before I finish, here’s a way to slightly reduce the size of your PNG files. It’s called PNGCrush and should reduce the image size by up to a quarter of what it was before. Enjoy!

Note: Being lazy, I’ve been using TinyPNG, a user-friendly PNG resizer that doesn’t compromise the size or quality of your PNG images.

 

Comments

comments

Recent Posts