![](https://forum.laox.la/assets/files/2019-09-25/1569386883-450322-screen-shot-2019-09-25-at-114523-am.png)
ຕາມທີ່ໄດ້ອ່ານມາ WebP ເປັນຮູບທີ່ມີການ compress ແບບ lossy ຫຼື lossless ໄດ້. ເລີຍເຮັດໃຫ້ຮູບພາບໃນ WebP format ແມ່ນຈະມີຂະໜາດນ້ອຍກ່ວາ PNG/JPG 30 - 50% ຫຼື ອາດຈະນ້ອຍກວ່າໃນຫຼາຍໆກໍລະນີເລີຍ.
ອ່ານເພີ່ມເຕີມຈາກ Google
ວິທີການໃສ່ຮູບ WebP ໃນ html
ປ່ຽນຈາກ
<img src="img.png">
.
.
.
ມາເປັນ
<picture>
<source srcset="img.webp" type="image/webp" />
<source srcset="img.jpg" type="image/jpeg" /> <!-- ເຜື່ອກໍລະນີ browser ຂອງຜູ້ໃຊ້ເປັນ version ເກົ່າລະໃຫ້ໂຫຼດ jpg ຫຼື png -->
<img src="img.jpg">
</picture>
ວິທີການໃສ່ຮູບ WebP ໃນ project React
ຕິດຕັ້ງ react-image-webp ໂມດູລ
npm install --save react-image-webp
ຫຼັງຈາກໃນ ໃນ Project ໃຫ້ import Image ມາຈາກ react-image-webp
ຕົວຢ່າງ
![](https://forum.laox.la/assets/files/2019-09-25/1569387665-103742-screen-shot-2019-09-25-at-115829-am.png)
ແລ້ວຫຼັງຈາກນັ້ນກໍເອິ້ນໃຊ້
![](https://forum.laox.la/assets/files/2019-09-25/1569387716-345099-screen-shot-2019-09-25-at-115922-am.png)
ສໍາລັບວິທີການເຮັດຮູບ webp ແມ່ນມີ 2 ວິທີແນະນໍາ
1. ໄປທີ່ເວັບ https://webp-converter.com/ ແລ້ວເລືອກຮູບກັບ % ຂອງ quality (ແນະນໍາ 80)
2. ໃຊ້ libwebp ຈາກ google ໂດຍຕົງເລີຍຄື ເຂົ້າໄປດາວໂຫຼດທີ່ WebP ເລືອກກົດ Link ຕາມ platform (Linux, Windows, Mac OS X)
ສໍາລັບວ່າເປັນຫຍັງຕ້ອງ webp ລອງມາສັງເກດຮູບລຸ່ມນີ້
ກ່ອນ Optimized ມາໃຊ້ຮູບ WebP
![](https://forum.laox.la/assets/files/2019-09-28/1569680535-22864-screen-shot-2019-07-26-at-10841-am.png)
![](https://forum.laox.la/assets/files/2019-09-28/1569680535-206491-screen-shot-2019-07-26-at-10845-am.png)
ຫຼັງ Optimized ມາໃຊ້ຮູບ WebP
![](https://forum.laox.la/assets/files/2019-09-28/1569680558-876807-screen-shot-2019-07-26-at-13948-am.png)
![](https://forum.laox.la/assets/files/2019-09-28/1569680559-59593-screen-shot-2019-07-26-at-13952-am.png)