---
# How encode images to webp in browser with vanilla js without plugins

**URL:** https://modul-r.codekraft.it/2022/02/how-encode-images-to-webp-in-browser-with-vanilla-js-without-plugins/
Date: 2022-02-26
Author: Erik
Post Type: post
Summary: Some days ago, while using a react repo I discovered this method that uses canvas to convert images to webp. Currently it’s not perfect and in some browsers won’t work on some browsers (guess which one: safari) and has a limited support for icc profiles / color space. You can find more info about project […]
Categories: Blog
---

Some days ago, while using a react repo I discovered this method that uses canvas to convert images to webp. 

Currently it's not perfect and in some browsers won't work on some browsers (guess which one: safari) and has a limited support for icc profiles / color space. You can find more info about project progress [here](https://github.com/WICG/canvas-color-space/blob/main/CanvasColorSpaceProposal.md). 

HTML Canvas works amazingly fast and without any plugin, it needs only browser while many other method requires NodeJS or PHP GD to work.

the trick is to upload an image to a canvas and then export it with `canvas.toDataURL(image/webp, quality).`

  See the Pen 
  Encode to webp images in browser with canvas (without plugins) by erikYO! ([@erikyo](https://codepen.io/erikyo))
  on [CodePen](https://codepen.io).

If you don't know what **webp **is I invite you to have a [look here](https://developers.google.com/speed/webp), webp provides superior **lossless and lossy** compression for images on the web (eg. allows a reduction of up to 1000% compared to a transparent png). 

So if you haven't already done so, it's time to think about how to convert your site images to webp (Modul-r has a [gulp task](https://modul-r.codekraft.it/2019/06/environment-setup/) for this purpose).

*One last thing… it doesn't work with **avif **format, yet at least!*

---

## Categories

- Blog

---

## Navigation

- [About WordPress](https://modul-r.codekraft.it/wp-admin/about.php)
- [Get Involved](https://modul-r.codekraft.it/wp-admin/contribute.php)
- [WordPress.org](https://wordpress.org/)
- [Documentation](https://wordpress.org/documentation/)
- [Learn WordPress](https://learn.wordpress.org/)
- [Support](https://wordpress.org/support/forums/)
- [Feedback](https://wordpress.org/support/forum/requests-and-feedback)
- [Codekraft Modul R](https://modul-r.codekraft.it/wp-admin/)
- [Plugins](https://modul-r.codekraft.it/wp-admin/plugins.php)
- [Themes](https://modul-r.codekraft.it/wp-admin/themes.php)
- [Widgets](https://modul-r.codekraft.it/wp-admin/widgets.php)
- [Menus](https://modul-r.codekraft.it/wp-admin/nav-menus.php)
- [Background](https://modul-r.codekraft.it/wp-admin/themes.php?page=custom-background)
- [Header](https://modul-r.codekraft.it/wp-admin/themes.php?page=custom-header)
- [Live](https://modul-r.codekraft.it/wp-admin/admin.php?page=wc-settings&tab=site-visibility)
- [Customize](https://modul-r.codekraft.it/wp-admin/customize.php?url=https%3A%2F%2Fmodul-r.codekraft.it%2Fproduct%2Flogo-collection%2F)
- [1414 updates available](https://modul-r.codekraft.it/wp-admin/update-core.php)
- [2,1662,166 Comments in moderation](https://modul-r.codekraft.it/wp-admin/edit-comments.php)
- [New](https://modul-r.codekraft.it/wp-admin/post-new.php)
- [Media](https://modul-r.codekraft.it/wp-admin/media-new.php)
- [Page](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=page)
- [Product](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=product)
- [Order](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=shop_order)
- [User](https://modul-r.codekraft.it/wp-admin/user-new.php)
- [Edit product](https://modul-r.codekraft.it/wp-admin/post.php?post=255&action=edit)
- [SEONo index](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_dashboard)
- [Front-end SEO inspectorPremium](https://yoa.st/admin-bar-frontend-inspector?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Semrush](https://yoa.st/admin-bar-semrush?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Wincher](https://yoa.st/admin-bar-wincher?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Google trends](https://yoa.st/admin-bar-gtrends?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Learn more SEO](https://yoa.st/admin-bar-learn-more-seo?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Improve your blog post](https://yoa.st/admin-bar-improve-blog-post?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Write better content](https://yoa.st/admin-bar-write-better?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Help](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_page_support)
- [Settings](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_page_settings)
- [Tools](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_tools)
- [Plans](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_licenses)
- [Upgrade](https://yoa.st/admin-bar-get-premium-woocommerce?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Autoptimize](https://modul-r.codekraft.it/wp-admin/options-general.php?page=autoptimize)
- [Performance](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&_wpnonce=a6493b7534)
- [Purge All Caches](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_all&_wpnonce=a6493b7534)
- [Purge Current Page](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_post&post_id=255&force=true&_wpnonce=a6493b7534)
- [Page Cache](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_pgcache&_wpnonce=a6493b7534)
- [Database](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_dbcache&_wpnonce=a6493b7534)
- [Object Cache](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_objectcache&_wpnonce=a6493b7534)
- [Feature Showcase](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_feature_showcase&_wpnonce=a6493b7534)
- [General Settings](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_general&_wpnonce=a6493b7534)
- [Manage Extensions](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_extensions&_wpnonce=a6493b7534)
- [FAQ](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_faq&_wpnonce=a6493b7534)
- [Support](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_support&_wpnonce=a6493b7534)
- [Notifications](https://wordpress.com/reader/notifications)
- [Howdy, Erik](https://modul-r.codekraft.it/wp-admin/profile.php)
- [Log Out](https://modul-r.codekraft.it/wp-login.php?action=logout&_wpnonce=bb28826117)
- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)

---

## Footer Links

- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)