Client-Side Image Compression in the Browser | JavaScript Tutorial
HTML-код
- Опубликовано: 10 сен 2024
- 👉 Source code: openjavascript...
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to do client-side image compression to .webp or .jpeg format in the browser with vanilla JavaScript using the HTML5 Canvas API and upload the result to a server or download in the client.
#javascript #image #compression #app #webp #jpeg #canvas #html5 #frontend #webdevelopment #tutorial #javascript_tutorial
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Thanks for watching!
👉 Source code: openjavascript.info/2022/12/22/compress-an-image-file-in-the-browser-with-javascript/
It works very well. Thank you!
Thank you very much. Is it a good idea to resize an uploaded image on the client side? Could it affect the quality of the image?
Would be nice to see a video about resizing uploaded images on the client side anyway. thx in advance.
Great question!
Actually, the answer is yes: When you use the HTML5 canvas, the algorithm used to edit the images can vary by browser, affecting the quality. So, if consistently high image quality is your goal, you wouldn't want to rely on the standard algorithm.
You can still do client-side editing in the browser consistently, however, by bringing an algorithm to the browser that will result in consistent high-quality image output, most easily by using a library (such as pica).
And thanks for the resize tutorial suggestions. I'll keep this in mind for a future one.
@@OpenJavaScript Thank you very much.
@@dodokwak Welcome!
do you have ad on your channel? are you monetized cuz i dont skip ads on your videos so i can show my support
Hi Jay!
Thanks for thinking of me! Yes, the channel has ads and is monetized.
Watching the ads is a great way to support the channel.
Really appreciate your support :)