Bộ chuyển đổi PNG sang WebP
PNG không mất dữ liệu nhưng cồng kềnh cho web. WebP hỗ trợ tính minh bạch và thường cung cấp các tệp nhỏ hơn nhiều cho logo, biểu tượng và hình minh họa. Chuyển đổi nội dung PNG cục bộ trước khi triển khai sang sản xuất.
Cách chuyển đổi PNG sang WebP
1. Tải PNG của bạn lên (có hoặc không có alpha).
2. Chọn cài đặt WebP mất dữ liệu hoặc không mất dữ liệu nếu được cung cấp.
3. So sánh kích thước đầu ra với PNG gốc.
4. Tải xuống tệp WebP.
Ví dụ
Biểu trưng trên trang web tiếp thị
Biểu trưng PNG 120 KB có thể trở thành WebP 40 KB có độ trong suốt giống hệt — tiêu đề nhanh hơn tải.
Bảng sprite trò chơi
Các sprite màu phẳng nén mạnh trong chế độ không mất dữ liệu WebP so với PNG.
Đồ họa cửa hàng ứng dụng
Thay thế ảnh chụp màn hình PNG lớn trong nội dung đi kèm trong đó thời gian chạy hỗ trợ WebP.
Khi nào nên chuyển PNG sang WebP
• Khi bạn cần độ trong suốt alpha trên web với byte nhỏ hơn.
• Khi di chuyển các giao diện người dùng PNG nặng sang các định dạng hiện đại.
• Khi Lighthouse gắn cờ các nội dung PNG quá khổ.
Khi nào cần giữ PNG
• Khi môi trường mục tiêu chỉ chấp nhận PNG (một số email và PDF) đường ống).
• Khi các nhà thiết kế cần trao đổi chỉnh sửa không mất dữ liệu phổ quát.
• Khi hỗ trợ Safari trên iOS cũ là một yêu cầu khó khăn mà không có dự phòng.
PNG và WebP đối với nội dung giao diện người dùng
Các nhà thiết kế xuất PNG theo thói quen. Đối với web sản xuất, WebP với tính minh bạch thường xuyên giảm một nửa kích thước truyền. Tự động chuyển đổi trong CI hoặc sử dụng công cụ này cho nội dung đặc biệt.
Chiến lược dự phòng
Sử dụng bộ ảnh/nguồn: WebP trước, PNG thứ hai. Hoặc phát hiện phía máy chủ hỗ trợ thông qua tiêu đề Chấp nhận. Không cung cấp WebP cho những máy khách không thể giải mã nó.
Chỉnh sửa quy trình làm việc
Giữ bản gốc PNG trong kho thiết kế. Tạo WebP chỉ để triển khai các tạo phẩm — hoàn nguyên các chỉnh sửa dễ dàng hơn từ các nguồn PNG không mất dữ liệu.
Câu hỏi thường gặp
Tính minh bạch có được bảo toàn không?
Có — WebP hỗ trợ kênh alpha tương tự PNG.
Không mất dữ liệu hoặc mất dữ liệu WebP?
Đồ họa có màu sắc phẳng thường phù hợp với WebP lossless. Ảnh được nhúng trong PNG có thể sử dụng WebP bị mất dữ liệu để có kích thước nhỏ hơn.
Màu sắc có thay đổi không?
Chế độ không mất dữ liệu phải khớp chính xác với PNG. Chế độ mất dữ liệu có thể hiển thị những khác biệt nhỏ về độ dốc.
Tôi có thể sử dụng WebP trong hình nền CSS không?
Có trong tất cả các trình duyệt hiện đại. Chỉ cung cấp dự phòng PNG nếu số liệu phân tích hiển thị lưu lượng truy cập cũ.
Xử lý cục bộ?
Có — các tệp không bao giờ rời khỏi trình duyệt của bạn.
Tốt hơn SVG?
Đối với các biểu tượng đơn giản, SVG thường nhỏ nhất và có tỷ lệ vô hạn. WebP phù hợp với tác phẩm nghệ thuật raster và hình ảnh có alpha.