It's said that a picture is worth a thousand words, but online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a Web page's total size on average. With this in mind, image optimization is key, especially when you consider that up to 40% of users will abandon a request if it doesn't load within 3 seconds. The problem with image optimization comes when designers want to keep image file sizes small without sacrificing image quality. Past attempts to create new optimized image file types better than the standard JPEG, PNG and GIF formats have been unsuccessful.
WebP is an image file type that was created in 2010 and is currently being developed by Google. This image format provides lossless and lossy compression to images on the Internet. Several big names are campaigning for the use of WebP, most notably Google, Facebook, and Ebay.
At Aristotle, we are always experimenting with techniques that improve website performance for our clients, so we ran A/B tests to understand WebP's impact on image quality and how to best implement it in our clients' projects.
A major reason we considered using WebP is the smaller file size. According to Google:
我们考虑使用WebP的主要原因是文件较小。 根据Google的说法：
*WebP lossless image files are 26% smaller than PNGs. * * WebP无损图像文件比PNG小26％。 *
*WebP lossy images files are 25-34% smaller than JPEG images at equivalent SSIM index. * *在同等的SSIM索引下，WebP有损图像文件比JPEG图像小25-34％。 *
WebP supports lossless transparency (also known as alpha channel) with just 22% more bytes.
WebP支持无损透明(也称为Alpha通道)，其字节仅增加22％。
Aristotle's tests have found pros and cons to the WebP image format:
Aristotle的测试发现了WebP图像格式的优缺点：
Pros
Cons
* Smaller file size
* Weak browser support
* Different compression algorithm
* Artifacting has plastic appearance
* Smoother color gradations
* Poor exporting interface
* Alpha channel mask
优点
缺点
*较小的文件大小
*浏览器支持薄弱
*不同的压缩算法
*伪影具有塑料外观
*更平滑的颜色渐变
*不良的导出界面
* Alpha通道遮罩
画面质量 (Image Quality)
WebP uses a new compression algorithm, so artifacting (distortion or degradation) looks different than with other file types. WebP does a nice job maintaining crisp edges in a photo but, of course, loses detail and textures as you would expect in a lossy file. Where a comparable JPEG file exhibits jittery artifacting in solid areas, WebP boasts smooth gradations down to the lowest quality settings. One downside of this is that human faces can take on a plastic or posterized appearance at lower settings.
There are a few other things to consider with the WebP image format:
WebP图像格式还需要考虑其他一些事项：
Compression settings don't match up "one-to-one" with JPEGs. Don't expect a 50% quality JPEG to match a 50% quality WebP. Quality drops pretty sharply on the WebP quality scale, so it's best to start at a high quality and work your way down.
Another game-changing plus is the ability to add an alpha channel mask, much like a PNG. Unlike its lossless counterpart, however, you can often squeeze a usable WebP image to around 1/10 the size of its PNG equivalent. This is the real stand-out use for WebP, ushering in an army of options and features that would otherwise bring a website to a crawling halt with unwieldy file sizes. One real-world example compressed an 880kb PNG (24-bit with alpha channel) down to 41kb — a file savings of a 95%. While this is not the norm, it does illustrate the possibilities.
To further reduce the file size, we recommend omitting the metadata by unchecking "Save Metadata" in the dialogue. For even further compression savings, select "lossy alpha channel." Quality settings for the alpha channel mirror those of the image. For example, a 50% quality image will have a 50% quality lossy alpha channel. In our testing we expected artifacting around the masked edge, but there were also noticeable compression changes to the entire image. We certainly consider it an option to further shrink file sizes, but recommend closely monitoring the image quality when doing so. Also watch for unwelcome banding in the alpha channels with gradated fades.
We were excited to see that a Photoshop plugin-in was available for the WebP format. This allows an easy way to dial in quality settings for WebP images. The interface of the plug-in leaves something to be desired since it hasn't been fully adopted by Adobe Photoshop. At present, you cannot preview an image to assess quality settings, which is a major downside. As a workaround, you can use the Google Chrome browser for a quick comparison between files. It's also a bit awkward to access the save dialogue. To save time, we recommend setting up a keyboard shortcut to avoid repeated visits to the "Save as" drop down menu. In spite of these caveats, it's still worth the trouble.
With significant file size savings, good quality and game-changing alpha channel, WebP seems like a real contender among other image formats. While test results were optimistic, oddly there was no clear winner between formats. WebP often performed circles around the other formats, but JPEGs or 8-bit PNGs still occasionally beat WebP in size and/or quality. Be sure to do plenty of testing on your own before implementing WebP, as it may not be ideal for your needs.
After Aristotle designers determined that WebP would be an efficient tool to use in their process, we then turned to our developers to test implementation. WebP is only natively supported in Chrome, Opera, Opera Mini, Android Browser and Chrome for Android. Firefox, IE and Safari don't have native support, although Firefox has a history with WebP. Luckily, there are a few workarounds for the lack of browser support.
在亚里斯多德的设计师确定WebP将是在他们的过程中使用的高效工具之后，我们便选择了开发人员来测试实现。 仅Chrome，Opera，Opera Mini，Android浏览器和Chrome for Android本身支持WebP。 Firefox，IE和Safari没有本机支持，尽管Firefox具有WebP的历史。 幸运的是，由于缺乏浏览器支持，有一些解决方法。
Through our research we found three viable options for implementing WebP images. We wanted to make sure that we used the best option in terms of page size, keeping in mind that Speed Index is a key metric, and taking into account any Javascript polyfills needed. A polyfill is Javascript code that is implemented to provide technology that is not natively provided in a browser.
We ran four experiments to consider which direction to go.
我们进行了四个实验，以考虑要走的方向。
The first test used a normal JPEG as a control, and the other three tests implemented the options listed below. We used a JPEG image and a WebP image of similar quality (269 kb JPEG and a 52 kb WebP). Here you can see the results from all four tests.
In test two, we included a 67kb WebP polyfill provided by Dominik Homberger. It allows WebP implementation on all major browsers, even IE 6 and up. This is a helpful polyfill because it doesn't require you to change the syntax of
in existing code, just change .jpeg or .png to .webp and the polyfill will do the work for you.
Our next approach was to use the Picturefill polyfill to allow the use of
, even if
is not natively supported. This allows developers to use
to use WebP if the browser supports the image format and fallback to a JPEG, PNG or other image type if WebP is not supported. (There are other amazing powers the
holds, but that's not relevant to this article.)
The fourth test used code in the .htaccess of the server to implement WebP. This option was provided by Vincent Orback. Using this approach, the .htaccess code will look for a WebP version of each image on a page. If the browser supports WebP and there's a WebP image available it, will use the WebP image rather than the JPEG or PNG. This is helpful and saves considerable time since you don't have to change the syntax of
in the code or the extension of your images to .webp.
After reviewing the data, we determined that the WebP polyfill (Test 2) was the smallest implementation that worked on all browsers, but we weren't impressed with the Speed Index metric for this method.
We also noticed that on iOS devices, file sizes were 100 kb more than the other devices. It seems that on iOS 5.1, IE 8, and IE 9 the WebP image gets downloaded 3 times. While the 2 extra requests are not ideal, this is still smaller than the JPEG equivalent. We haven't tested this on updated iOS versions so there's a chance this may be resolved for iOS 6 and later. We are inclined to use this implementation initially because of the better browser support.
While the WebP polyfill is a great patch for now, we know that this implementation won't be best in the future if other browsers begin supporting WebP. Our hope is that Safari, Firefox, and IE (particularly the Spartan Browser coming in Windows 10) will embrace the WebP image format soon. Once we begin seeing a larger adoption, we will implement the method used in Test 3, using the
to serve WebP images for browsers that support it and serve a JPEG or PNG file when WebP isn't supported. We plan to implement this method once Firefox begins support because the majority of visitors to our clients' websites use Chrome and Firefox.
WebP won't push JPEG or PNG out of the picture, but it is a superb tool to add to your arsenal. Get ready to welcome WebP and be prepared to do some of your own testing and comparison with each new project!
WebP是由Google开发的图像格式，提供无损和有损压缩，以减少在线图像的文件大小。WebP图像文件比PNG小26%，比同等质量的JPEG小25-34%。虽然它在某些情况下可能导致图像质量下降，但支持透明度，并且在压缩设置和JPEG不完全对应。WebP在Chrome、Opera和Android浏览器中受到原生支持，但在Firefox、IE和Safari中需要polyfill。尽管存在浏览器兼容性问题，但WebP仍然是图像优化的一个强有力选择。
扫一扫
4548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
