Ảnh lớn là lý do số một khiến trang tải chậm. Cách sửa gần như luôn là hai bước: làm ảnh đúng kích thước, rồi nén phần còn lại. Làm cả hai và một tấm ảnh 4 MB thành một tấm ảnh 150 KB trông y hệt trên màn hình.
Hãy đặt những con số thật lên nó.
Các cỡ mục tiêu để nhắm tới
Bạn không cần đoán. Đây là các ngân sách trọng lượng thực dụng giữ cho trang nhanh:
- Hero / banner toàn chiều rộng: dưới 200 KB, lý tưởng là ~100–150 KB.
- Ảnh trong bài: 80–150 KB mỗi cái.
- Ảnh thu nhỏ / avatar: 10–30 KB.
- Logo hoặc biểu tượng (PNG/SVG): dưới 30 KB; thường ít hơn nhiều.
Và kích thước:
- Hero toàn chiều rộng: 1600–2000 px rộng là quá đủ cho hầu hết bố cục (chỉ gấp đôi nếu bạn nhắm tới Retina và có thể chịu được số byte).
- Ảnh trong cột: khớp với chiều rộng nội dung của bạn — thường 800–1200 px.
- Ảnh thu nhỏ: đúng cỡ nó thật sự hiển thị, chẳng hạn 300–400 px.
Nếu bất kỳ ảnh đơn nào trên một trang vượt ~300 KB, đó thường là một sai lầm đáng sửa.
Bước 1: đổi kích thước về chiều rộng hiển thị thật
Đây là bước người ta bỏ qua, và nó là đòn bẩy lớn nhất. Một tấm ảnh vừa chụp từ điện thoại thường rộng hơn 4000 pixel. Nếu nó hiển thị trong một cột 800 pixel, bạn đang gửi đi nhiều hơn 25 lần số pixel màn hình cho thấy — và số pixel chi phối dung lượng tệp hơn bất cứ thứ gì.
Dùng Công cụ đổi kích thước ảnh để hạ ảnh xuống đúng chiều rộng nó thật sự hiện ra. Đổi kích thước theo pixel hoặc phần trăm, giữ khóa tỷ lệ khung hình, và để bộ thu nhỏ chất lượng cao giữ các mép sạch.
Chỉ riêng việc chỉnh đúng cỡ thường cắt dung lượng tệp đi 80–90% trước khi bạn nén một byte nào.
Bước 2: nén phần còn lại
Giờ hãy thu nhỏ dữ liệu bên trong những kích thước đúng đó.
- Ảnh chụp (JPG/WebP): đặt thanh trượt chất lượng ở 75–85. Đó là không mất mát về mặt thị giác với hầu hết ảnh trong khi cắt dung lượng mạnh.
- PNG (ảnh chụp màn hình, đồ họa): Công cụ nén ảnh giảm chúng về một bảng màu 256 màu, thường tiết kiệm 60–80% mà không có thay đổi thấy được và giữ độ trong suốt.
Công cụ nén cũng giới hạn đầu ra ở cỡ gốc — nó không bao giờ trả lại thứ gì đó lớn hơn — và nó có một giới hạn chiều rộng tùy chọn, nên bạn thật sự có thể làm cả hai bước trong một lượt: đặt giới hạn về chiều rộng mục tiêu và nén luôn. Xử lý cả một thư mục theo lô và tải nó về dưới dạng một tệp ZIP.
Chọn đúng định dạng luôn thể
Nếu ảnh của bạn sẽ được phục vụ tới các trình duyệt hiện đại, chuyển ảnh chụp sang WebP thường vượt JPEG thêm 25–35% ở cùng chất lượng. Đồ họa phẳng thì giữ là PNG (hoặc WebP). Đừng lưu ảnh chụp dưới dạng PNG — đó là sai lầm phình to kinh điển, dễ dàng một cái giá gấp 5–10 lần.
Một luồng làm việc thực tế
Với một bài blog có năm tấm ảnh:
- Đổi kích thước mỗi cái về chiều rộng cột của bạn (chẳng hạn 1200 px).
- Nén ở chất lượng 80, hoặc chuyển sang WebP.
- Xác nhận mỗi cái rơi xuống dưới ~150 KB.
- Kiểm tra một vùng cắt 100% của một ảnh để chắc chất lượng vẫn giữ.
Năm tấm ảnh khởi đầu tổng cộng 20 MB sẽ rơi xuống quanh 600 KB — một trang tải trong một cái chớp mắt thay vì một cú đứng hình.
Riêng tư và ngoại tuyến
Mọi thứ ở trên chạy hoàn toàn trong trình duyệt của bạn bằng Canvas và WebAssembly. Không ảnh nào được tải lên máy chủ, và sau lần truy cập đầu các công cụ được lưu đệm và chạy ngoại tuyến. Bạn có thể tối ưu cả một bài đầy ảnh mà không cần kết nối và không gì rời khỏi máy của bạn.