Cách nén ảnh cho website

Trên một trang web điển hình, ảnh nặng hơn cả HTML, CSS và script cộng lại. Chỉ một tấm ảnh chép thẳng từ điện thoại đã có thể nặng 3 đến 6 MB, trong khi phần còn lại của trang chỉ vài trăm kilobyte. Xử lý ảnh là cách cải thiện hiệu năng rẻ nhất, và nó tác động trực tiếp đến Largest Contentful Paint — chỉ số Core Web Vitals đo tốc độ nội dung chính xuất hiện.

Hướng dẫn này là quy trình đầy đủ: xác định kích thước hiển thị của từng ảnh, chọn đúng định dạng, nén, kiểm tra kết quả và phân phối ảnh đúng cách. Cách làm áp dụng được cho website tự code, cửa hàng online hay blog trên bất kỳ hệ thống quản lý nội dung nào.

Xác định ngân sách trước khi bắt đầu

Có sẵn vài con số trong đầu sẽ giúp ích rất nhiều. Đây là mục tiêu thực tế, không phải quy tắc cứng:

• Ảnh hero hoặc banner toàn chiều rộng: khoảng 150 đến 300 KB.
• Ảnh minh họa trong bài viết: 50 đến 150 KB.
• Thẻ sản phẩm hoặc ảnh thu nhỏ trong lưới: 20 đến 60 KB.
• Logo hoặc biểu tượng: vài kilobyte, lý tưởng nhất là SVG.

Một trang có một ảnh hero và mười ảnh nội dung đạt các con số này sẽ có tổng dung lượng ảnh khoảng 1 đến 2 MB. Cùng trang đó mà dùng ảnh điện thoại để nguyên thì dễ dàng vượt 30 MB.

Bước 1. Đổi kích thước về đúng kích thước hiển thị

Số pixel ảnh hưởng đến dung lượng tệp nhiều hơn bất kỳ thiết lập chất lượng nào. Ảnh 4000×3000 có 12 triệu pixel; ở 1600×1200 thì chưa đến 2 triệu. Tức là giảm 85% trước khi bắt đầu nén.

Tìm chiều rộng lớn nhất mà ảnh từng được hiển thị, sau đó cộng thêm phần dư cho màn hình mật độ điểm ảnh cao:

• Ảnh hero toàn chiều rộng: rộng 1600 đến 2000 px là đủ cho hầu hết laptop và màn hình retina.
• Cột bài viết rộng 700 đến 800 px: xuất ở 1200 đến 1600 px để ảnh vẫn sắc nét trên màn hình 2×.
• Thẻ trong lưới ba cột: 600 đến 800 px.

Trong Thay đổi kích thước ảnh online, nhập chiều rộng và để trống ô chiều cao để giữ tỷ lệ, hoặc nhập cùng một số vào cả hai ô khi đang bật Giữ tỷ lệ khung hình để giới hạn cạnh dài của cả một loạt ảnh lẫn lộn dọc và ngang. Lưu ý rằng ảnh nhỏ hơn khung sẽ bị phóng to cho vừa, vì vậy đừng đưa các biểu tượng nhỏ vào một loạt xử lý có khung lớn.

Việc đổi kích thước giữ nguyên định dạng đầu vào. JPG và WebP được mã hóa lại ở chất lượng cao (0.92), PNG vẫn giữ nguyên dạng không mất dữ liệu. Thông tin vị trí và siêu dữ liệu máy ảnh bị loại bỏ trong quá trình này — điều bạn vốn cũng muốn với ảnh đăng công khai.

Bước 2. Chọn đúng định dạng

Hãy chọn theo nội dung, không theo thói quen:

• Ảnh chụp và mọi thứ có chuyển màu → WebP. Ở cùng chất lượng hình ảnh, WebP thường nhỏ hơn JPG 25 đến 35%, và mọi trình duyệt hiện nay đều hiển thị được.
• Ảnh chụp nhưng không thể dùng WebP → JPG ở chất lượng 75 đến 85. Một số mẫu email, hệ thống quản lý nội dung cũ và feed sàn thương mại điện tử vẫn yêu cầu JPG.
• Ảnh chụp màn hình, logo, sơ đồ, đồ họa phẳng → PNG, sau đó giảm bảng màu. Những ảnh này có ít màu và cạnh sắc nét, nơi JPG tạo ra vết nhòe dễ thấy.
• Đồ họa có nền trong suốt, kích thước lớn hoặc dạng ảnh chụp → WebP. Định dạng này giữ kênh alpha và nhỏ hơn PNG rất nhiều với ảnh sản phẩm đã tách nền.
• Biểu tượng và hình minh họa đơn giản → SVG bất cứ khi nào bạn có bản vector gốc. Không định dạng raster nào sánh được về dung lượng lẫn độ sắc nét.

Lỗi phổ biến nhất là ảnh chụp lưu dưới dạng PNG. Một ảnh chụp ở dạng PNG thường lớn gấp năm đến mười lần một tệp JPG tốt mà không có lợi ích gì nhìn thấy được.

Bước 3. Nén ảnh

Ảnh chụp sang WebP

Chuyển JPG sang WebP online mặc định ở chất lượng 85, phù hợp với hầu hết ảnh nội dung. Hạ xuống 70 đến 75 cho ảnh thu nhỏ và ảnh nền nằm dưới chữ, và tăng lên 90 cho ảnh hero có chi tiết nhỏ hoặc có chữ trong hình. Công cụ cũng nhận đầu vào PNG và giữ nguyên độ trong suốt.

Với ảnh chụp màn hình và đồ họa có nền trong suốt, Chuyển PNG sang WebP online mặc định ở chất lượng 90, giúp giữ các đường mảnh và chữ nhỏ sắc nét.

Việc mã hóa WebP dùng bộ mã hóa có sẵn của trình duyệt. Safari không mã hóa được WebP, nên ở bước này hãy dùng Chrome, Edge hoặc Firefox; trang sẽ báo lỗi thay vì lưu một tệp bị gắn nhầm định dạng.

Đồ họa phẳng ở dạng PNG

Nén ảnh PNG online giảm ảnh xuống bảng màu 256, 128 hoặc 64 màu và giữ nguyên độ trong suốt. Ảnh chụp màn hình và logo thường giảm 50 đến 70% dung lượng ở mức 256 màu mà không thay đổi gì nhìn thấy được. Hãy bắt đầu với 256, thử 128 cho ảnh chụp giao diện, và dành 64 cho biểu đồ và biểu tượng đơn giản. Công cụ không dùng dithering, nên các vùng chuyển màu mượt có thể bị phân dải; nếu vậy, hãy tăng lại một mức hoặc chuyển ảnh đó sang WebP.

Giữ định dạng JPG

Nén ảnh JPG online mặc định ở mức 80. Với nội dung website, 75 đến 80 thường là điểm cân bằng tốt nhất. Nếu tệp vốn đã được tối ưu tốt và việc mã hóa lại sẽ làm nó lớn hơn, công cụ trả lại tệp gốc nguyên vẹn.

Bước 4. Kiểm tra trước khi đăng

Thiết lập nén luôn là sự đánh đổi, vì vậy hãy xem kết quả ở những chỗ JPEG và WebP dễ hỏng trước nhất: vùng chuyển màu mượt của bầu trời hay bức tường, cạnh sắc có độ tương phản cao, và vùng màu đỏ đậm. So sánh hai hình ảnh đặt ảnh gốc và bản đã nén dưới cùng một thanh trượt để dễ nhận ra khác biệt.

Sau đó kiểm tra các con số. Mỗi dòng tệp hiển thị dung lượng trước và sau; tệp nào vẫn vượt xa ngân sách thường là do kích thước quá lớn, chứ không phải do chất lượng đặt quá cao.

Bước 5. Phân phối ảnh đúng cách

Nén mới chỉ là một nửa công việc. Mã HTML quyết định trình duyệt tải những gì bạn đã chuẩn bị ra sao:

• Luôn đặt width và height cho <img>. Trình duyệt sẽ giữ chỗ trước khi tệp tải về, giúp tránh xê dịch bố cục — một chỉ số Core Web Vitals khác.
• Tải lười các ảnh bên dưới màn hình đầu tiên bằng loading="lazy". Đừng bao giờ tải lười ảnh hero: nó thường là phần tử Largest Contentful Paint, và trì hoãn nó sẽ làm điểm số tệ hơn. Thay vào đó hãy gán fetchpriority="high".
• Dùng srcset và sizes khi cùng một ảnh hiển thị ở chiều rộng rất khác nhau trên điện thoại và máy tính. Xuất hai hoặc ba kích thước, ví dụ 800, 1200 và 1600 px, và để trình duyệt tự chọn.
• Chỉ dùng <picture> kèm JPG dự phòng nếu bạn buộc phải hỗ trợ trình duyệt rất cũ. Với hầu hết website, một tệp WebP thông thường là đủ.
• Đặt bộ nhớ đệm dài hạn. Cho tệp ảnh thời gian lưu đệm dài và đổi tên tệp khi ảnh thay đổi.

Nhiều hệ thống quản lý nội dung tự tạo các bản thu nhỏ khi tải lên. Điều đó có ích, nhưng chúng thu nhỏ từ chính tệp bạn tải lên, nên một ảnh gốc 6 MB vẫn đồng nghĩa với tải lên chậm và tốn dung lượng lưu trữ. Hãy tải lên ảnh đã gần với kích thước lớn nhất bạn cần.

Tùy chọn có sẵn trên máy tính và điện thoại

Nếu chỉ có vài tấm ảnh, có thể bạn không cần gì thêm:

• Xem trước (Preview) trên macOS: Công cụ → Điều chỉnh kích thước để đổi kích thước, sau đó Tệp → Xuất với thanh trượt chất lượng cho JPG. Nhanh gọn cho một hai tệp.
• Ảnh (Photos) trên Windows: tùy chọn "Resize image" có sẵn các kích thước định trước và thiết lập chất lượng. Paint cũng đổi được kích thước, nhưng lưu JPG mà không cho chọn chất lượng.
• iPhone và Android: trình chỉnh sửa có sẵn cho phép cắt ảnh nhưng không cho đặt kích thước pixel hay mức nén, vì vậy ảnh điện thoại dành cho website nên được xử lý trên đường đưa lên trang.

Các công cụ trong trình duyệt ở trên phát huy giá trị khi bạn có cả loạt ảnh: thả cả thư mục vào, tải kết quả về trong một tệp ZIP, và không có gì bị tải lên.

Khắc phục sự cố

• Tệp WebP lớn hơn tệp JPG. Tệp JPG gốc đã được nén mạnh, hoặc chất lượng đang đặt ở 95 đến 100. Hãy hạ chất lượng xuống 80 hoặc giữ JPG.
• Tệp PNG hầu như không nhỏ đi. Tệp đã ở dạng bảng màu hoặc đã được tối ưu. Công cụ sẽ báo rằng tệp gốc được giữ nguyên.
• Vùng trong suốt biến thành màu trắng. Ảnh đã đi qua Nén ảnh JPG online, mà JPG không hỗ trợ trong suốt. Hãy dùng Chuyển PNG sang WebP online hoặc Nén ảnh PNG online cho ảnh đã tách nền.
• Chữ trong ảnh chụp màn hình bị mờ. Dùng PNG hoặc WebP ở mức 90 trở lên, đừng bao giờ dùng JPG.
• Ảnh trông mờ trên màn hình retina. Bạn đã đổi kích thước theo chiều rộng CSS; hãy xuất ở khoảng gấp đôi con số đó.

Danh sách kiểm tra

1. Đo chiều rộng hiển thị lớn nhất của từng ảnh.
2. Đổi kích thước tối đa khoảng gấp đôi chiều rộng đó.
3. Ảnh chụp sang WebP ở mức 80 đến 85, đồ họa phẳng sang PNG bảng màu.
4. So sánh kết quả ở vùng chuyển màu và các cạnh.
5. Đối chiếu từng tệp với ngân sách dung lượng.
6. Thêm width, height, tải lười cho ảnh bên dưới màn hình đầu tiên và ưu tiên cao cho ảnh hero.