Ghi chú từ đội ngũ về tay nghề, định dạng và những quyết định nhỏ đằng sau một bản cắt tròn tốt.
Cropper.js v2 tạo mặt nạ tròn như thế nào
Cropper.js v2 được cung cấp dưới dạng Web Component, với các phần tử cropper-canvas, cropper-image và cropper-handle tạo nên sân khấu. Việc cắt hình tròn không phải là mẹo border-radius CSS, mà là một thao tác kết hợp canvas (destination-in) được áp dụng tại thời điểm xuất file. Người dùng nhìn thấy toàn bộ ảnh với lớp phủ tối, và vùng chọn hình tròn được tính toán trực tiếp từ vị trí tay điều khiển lưu trong trạng thái nội bộ của component. Khi nhấn Lưu, một canvas tạm được tạo ở kích thước đã chọn, ảnh được vẽ lên đó, và mặt nạ kết hợp loại bỏ tất cả những gì bên ngoài vòng tròn. Với PNG, WebP và AVIF, kết quả bao gồm kênh alpha. Với JPEG, các pixel trong suốt được tô màu đặc trước khi mã hóa vì JPEG không có đặc tả kênh alpha. Chi tiết lib: Cropper.js v2, giấy phép MIT, GitHub fengyuanchen/cropperjs.
PNG, WebP, AVIF và JPEG cho ảnh cắt tròn, khi nào chọn loại nào
PNG không mất dữ liệu, được hỗ trợ phổ quát, file lớn hơn (xuất vòng tròn 512 nhân 512 từ ảnh 8 megapixel trung bình 180 đến 350 KB tùy độ phức tạp của ảnh). WebP gần như không mất dữ liệu ở chất lượng 85 đến 90, nhỏ hơn PNG 25 đến 40 phần trăm, và được hỗ trợ bởi tất cả trình duyệt hiện đại từ năm 2023. AVIF sử dụng mã hóa nội AV1, thường nhỏ hơn WebP 40 đến 50 phần trăm ở chất lượng tương đương, nhưng bộ mã hóa WASM @jsquash/avif mất nhiều thời gian hơn đáng kể, khoảng 3 giây trên máy tính và lên đến 30 giây trên điện thoại tầm trung cho ảnh 8 megapixel. JPEG mã hóa nhanh nhất (khoảng 400 mili giây trên máy tính) nhưng không có kênh alpha, chỉ dùng khi nền tảng đích từ chối file trong suốt. Hầu hết người dùng nên chọn PNG để đảm bảo, hoặc WebP để giảm dung lượng.
Hướng dẫn kích thước theo nền tảng, ảnh đại diện tròn thực sự có nghĩa gì
LinkedIn hiển thị ảnh hồ sơ tối thiểu 400 nhân 400 pixel, dạng tròn trên trang hồ sơ và nhỏ hơn (khoảng 48 pixel) trong feed. Discord chấp nhận biểu tượng guild (server) tối đa 512 nhân 512 pixel, hiển thị tròn. Avatar người dùng Discord là 128 nhân 128 trong danh sách thành viên server, và 32 nhân 32 trong chat. Instagram hiển thị ảnh hồ sơ tròn khoảng 110 pixel trên mobile profile, 32 pixel trong thumbnail feed. Zalo chấp nhận ảnh đại diện tối đa 512 nhân 512 cho tải lên, hiển thị tròn trong danh sách liên hệ và nhóm. Công cụ xuất ở độ phân giải ảnh gốc. Nếu cần kích thước output chính xác, hãy thay đổi kích thước ảnh trước bằng công cụ resize trước khi cắt tròn. Cách này cho bạn output chính xác pixel mà không có hiện tượng upscaling.
HEIC và giới hạn chỉ dành cho Safari được giải thích
HEIC là định dạng container của Apple sử dụng nén HEVC. Safari 17 trở lên xử lý HEIC natively qua createImageBitmap, đó là lý do cắt tròn ảnh chụp từ iPhone hoạt động trên Safari mà không cần chuyển đổi. Chrome, Firefox và Edge không triển khai createImageBitmap cho HEIC tính đến năm 2026, chúng trả về lỗi giải mã. Công cụ kiểm tra magic bytes khi tải lên. Nếu phát hiện file HEIC trên trình duyệt không phải Safari, thông báo lỗi thân thiện sẽ gợi ý chuyển sang JPG trước. Cách giải quyết cho người dùng không dùng Safari: mở ảnh trên iPhone trong ứng dụng Ảnh, chia sẻ dưới dạng JPG (có trong menu chia sẻ), hoặc dùng công cụ png-to-jpg nếu đã có file HEIC trên máy tính. Lưu ý: file .heic đổi tên thành .jpg vẫn bị từ chối vì kiểm tra magic-byte phát hiện việc đổi tên.
Tại sao vùng bên ngoài vòng tròn trong suốt và tại sao điều đó quan trọng
Khi xuất PNG hoặc WebP cắt tròn, các pixel bên ngoài ranh giới vòng tròn có giá trị alpha bằng 0 (hoàn toàn trong suốt). Trên các nền tảng hiển thị avatar dạng tròn, nền trong suốt trở nên vô hình và màu nền của nền tảng hiển thị xuyên qua một cách sạch sẽ. Trên các nền tảng hiển thị file đầy đủ (như xem trước file đính kèm hoặc album ảnh), vùng trong suốt hiển thị dạng ô cờ. Nếu bạn dán vòng tròn vào công cụ thiết kế như Figma hoặc Canva, bạn có thể đặt lớp lên bất kỳ màu nền nào mà không có viền trắng xung quanh. Tùy chọn JPEG tồn tại cho các trường hợp trong suốt gây vấn đề: một số ứng dụng email, một số trình tải lên ảnh CMS và một số nền tảng cũ hơn xóa trong suốt và thay thế bằng màu đen. Dùng JPEG với màu nền đã chọn sẽ tránh được điều đó.
Dùng tab Network trong DevTools để xác minh xử lý trong trình duyệt
Mở DevTools trình duyệt (F12 hoặc chuột phải rồi chọn Kiểm tra), vào tab Network, nhấp Xóa để xóa các mục trước đó, sau đó tải một ảnh lên công cụ cắt tròn và kéo các tay điều khiển. Xem tab Network trong khi tải lên và kéo. Các yêu cầu duy nhất xuất hiện là tải tài nguyên trang (JS, CSS, font) trước khi tải lên, không có yêu cầu POST hoặc PUT mới mang dữ liệu ảnh sẽ xuất hiện. Sau khi nhấn Lưu, một yêu cầu đến URL blob xuất hiện trong tab trong tích tắc, đó là trình duyệt giải quyết blob cục bộ, không phải gửi dữ liệu đến server. Bước xác minh này có thể thực hiện trên Chrome, Firefox, Safari và Edge, và là cách trực tiếp nhất để xác nhận ảnh không rời khỏi thiết bị của bạn.
