WebP is a new image format created by Google as a replacement for JPEG, PNG, and GIF. It offers both lossy and lossless compression as well as transparency and animation support. WebP images are generally 25-34% smaller than JPEGs and 26% smaller than PNGs at an equivalent quality level. The document discusses what WebP is, the benefits of using it, how to convert images to the WebP format using command line tools, and how to display WebP images in Android Studio and Xcode.

1. WebP
Allan Shih
FEB 4, 2021

2. ● What is WebP?
● Why use WebP?
● How to convert images files to WebP?
● WebP Support in Android Studio
● Reference
Agenda

3. ● WebP is an image file format created by the web
performance team at Google, developed as a
replacement for JPEG, PNG, and GIF, while supporting
good compression, transparency, and animations.
What is WebP?

4. A new image format for the Web

5. ● WebP is an incredibly useful format because it offers both
performance and features.
● WebP lossless images are 26% smaller in size compared to
PNGs.
● WebP lossy images are 25-34% smaller than comparable
JPEG images at equivalent SSIM quality index.
Why use WebP?

6. PNG vs. WebP

7. JPG vs. WebP

8. ● WebP supports both lossy and lossless compression, as
well as transparency and animation.
Image Formats Comparison

9. Browser Support for WebP

10. Usage Relative

11. ● Use cwebp on the command line to convert PNG or
JPEG image files to WebP format.
○ Windows:
○ Linux / Mac:
How to convert images files to WebP?
for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )
for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

12. WebP Support in Android Studio

13. WebP Support in Android Studio
● Load .webp image using Glide:
val webp = "https://www.learningcontainer.com/wp-
content/uploads/2020/08/Large-Sample-webp-Image-download-for-
Testing.webp"
Glide.with(context).load(webp).into(imageView)

14. WebP Support in Xcode
● Load .webp image using SDWebImage.
import SDWebImage
imageView.sd_setImage(
with: URL(string: "http://www.domain.com/path/to/image.webp"),
placeholderImage: UIImage(named: "placeholder.png")
)

15. ● A new image format for the Web | WebP | Google
Developers
● Create WebP images | Android Developers
Reference