We all enjoy "surfing" the web and visiting various websites. And it's no secret that when viewing tons of images—food, nature, movie or video game screenshots—a webpage may take a long time to load. This is especially noticeable on mobile devices or when many tabs are open in a browser. Naturally, no matter how beautiful or functional the web design is, users tend to either stop loading images or simply leave the site.

What if the images themselves are huge in size (width and height)? There may only be a few on the page, but they are massive (2K, 4K formats). Most of us want to see beautiful photos or test the power of graphic cards. Let’s face it, web design often heavily relies on images—whether it’s stripes, textured boxes, clipart, and more.

In short, images in large quantity or large size can be used in many different ways on all kinds of websites. How can this problem be solved—and should it be? We'll look at one solution that many websites have been using over the past few years, and of course, discuss how Photoshop can help with it—and whether it's really necessary.

Let’s get started…

Google to the Rescue

There are many ways to compress images, and each person chooses what suits them best. Countless methods exist for reducing image size without noticeable quality loss, but today we’re talking about the WebP format.

WebP was developed by Google back in 2010 specifically to improve image optimization. It works with all common formats and, as of 2017, is a solid alternative to PNG or JPEG. To clearly demonstrate what we’re talking about, let’s compare image quality in JPEG and WebP with the same compression level.

In the example above, visual differences are almost nonexistent—essentially invisible at 70% compression. But the JPEG version weighs 49.8 KB, while the WebP version is only 15 KB, meaning you can compress WebP even more without worrying about file size. Not bad, considering they look nearly identical.

So, a fair question arises: will these images load and display in browsers—and which ones? Since WebP was created by Google, it’s naturally supported in Chrome, Yandex, and Opera. Overall, it works in about 90% of browsers, including mobile. Unfortunately, Internet Explorer and Edge don’t support it by default.

It’s also important to understand that WebP is not a full replacement for PNG and JPEG. It’s a browser-only format, and you'll still need to use other formats for compatibility. That said, small polyfills and libraries exist to help browsers handle unsupported features—which we’ll cover below.

JPEG (180 KB)

PNG (213 KB)

WebP (91 KB)

Converting Images to WebP

Option 1 – Photoshop

The easiest way to work with WebP is through Photoshop, using a special plugin by Telegraphics for different system versions. Once installed (just copy it to the plugin folder), you’ll get the option to save files in WebP via the "Save As..." menu.

The dialog box allows you to adjust quality with a slider, apply filtering, noise, and sharpness. Note from the included readme file that the Windows version has fewer features than the macOS version.

However, the Photoshop plugin doesn’t support "Save for Web..." or provide a preview, unlike JPEG. You won’t see the result or final file size until the image is saved and opened manually.

Option 2 – Online Converter

Another way is to use an online converter like Image Online-Convert. It works just as well as Photoshop and makes batch conversion faster and more convenient.

Embedding WebP Images

As mentioned, nearly all browsers (as of mid-2017) support WebP by default. However, users may have outdated browsers or unsupported ones. There are two main ways to implement WebP images.

What’s the difference between the two methods? In the first, the <img> tag stays the same—you just switch the file extensions from JPEG to WebP. In the second method, WebP is used if supported, falling back to JPEG if not. This requires editing <img> tags on your pages. Formats are switched “on the fly,” so it’s hard to say which method is best.

You can also use .htaccess code to check for WebP support and fall back to JPEG if unsupported. All images should be in the same folder and share the same dimensions (width + height).

Thus, web designers and developers can confidently use WebP if the project targets modern browsers—it will work just fine on supported pages.

How to View WebP Files on Your Computer

Windows does not support WebP by default. While Telegraphics provides a plugin for Photoshop, Google offers a plugin to view WebP in the standard Windows Photo Viewer. It also enables thumbnail previews in File Explorer and Office Picture Manager.

Applications like PaintShop Pro, IrfanView, Picasa, XnView, Gimp, and Paint.NET also support WebP through downloadable plugins from their official websites.

Who Needs It? Pros and Cons

As we’ve said, WebP is not a full replacement for JPEG. So, a fair question arises: is it even necessary? When should it be used?

If your project involves lots of images of varying sizes and resolutions, then implementing WebP is clearly beneficial.

PNG (124 KB)

WebP (78 KB)

Browser support improves with each year—if not every six months. Old Windows versions like XP, Vista, and Windows 7 are nearly obsolete. Most browsers now auto-update, so lack of WebP support is rare—and usually not critical for a project.

Additionally, fallback methods exist using duplicate JPEG files or on-the-fly conversion.

Still, universal WebP support doesn’t exist, so having JPEG versions available is necessary. But if your users’ browsers support WebP—why not deliver lightning-fast image loading versus traditional, slower formats?

Another major advantage is transparency (alpha channel) support, like in PNG. A PNG may weigh 7 MB, while WebP could be just 700 KB.

Where Is WebP Used?

When visiting a website, it’s not always obvious whether it uses WebP. Images may have been converted from JPEG. However, using developer tools, you can inspect which images are served in WebP. For example, gaming portal Stevivor converts screenshots, maps, and large visuals to WebP to maintain quality with lower file size. With so many games, guides, and pictures, WebP is 100% justified.

Telegram uses WebP for stickers—popular in both desktop and mobile versions.

Facebook also adopted WebP for mobile, speeding up image and feed loading. All user-uploaded images are automatically converted to WebP.

Streaming giant Netflix uses WebP for episode preview thumbnails, enhancing page load speeds.

eBay actively uses WebP—given the sheer volume of products and images on its platform.

Google themselves use WebP for their mobile Google+ social platform.

Conclusion

Whether to adopt WebP or stick with traditional formats is up to the designer and client. But year after year, WebP proves to be a worthy alternative to heavy JPEG and PNG files, offering impressive quality at smaller sizes.

Of course, any compression affects image quality to some extent—no one denies that. The real question is: how much, and is it worth it for faster, lighter results?

Like any technology, WebP has fans and skeptics. But most arguments boil down to debates like "which console is better?" or "which Avengers movie had more action?"

As long as WebP can compress JPEG, PNG, and GIF while preserving quality—it will remain attractive to designers and developers.