Nén hình ảnh cho trang web: giảm dung lượng mà không làm ảnh hưởng đến hình ảnh
Chọn độ phân giải, chất lượng và định dạng hình ảnh để giảm kích thước ảnh trên trang web mà không làm mờ văn bản và đường viền.

Trang công thức nấu ăn cần có thời gian để mở vì mỗi bức ảnh được gửi thẳng từ máy ảnh, nặng vài megabyte. Người đọc chỉ cần nhìn rõ đồ ăn trong chiều rộng của điện thoại di động. Việc giảm trọng lượng tệp có thể làm thay đổi trải nghiệm, miễn là quá trình nén được thực hiện theo tiêu chí.
Thứ nguyên đi trước phần trăm chất lượng
Nếu hình ảnh chiếm 800 pixel trên trang thì không có lý do gì để luôn xuất bản phiên bản 6000 pixel. Việc thay đổi kích thước trước tiên thường làm giảm chất lượng hơn là siết chặt mạnh mẽ. Sử dụngNén hình ảnhđể thử nó và quan sát cả kích thước và trọng lượng cuối cùng.
JPEG và WebP hoạt động tốt trên ảnh; PNG có xu hướng có ý nghĩa hơn trong đồ họa hoặc hình ảnh có độ trong suốt. Sự lựa chọn phụ thuộc vào nội dung và khả năng tương thích được yêu cầu. Một hình ảnh có số lượng nhỏ có thể trông xấu ở mức độ nén chấp nhận được đối với ảnh phong cảnh.
Bài kiểm tra phải diễn ra ở nơi hình ảnh xuất hiện

So sánh bản gốc và bản nén ở kích thước đầy đủ trên trang, trên màn hình sáng và tối nếu phù hợp. Xem các mặt, đường viền sản phẩm, độ chuyển màu và các chữ cái nội tuyến. Các khuyết tật phổ biến nhất là các khối nhìn thấy được, đường viền kép và các điểm ở các vùng đồng nhất.
Tên, phiên bản và trách nhiệm
Áp dụng tên tệp mô tả, chẳng hạn nhưbánh-sô-cô-la-slice.webpvà văn bản thay thế mô tả nội dung cho những người không thể xem ảnh. Giữ nguyên phiên bản gốc trong thư viện của bạn. Nếu bạn xuất bản nhiều hình ảnh, hãy chuẩn hóa độ rộng và so sánh việc tải trên kết nối chậm. Nén tốt là tìm ra phiên bản nhỏ nhất mà vẫn dễ chịu và dễ hiểu.
Trọng lượng trang là tổng của các hình ảnh
Một bức ảnh giảm từ 3 MB xuống 280 KB thể hiện mức tiết kiệm quan trọng nhưng một thư viện có 20 bức ảnh ở kích thước này vẫn cần vài megabyte. Nhìn vào bộ: kích thước bìa, hình thu nhỏ, hình ảnh bài viết và phiên bản dành cho màn hình lớn hơn. Đăng cùng một bức ảnh lớn ở mọi nơi sẽ lãng phí dữ liệu của khách truy cập. Khi nền tảng hỗ trợ hình ảnh phản hồi, hãy cung cấp các phiên bản tương ứng với kích thước hiển thị.
Đồng thời tránh nén liên tục trong suốt quá trình chỉnh sửa. Nếu ai đó lưu một JPEG đã bị giảm và trình chỉnh sửa tiếp theo sẽ nén lại thì tổn thất sẽ tích lũy. Giữ một bản sao chất lượng của ảnh gốc, kèm theo tên và tổ chức để bạn có thể tìm lại nó vài tháng sau. Bằng cách này, bạn có thể tạo kích thước mới khi bố cục thay đổi mà không phụ thuộc vào các tệp đã bị mất chi tiết.
Cũng đọc
- Xóa nền ảnh sản phẩm không xóa viền, chi tiết
- Cách xóa nền khỏi ảnh và cải thiện việc cắt xén các cạnh
- PNG, JPG hoặc WebP: sử dụng định dạng nào trong từng tình huống?
Tham khảo kỹ thuật: định dạng hình ảnh, nén và minh bạch (MDN).