Ảnh lớn đã nén vẫn là lựa chọn lớn
Ô ảnh nhỏ không làm tệp tải về nhỏ hơn. Nếu ai cũng nhận cùng ảnh đầy đủ, điện thoại vẫn có thể tải điểm ảnh bố cục không dùng. Nén và lựa chọn đáp ứng giải quyết hai phần khác nhau.
Quy trình cho website giải thích chuẩn bị, còn hướng dẫn phân phối ảnh nối việc đó với chẩn đoán hiệu năng. Thử nghiệm này theo một ảnh tới lựa chọn thật của trình duyệt, không coi điểm số là kết quả.
Chuẩn bị biến thể rồi quan sát trình duyệt
Chúng tôi tạo các bản cùng tỷ lệ trong trình sửa ảnh ngoài trước khi nén; Bitinz không đổi kích thước. Ngày 2026-10-29, mỗi bản được xử lý cục bộ ở Cân bằng. Kích thước, byte và mã kiểm tra xác định biến thể dùng trong thử nghiệm.
Trang cục bộ cung cấp biến thể bằng srcset và quy tắc sizes phù hợp. Ghi lại chiều rộng khung nhìn, mật độ và tài nguyên đã chọn. Đây là đo dung lượng ảnh, không phải toàn trang hay mạng di động mô phỏng. Chính sách biên tập mô tả bằng chứng.
Các tệp chuẩn bị sẵn để trình duyệt chọn
So sánh dung lượng ở đây rồi xem bản ghi trình duyệt được liên kết trong nguồn. Trình duyệt chỉ chọn được tệp trang thực sự cung cấp.
| Ảnh | Điểm ảnh | Đầu ra | Mức nén | Trước | Sau | Giảm được |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Cân bằng | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Cân bằng | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Cân bằng | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Cân bằng | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB tương đương 1000 byte.
Ảnh trình duyệt thực sự tải về
| Khung nhìn (CSS px) | Mật độ điểm ảnh | Chiều rộng hiển thị (CSS px) | Chiều rộng đã chọn (px) | Dung lượng ảnh |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Mỗi hàng dùng một ngữ cảnh trình duyệt mới và tắt bộ nhớ đệm. Trường hợp rộng nhất có mật độ cao chọn bản lớn nhất vì tập ảnh cung cấp thiếu kích thước trung gian tại đó. Nên thử thêm một bản ở giữa; trình duyệt chỉ chọn được tệp có trong danh sách.
Kiểm tra ảnh được chọn ở tỷ lệ hữu ích
Chi tiết ảnh nguồn
Chi tiết ảnh đã nén
Xem ảnh trên màn hình nhỏ và màn hình mật độ cao. Biến thể nhỏ nhất không tốt nhất nếu ảnh trông mờ. Biến thể lớn cũng không hợp lý chỉ vì tỷ lệ nén đẹp mắt.
Bản ghi là ảnh chụp của môi trường đã nêu. Bộ nhớ đệm và quyết định trình duyệt có thể ảnh hưởng lần truy cập sau. Muốn lặp lại, dùng ngữ cảnh mới và kiểm tra tệp yêu cầu thay vì đoán từ kích thước nhìn thấy.
Nối bước chuẩn bị với phân phối
Dùng công cụ nén ảnh trên các bản đã chuẩn bị rồi để website hoặc CMS cung cấp biến thể phù hợp. Nếu mã sinh ra trỏ mọi màn hình vào một tệp lớn, chỉ nén không đổi được lựa chọn đó.
Giữ sizes khớp bố cục CSS. Trình duyệt kết hợp gợi ý này với biến thể và mật độ màn hình; tên tệp không nói lên ý định tác giả. Kiểm tra tài nguyên đã chọn sau khi sửa bố cục.
Với quy trình xuất bản lặp lại, API dành cho nhà phát triển có thể nén các tệp đã chuẩn bị trong quá trình xuất bản. Thu nhỏ kích thước vẫn là bước chuẩn bị riêng. Hướng dẫn về chất lượng giải thích cách so sánh chi tiết trước khi thay ảnh.
Kiểm tra một ô ảnh trên trang
- Đo ô ảnh và xác định các chiều rộng cùng tỷ lệ cần thiết.
- Chuẩn bị, nén các bản sao và giữ nguồn chỉnh sửa được.
- Cung cấp biến thể bằng quy tắc
sizeskhớp bố cục. - Kiểm tra tài nguyên đã chọn và ảnh hiển thị trên nhiều màn hình.
Câu hỏi thường gặp
- Giảm chiều rộng hiển thị có giảm tệp tải về?
- Chiều rộng CSS đổi bố cục, không đổi số byte của một tệp. Cung cấp biến thể phù hợp và kiểm tra trình duyệt chọn tệp nào.
- Vì sao điện thoại mật độ cao chọn ảnh rộng hơn?
- Màn hình mật độ cao có thể dùng nhiều điểm ảnh hơn trong cùng ô nhìn thấy. Kích thước biến thể và gợi ý kích thước từ trang đều ảnh hưởng lựa chọn.
- Thử nghiệm có đo tốc độ trang không?
- Nó ghi kết quả nén và lựa chọn tài nguyên ảnh. Trải nghiệm tải toàn trang còn tùy tài nguyên khác, mạng và công dựng trang.