Knowledge Base
medianova.comSupportLog in
  • Welcome to the Medianova Knowledge Base
  • Getting Started
    • Concepts
    • Start your Free Trial
  • Products
    • Security
      • DDoS Protection
      • SSL/TLS Encryption
        • How to upload and manage SSL Certificates?
        • How to Extract CRT and KEY Files from a PFX Certificate
        • How can I use Free SSL?
        • FAQ
      • Web Application Firewall (WAF)
        • How to activate WAF?
        • Analytics
      • Rate Limiting
      • Hotlink Protection
      • IP Restriction
      • Geoblocking
      • FAQs
    • Performance / CDN
      • Static Content Delivery
        • Create Small Resource
        • Create Large Resource
        • Integrating Static CDN Resource
        • Configuration Basics
          • Medianova IP Blocks
        • Advanced Configuration
          • Origin Settings
            • Advanced Origin Settings
            • Rewrite Origin URLs
            • Origin SNI Request
            • Redirect Handle From Origin
            • Origin Response Timeout
          • CNAME
          • Caching
            • Edge Cache Expiration
            • Browser Cache Rule
            • Query String Caching
            • Etag Verification
            • Error Status Code Cache Expiration
            • Shared Cache
            • Stale Cache
            • Robots.txt file
            • Range Based Caching
          • Headers
            • CORS Header
            • Custom Header
            • X-CDN Header
            • Origin Host Header
            • HTTP Strict Transport (HSTS) Protection
            • X-Frame Options
            • X-XSS Protection
            • X-Content Type Options
          • Purge
          • Prefetch
          • Page Rules
            • Manage Page Rules
            • Page Rules Settings
          • Compression
            • How to Configure Gzip and Brotli
        • Website Framework Integrations
          • Magento CDN Integration
          • Wordpress CDN Integration
          • Phalcon CDN Integration
          • CakePHP CDN Integration
        • Analytics
      • Dynamic Content Acceleration
        • Create Dynamic Resource
        • Integrating Dynamic CDN Resource
        • Aksela Test Steps
        • Advanced Configuration
          • Origin Settings
            • Advanced Origin Settings
            • Rewrite Origin URLs
            • Origin SNI Request
            • Redirect Handle From Origin
            • Origin Response Timeout
          • Caching
            • Edge Cache Expiration
            • Browser Cache Rule
            • Query String Caching
            • Etag Verification
            • Error Status Code Cache Expiration
            • Shared Cache
            • Stale Cache
            • Disallow Cookie Base Cache
            • Cookie Base Cache
            • Header Base Cache
            • Header Value Base Cache
            • MNUID Cookie Base Cache
            • Mobile Redirect
          • Headers
            • CORS Header
            • Custom Header
            • X-CDN Header
            • Origin Host Header
            • HTTP Strict Transport (HSTS) Protection
            • X-Frame Options
            • X-XSS Protection
            • X-Content Type Options
          • Purge
          • Prefetch
          • Page Rules
          • Compression
        • Analytics
      • Streaming Content Delivery
        • Create Streaming Resource
        • Advanced Configuration
          • Origin Settings
            • Redirect Handle From Origin
            • Origin Response Timeout
          • Headers
            • CORS Header
            • Custom Header
            • X-CDN Header
            • Origin Host Header
          • Stream Management
        • Analytics
      • API Caching
      • Private CDN
      • Image Optimization and WebP
        • What is Image Optimization and How Does It Work?
        • What is WebP and How Does It Work?
        • How to Activate Image Optimization and WebP?
        • Analytics
      • FAQs
    • Object Storage / Stook
      • What is Stook?
      • How to Create Stook?
      • How to Connect Bucket?
      • Access Key Management
      • Stook Integration and Usage Guides
        • Migrating Data to Stook Using Rclone
        • Data Transfer to Stook with Cyberduck
        • How to use the AWS SDK for Laravel with Stook?
        • How to use the AWS SDK for PHP with Stook?
        • How do I use the AWS SDK for .NET with Stook?
        • Stook Storage User Guide for AWS CLI
        • How to use AWS SDK for JavaScript with Stook?
        • How do I use Stook with the AWS Java SDK?
        • Using Pre-Signed URL PHP with Stook
        • Using Pre-Marked URL NODEJS With Stook
    • Analytics (MN Logz)
      • Real-Time Logpush
      • Raw Logs
  • Account & Billing
    • Managing Account and Organizations
      • Create new organization
      • Invite user
      • Changing Cloud Panel password
      • Access Controls and Authentication
    • Subscription and Billing
      • Packages
        • Free Trial
        • Starter
        • Growth
        • Enterprise
        • Add-ons
      • Policy
      • Upgrade & Downgrade Procedures
      • Changing your subscription package
      • Payment Info
      • Invoices
  • API Documentation
    • Authentication
    • Security
      • Web Application Firewall (WAF)
      • SSL/TLS
      • Always Use HTTPS Settings
      • Origin Basic Authentication
      • Secure Token
      • Bot Protection
      • Hotlink Protection
      • User Agent ACL
      • IP Restriction ACL
      • Geoblocking
    • Performance / CDN
      • Resources
      • Origin Settings
      • CNAME & SSL
      • Caching
      • Headers
      • Image Optimization & WebP
      • Page Rule
      • Purge
      • Prefetch
      • Stream Management
    • Object Storage / Stook
    • Analytics
      • WAF Analytics
  • Support and Troubleshooting
    • Common Issues and Solutions
      • Troubleshooting Common Setup Issues
      • Troubleshooting Performance Problems
    • Contacting Customer Support
  • Glossary
    • Definition of Important CDN Terms
    • Acronyms and Abbreviations
    • Definition of HTTP Status Error Codes
Powered by GitBook
LogoLogo

© 2025 Medianova. All rights reserved.

On this page

Was this helpful?

Export as PDF
  1. Products
  2. Performance / CDN
  3. Image Optimization and WebP

What is WebP and How Does It Work?

WebP is a modern format that provides high image quality in a small size, providing a faster and more interactive user experience even if your website has many images. Google developed WebP in 2010 to reduce the difficulties associated with large file size when storing good quality images. Google actively provides WebP, which is suitable for both lossy and lossless techniques. Google’s PageSpeed Insights tool recommends switching from JPEG and PNG to WebP format. This format is also actively used by many large technology companies.‏‏‏‏‏‏‏‏

‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏‏‏‏‏‏‏‏‏WebP is a modern image format that seamlessly combines the best of other formats, meaning WebP not only supports lossy and lossless compression, but also animation (like GIF) and alpha transparency (like PNG).

Benefits of WebP

Google recommends this format because it provides a superior lossy or lossless compression for WebP images. WebP technology can help you create lower-sized, more vibrant images that make web pages load faster and lighten page loads. It can also be used in many situations where popular formats such as webP animation, JPEG, PNG, GIF are used.

All this is the main reason why WebP has become a common image format today. Most leading browsers have started to support this format to help webmasters deliver richer and faster web performance.

WebP’s unique compression systems can display images at approximately two-thirds the size of the same image created in JPEG or PNG format.

With WebP, you can save images in both lossless and lossy format at a smaller file size than both PNG and JPEG files. This is great news for you if you are trying to optimize and speed up a website with legacy image formats.

This image format can make a big difference if your users have low bandwidth and slow connection speeds and you are running a lot of images on your website.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images with the same SSIM quality index.

Lossless WebP supports alpha transparency at the expense of only 22% additional bytes. Where lossy RGB compression is acceptable, lossy WebP also supports transparency, providing file sizes up to 3x smaller than PNG.

WebP therefore helps transmit much smaller file sizes than traditional image formats.

PreviousWhat is Image Optimization and How Does It Work?NextHow to Activate Image Optimization and WebP?

Last updated 5 months ago

Was this helpful?