WebP format - how to use it and why it is needed. The Mysterious And Convenient WebP Format In Web Design And For Photoshop
is an image format developed by Google in 2010. It was created as an alternative to PNG and JPG formats. Using WebP, you can create images much smaller than traditional JPG and PNG formats without degrading image quality.
Why is WebP needed?
WebP is a very useful image format because it offers both performance optimizations and rich functionality. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and animation.
| WebP | PNG | JPG | GIF | |
| Lossy compression | + | + | + | — |
| Lossless compression | + | + | + | + |
| Transparency | + | + | — | + |
| Animation | + | — | — | + |
Even with this rich functionality, the WebP format provides significantly smaller file sizes than its alternatives. In a comparative study of these image formats, it was found that lossy-compressed WebP images were on average 30% smaller than JPG, and lossless WebP images were on average 25% smaller than PNG.
How to convert images to WebP
Several tools already exist to easily convert JPG, PNG and other file formats to WebP.
Online converters to WebP
- Squoosh- a tool for converting and comparing image formats from Google
- Online-Convert.com— online converter
Command Line Tools for WebP
Although this is quite a lot, it is not enough to avoid doing a fallback for unsupported browsers. Otherwise, some users will not see the image.
Images can be backed up using the element
To provide an alternative image source, we use
At the element
- type: MIME source file type;
- srcset: Path to the image file. To display one image of different sizes, you can use several files (see)
- sizes: List of sizes of each source file (see article above)
- media: A media query to determine which source will be used to display the image.
In addition to the elements We all love to “walk” through the Internet and visit certain sites. And it’s no secret that when viewing a huge number of images of food, nature, screenshots from films or video games, loading a website page can be delayed for a long time. This is especially noticeable on mobile devices or if you have many tabs open in your computer browser. Of course, no matter how beautiful and functional the web design is, visitors try to either interrupt the loading of images or simply leave the site. What if the images themselves are huge in size (width-height)? There are few of them on the village, but they are simply majestic (2K, 4K formats). After all, almost all of us want to see beautiful photographs or the capabilities of graphic video cards. What can we say, often the entire web design is created entirely from images. Either these are stripes, or squares with texture, or clipart, and so on. In a word, images in large quantities or large sizes can be used in different ways and on a variety of sites. How can such a problem be solved and is it necessary? We will look at one of the methods that has actually been used by many sites over the past years and, of course, we will figure out how Photoshop can help with this and whether it is necessary at all. Begin… The solution to the problem of image compression is varied and each person chooses for himself what is more convenient for him. There are a huge number of ways to reduce the size of an image without obviously degrading quality, but today we will talk about the WebP format. It was created by Google back in 2010 specifically for improved image optimization. It works with all already known formats and today in 2017 it is a very good alternative to PNG or JPEG. To visualize what we started our conversation about, let’s compare the image quality in JPEG and WebP at the same compression percentage. In the example above, there are practically no visual differences, or rather they are invisible at 70% compression. But at the same time the JPEG version weighs 49.8 Kb, and the WebP version weighs 15 Kb, accordingly, the compression percentage in the second case can be increased without fear of a large file size. Not too bad considering that visually they are almost identical. A reasonable question arises: will such images open and load on the website page in browsers and which ones? Since the WebP format was created by Google, then, accordingly, there is also support in Chrome, Yandex, and Opera. In general, support is provided in 90% of browsers, including mobile versions. Unfortunately, there is no support in IE and Edge by default. It is important to understand that WebP is not and cannot, under any circumstances, be perceived as a 100% replacement for PNG and JPEG. This format is only for browsers that can work with it, but it will undoubtedly be necessary to have a different format for other browsers. On the other hand, there are always small polyfills and libraries that allow browsers to work with this or that “trick”. But more on that below. The easiest way to work with WebP is, of course, Photoshop, for which Telegraphics has also created a special plugin for different bit depth versions. After you install it (copy it to the folder with plugins), the application will have an option in the menu “ Save as…» select the WebP format from the drop-down list. The dialog box allows you to adjust quality using a slider, filtering, noise and sharpness. Please note that according to the attached readme file in the archive, it is stipulated that in the Windows version the functionality of the plugin is less than in the version for Mac OS. In addition, the plugin for Photoshop does not allow you to use “ Save for Web...", and there is also no preview of the saved image, as is the case with JPEG. Therefore, until you save the file and open it for viewing, you will not know what is coming out or how big the file will be. Another conversion option is to use an online converter - Image online-convert. It works no worse than in Photoshop, but thanks to it it is faster and more convenient to batch convert files. As we said above, almost all browsers currently (mid-May 2017) support WebP by default. However, users' computers may have older versions of browsers installed or those that do not support the format. There are two convenient options for displaying images in WebP. What is the significant difference between both libraries? In the first case img tag on the pages does not change, you just change the file extension yourself from JPEG to WebP. In the second case, the WebP format is used to represent the image, if it is supported, and if not, it is replaced by JPEG. With this option you will have to change img tags on Wanderers, Automatic conversion of formats occurs “on the fly”, so it’s difficult to say which one works better. You can also use code for the .htaccess file, which will check the browser's support for WebP and, if the answer is negative, replace the image with JPEG. In this case, all images must be in the same folder and the same size (width + height). Thus, a web designer and developers can use the WebP format if the project, the site, is oriented towards modern browsers. Then it will work and display on the pages. Initially, Windows does not support this format, and while Telegraphics created a plugin for Photoshop, Google released a plugin for the ability to see image files in the regular Windows Photo Viewer. This plugin also creates image previews in Explorer for the Microsoft Office Picture Manager. The download is below. Application developers PaintShop Pro, IrfanView, Picasa, XnView, Gimp, Paint.NET and others have also created WebP support, which can be downloaded directly from their official websites. Since we have stated more than once that the WebP image file format cannot be a full-fledged replacement for JPEG, it is reasonable that many of us sooner or later have a question: is this format needed at all and in what cases is its use justified? If the project involves the use of a large number of images of different sizes and resolutions, then, of course, this format should be introduced. As for browser support, every year, if not half a year, in the world as a whole, old versions are becoming a thing of the past, just like old versions of Windows. XP, Vista, and 7 are almost no longer used. The same goes for outdated browsers, especially since almost all of them update automatically if installed. Accordingly, there is no WebP support in isolated cases, which may not be so critical for the project. On the other hand, there are libraries and the ability to use JPEG dubbing and on-the-fly conversion. However, you need to remember that this format is not widely used, so you need to have JPEG variations on hand. And here again there is a duality: if the browsers of site visitors have support for WebP, then why not offer them almost instantaneous loading of something that will take much longer to load for others? After all, in general, this will only have a positive effect on the conversion of the site. Another plus - transparency support (alpha channel), that is, similar to the PNG format. And if in PNG the image weighs more than 7 Mb, then in WebP it is about 700 Kb. The first time you visit a particular site, it is impossible to say with certainty whether WebP is used or not. The thing is that images can be converted to JPEG. But you can determine where exactly on the page there is WebP and where there is JPEG through the developer console. For example, a video game portal Stevivor
Converts screenshots, maps and large images to WebP to maintain quality and small size. There are a lot of video games, guides for each single game, and even more pictures - the use is 100% justified. Telegram
saves sticker pictures in WebP format, which are so popular both on the desktop version of the social network and on mobile. WebP is a new image compression format developed by Google for use on the Web. Simply put, the new format is designed to make the Internet experience faster and better - both on desktop computers and mobile devices. When comparing JPEG to WebP, their image quality is the same, but the WebP file can be over 30% smaller in size. This means that website owners can safely publish high-quality images without fear that it will cause their sites to load slowly and seriously eat into user traffic, especially those coming from mobile devices. Some popular websites, such as Facebook and Google, already use this image compression technology to provide fast surfing on smartphones and tablets. Google WebP supports metadata, lossy and lossless file compression, and the transparency found in PNG images. In general, technically the new format can replace JPEG, PNG and GIF animation. There is one problem that you will encounter after downloading a WebP file to your computer, namely, you simply will not be able to view it. The fact is that the format is at an early stage of its development and is not yet supported everywhere. This format cannot be opened using standard Windows tools. Fortunately, Google has already released a WebP codec for Microsoft's operating system. This codec includes everything you need to open WebP files on Windows 8, Windows 7, Vista and even XP using the built-in image viewer. The installation process is very simple. Download the WebPCodeSetup.exe file from the Google Developer site, double-click on it and follow the simple installation wizard instructions. This is a new image format from Google that uses both lossy (trade-off between quality and size) and lossless (reduces size without compromising on quality) compression. Google develops both the format and software related to WebP under the BSD license. It was released on September 30, 2010, is an open format and uses the .webp file extension. Basic WebP compression mechanism WebP's lossy compression algorithm uses predictive coding to predict the color values of adjacent pixels. It then only encodes the difference between the actual values and the predictions. Of these encoded or residual values, many are zero, a phenomenon that further reduces the size of the WebP image. So WebP's lossy compression - like JPEG - is based on block prediction. Support and use Google Chrome and Opera have built-in support for WebP. Among graphics software, Picasa, Photoline, Pixelmator, ImageMagick, Konvertor, XnView, IrfanView and GDAL all support WebP natively. Facebook started using WebP to reduce network costs and speed up its website. Even relatively small improvements in efficiency begin to add up at Facebook's scale. When people upload JPEG/JPG images, Facebook automatically makes copies in WebP format. They have apparently now started sending these images to people using Chrome and Opera. Telegram has also started using WebP for its popular stickers. Google's instant search engine preview uses WebP internally to reduce the disk space used by the preview. The main problems arise when a person wants to view or make changes to an image in software rather than in a browser, since most of the most popular graphics applications - including Window's or OS X's image viewer and Photoshop - cannot handle WebP natively. In October 2013, Josh Aas of Mozilla Research published a comprehensive study on modern lossy encoding techniques and was unable to conclude that WebP beat JPEG by any significant margin. However, Telegraphics has released a free plugin that provides WebP support in Adobe Photoshop, GIMP, and support for Paint.NET WebP plugins via. Google has also released a plugin for Windows that brings WebP support to Windows Photo Viewer, Microsoft Office 2010, and any other application that uses the Windows Imaging Component. Benefits and Statistics Google's WebP documentation states: Lossless compressed WebP images are 26% smaller in size compared to PNG images. Lossy compressed WebP images are 25-34% smaller in size compared to JPEG images by the equivalent SSIM index. WebP supports lossless compressed image transparency (also known as alpha channel) with only 22% extra bytes. Transparency is also supported by lossy compression and typically produces a file size 3 times smaller than PNG when lossy compression is acceptable for the red/green/blue color channels. Convert to WebP The WebP documentation provides access to precompiled software for converting PNG and JPEG images to WebP. You can read more about it and download it here. Here is a link to an online converter that will achieve the task without downloading any software. We've talked enough about WebP. Let's translate our knowledge of WebP into something constructive and creative. We'll see how to make stickers for Telegram from a JPEG image and convert it to a .webp file. We are going to create a sticker from the following image. We use Photoshop to make the background image transparent. We will do this by selecting the ‘Background Eraser Tool’. We'll also crop the image since it's quite large! Finally we use an online converter to convert the image to .webp format and our sticker is ready! You can create many other stickers in a similar way to communicate with your friends on Telegram. Conclusion WebP is a new image compression format and, supported by Google, Facebook, Opera and Telegram, has certainly become more popular. This is a format that already has a large number of fans and detractors. However, the ability to package the valuable properties of GIF and PNG into a single format with a reduced image size will continue to tempt web developers to create smaller, higher-quality images. And if it helps speed up the Internet, we'll all benefit. Good day, friends. Just recently I discovered that I can’t save pictures from the browser with the right mouse button in standard graphic formats (JPG, PNG), but at the same time the images are saved in an unknown to me WebP format. Okay, I downloaded the file, and now the question is, how to open webp?. In what program? This is what we will talk about today. As one wise Wikipedia says: WebP(pronounced Weppy) is a new format for compressing graphic images with and without loss of the quality of the source file. Why do we need something new when there are old and familiar JPGs and PNGs? According to the developers (and this is not who, but Google Inc itself), most modern images have been used on the Internet for more than ten years and are based on technologies of the last century. Here's how it turns out... Now, technology has moved forward a lot, and something needs to change. And so, Google engineers decided to check whether it was possible increase the compression ratio of graphic formats
(thereby allowing pictures to load even faster) even more while maintaining the existing visual quality.. As a result of working on the project, a new one was born graphic image format - WebP. According to the project developers, the new format significantly reduces the size of images on the Internet, allowing sites to load even faster. And as you know, the faster a site loads, the better the attitude towards it on the part of search engines and, of course, on the part of users. That's why, very soon I will share with you secret information :-), how I accelerated my blog (acceleration work is still ongoing). You will learn several ways to optimize site loading, so don't miss this article. I announced a new article to you, and it’s time to find out how and with what open webP file? Have you downloaded a webp file from the Internet and is it already on your computer? From the above, you now know that this is a graphic image format and we will open it through the standard Windows viewer. In order to implement this feature, you need to install an additional plugin in the operating system. All further actions were tested by me personally on Windows 7 64-bit. But as the plugin developers assure, it should work open webp and on Windows XP (SP3), as well as Windows Vista. 1 Go to and download the plugin for opening webp from the following link, which is shown in the screenshot. Scroll down the page a little and click on the following link to download the add-on to your computer 2 After the plugin is downloaded, you need to double-click to start the installation process. The following dialog box will open, where you need to click “Next” 4 In the dialog box that opens, click “Typical” 5 And in the final window, click the “Install” button to start installing the plugin After the installation is complete, you will be prompted to go to the directory where there will be two graphic files - one in JPEG format and the other in WEBP format. Click on them and rejoice, now you can easily and easily view webp files in the standard Windows viewer. That's all for me. I hope today's little lesson is useful to you. P.S. The other day I went to the post office again, this time to pick up an Oldos winter overall for my little daughter Lisa, which was ordered from the online store. The order arrived quite quickly. The jumpsuit is just super. I’ll be sure to take a photo and show you later. Also, two hydrometers (determine air humidity) from China should arrive soon. I’ll hang it in the room to monitor the microclimate, otherwise there is an air humidifier, but it does not quite correctly (I think) show the humidity in the room. Nikolay () left a 500th anniversary comment on the blog. For this, Nikolay receives a small prize of 50 rubles to his e-wallet., as a fallback for browsers that don't support multiple file formats across an element
Google to the rescue
JPEG (180 KB)
PNG (213Kb)
WebP (91Kb)
Converting images toWebP
Option 1 -Photoshop
Option 2 -Onlineconverter
Embedding Image Files
How to see filesWebP on your computer
Who needs it? Pros and cons
PNG (124 Kb)
WebP (78Kb)
Where is it used?WebP
Working with WebP on Windows
What is WebP?
How to open a WebP file?
