Sẽ mở trong thẻ mới
PDL AIAI Worker — trợ lý AI trực 24/7: trả lời khách, xử lý yêu cầu, báo cáo tự động
Front-End Dev

Tìm hiểu định dạng ảnh WebP

Phú DigitalĐăng 27.11.2022Cập nhật 27.11.2022≈ … phút đọc
Tim hieu dinh dang anh webp

WebP là một định dạng tệp hình ảnh do Google phát triển nhằm mục đích thay thế cho các định dạng tệp JPEG, PNG và GIF. Nó hỗ trợ cả nén mất dữ liệu và không mất dữ liệu, cũng như hoạt ảnh và độ trong suốt alpha.. Nó được tạo bởi nhóm VP8 của WebM Project.

Logo WebP

WebP có thể cho phép bạn tạo ra các hình ảnh độ phân giải cao với kích thước tệp nhỏ hơn, so với các định dạng hình ảnh khác như JPEG, PNG và GIF.

Nó có thể được sử dụng để tạo ra hình ảnh độ phân giải cao và hình ảnh độ nét cao.

Định dạng ảnh WebP được hỗ trợ bởi các trình duyệt web như Google Chrome, Firefox, Opera, Edge cùng như trình duyệt Cốc Cốc của Việt Nam chúng ta.

Có thể tải xuống các ứng dụng đọc và chuyển đổi các định dạng hình ảnh bao gồm WebP từ Google Play hoặc App Store.

Ưu điểm

  • Nén mất dữ liệu và không mất dữ liệu
  • Hoạt ảnh
  • Độ trong suốt alpha
  • Hỗ trợ độ phân giải cao

Nhược điểm

  • Các trình duyệt cũ và các thiết bị di động không hỗ trợ đầy đủ
  • Kích thước tệp có thể không thấp hơn JPEG

Các bạn có thể xem định dạng webp hỗ trợ những trình duyệt nào thông qua trang website dưới đây

https://caniuse.com/webp

Để an toàn khi sử dụng bạn có thể sử dụng thẻ picture để khi trình duyệt không hỗ trợ định dạng ảnh này sẻ chuyển sang chọn định dạng ảnh khác

<picture>
  <!-- Nếu browser hỗ trợ AVIF, thì load AVIF -->
  <source srcset="image.avif" type="image/avif">

  <!-- Nếu không hỗ trợ AVIF, thì load WebP -->
  <source srcset="image.webp" type="image/webp">

  <!-- Nếu không hỗ trợ cả 2 định dạng ảnh trên, fallback về ảnh jpeg -->
  <img src="image.jpg">
</picture>

Ngoài ra định dạng WebP thì AVIF và JPEG XL là hai định dạng hình ảnh cũng được đánh giá là tốt cho việc tối ưu tố độ website


JPEG XL là định dạng hình ảnh mới của ISO / IEC và ITU-T, có thể thay thế cho WebP, JPEG, JPEG 2000, BPG và AVIF. JPEG XL sử dụng hệ thống tính toán độ nét hình ảnh mới, cho phép nén và không nén với khả năng nén tốt hơn so với các định dạng hiện tại.

Tác giả
Phú Digital
Đội ngũ PDL Digital — triển khai website, giải pháp AI và digital marketing cho doanh nghiệp.
Cùng tần số

Bài cùng chủ đề

Tư vấn 1:1

Bạn đang có bài toán số cần gỡ?

Website · AI · Quảng cáo · 360VR — chuyên gia PDL phản hồi trong giờ làm việc (T2–T7, 8h–18h).
Xem giải pháp
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>

<div id="container-flipbook" style="display:flex; justify-content:center;">
    <div id="my-flipbook">
       <div class="page"> <img src="https://pdl.vn/wp-content/uploads/2025/05/AI-Google-Search.jpg" /> </div>
       <div class="page"> <img src="https://pdl.vn/wp-content/uploads/2025/05/wearable-tech-advertising.jpg" /> </div>
       <div class="page"> <img src="https://pdl.vn/wp-content/uploads/2025/05/multimodal-embeddings-digital-marketing.jpg" /> </div>
    </div>
</div>
#my-flipbook {
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    margin: 20px auto;
    background-color: #f0f0f0;
}

.page {
    background-color: white;
    overflow: hidden;
}

.page img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giúp ảnh vừa vặn trang sách */
}
// Đảm bảo thư viện đã sẵn sàng
function initFlipbook() {
    const el = document.getElementById("my-flipbook");
    if (!el || !window.St) return; // Nếu chưa thấy thư viện St thì thoát

    const pageFlip = new St.PageFlip(el, {
        width: 550,
        height: 733,
        size: "stretch",
        minWidth: 315,
        maxWidth: 1000,
        minHeight: 420,
        maxHeight: 1350,
        showCover: true,
        maxShadowOpacity: 0.5,
    });

    pageFlip.loadFromHTML(document.querySelectorAll(".page"));
}

// Chạy khởi tạo
if (document.readyState === 'complete') {
    initFlipbook();
} else {
    window.addEventListener('load', initFlipbook);
}
PDL · Tư vấn 1:1

Nhận tư vấn
miễn phí

Để lại thông tin, chuyên viên PDL sẽ liên hệ để hiểu nhu cầu và đề xuất giải pháp phù hợp ngân sách của bạn.

  • Phân tích nhanh hiện trạng website, quảng cáo, kênh bán hàng
  • Đề xuất lộ trình & báo giá minh bạch, rõ từng hạng mục
  • Không ràng buộc: nghe tư vấn xong mới quyết định
Giờ làm việc T2–T7 · 08:00–18:00

Chỉ mất khoảng 30 giây

Bạn cần tư vấn về

🔒 Thông tin được bảo mật, chỉ dùng để PDL liên hệ tư vấn.